i18n: seo

lighthouse-cli/test/smokehouse/seo/expectations.js

@@ -100,7 +100,7 @@ module.exports = [
       'font-size': {
         rawValue: false,
         explanation:
-          'Text is illegible because there\'s no viewport meta tag optimized for mobile screens',
+          'Text is illegible because there\'s no viewport meta tag optimized for mobile screens.',
       },
       'link-text': {
         score: 0,

lighthouse-core/audits/seo/canonical.js

@@ -10,6 +10,31 @@ const LinkHeader = require('http-link-header');
 const URL = require('../../lib/url-shim');
 const MainResource = require('../../computed/main-resource.js');
 const LINK_HEADER = 'link';
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on a page's rel=canonical link. This descriptive title is shown to users when the rel=canonical link is valid. */
+  title: 'Document has a valid `rel=canonical`',
+  /** Descriptive title of a Lighthouse audit that provides detail on a page's rel=canonical link. This imperative title is shown to users when the rel=canonical link is invalid and should be fixed. */
+  failureTitle: 'Document does not have a valid `rel=canonical`',
+  /** Description of a Lighthouse audit that tells the user *why* they need to have a valid rel=canonical link. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Canonical links suggest which URL to show in search results. ' +
+    '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/canonical).',
+  /** [ICU Syntax] Explanatory message stating that there was a failure in an audit caused by multiple URLs conflicting with each other. */
+  explanationConflict: 'Multiple conflicting URLs ({urlList})',
+  /** [ICU Syntax] Explanatory message stating that there was a failure in an audit caused by a URL being invalid. */
+  explanationInvalid: 'Invalid URL ({url})',
+  /** [ICU Syntax] Explanatory message stating that there was a failure in an audit caused by a URL being relative instead of absolute. */
+  explanationRelative: 'Relative URL ({url})',
+  /** [ICU Syntax] Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different hreflang than the current context. */
+  explanationPointsElsewhere: 'Points to another hreflang location ({href})',
+  /** [ICU Syntax] Explanatory message stating that there was a failure in an audit caused by a URL pointing to a different domain. */
+  explanationDifferentDomain: 'Points to a different domain ({url})',
+  /** Explanatory message stating that the page's canonical URL was pointing to a root of the same origin which is a common mistake. The canonical URL should point a different page with the same content whose URL is preferred, not a parent or root page. */
+  explanationRoot: 'Points to a root of the same origin',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * @param {string} headerValue
@@ -62,10 +87,9 @@ class Canonical extends Audit {
   static get meta() {
     return {
       id: 'canonical',
-      title: 'Document has a valid `rel=canonical`',
-      failureTitle: 'Document does not have a valid `rel=canonical`',
-      description: 'Canonical links suggest which URL to show in search results. ' +
-        '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/canonical).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Canonical', 'Hreflang', 'URL'],
     };
   }
@@ -118,7 +142,7 @@ class Canonical extends Audit {
         if (canonicals.length > 1) {
           return {
             rawValue: false,
-            explanation: `Multiple conflicting URLs (${canonicals.join(', ')})`,
+            explanation: str_(UIStrings.explanationConflict, {urlList: canonicals.join(', ')}),
           };
         }
 
@@ -127,14 +151,14 @@ class Canonical extends Audit {
         if (!isValidRelativeOrAbsoluteURL(canonical)) {
           return {
             rawValue: false,
-            explanation: `Invalid URL (${canonical})`,
+            explanation: str_(UIStrings.explanationInvalid, {url: canonical}),
           };
         }
 
         if (!URL.isValid(canonical)) {
           return {
             rawValue: false,
-            explanation: `Relative URL (${canonical})`,
+            explanation: str_(UIStrings.explanationRelative, {url: canonical}),
           };
         }
 
@@ -145,7 +169,7 @@ class Canonical extends Audit {
           baseURL.href !== canonicalURL.href) {
           return {
             rawValue: false,
-            explanation: `Points to another hreflang location (${baseURL.href})`,
+            explanation: str_(UIStrings.explanationPointsElsewhere, {href: baseURL.href}),
           };
         }
 
@@ -154,7 +178,7 @@ class Canonical extends Audit {
         if (getPrimaryDomain(canonicalURL) !== getPrimaryDomain(baseURL)) {
           return {
             rawValue: false,
-            explanation: `Points to a different domain (${canonicalURL})`,
+            explanation: str_(UIStrings.explanationDifferentDomain, {url: canonicalURL}),
           };
         }
 
@@ -163,7 +187,7 @@ class Canonical extends Audit {
           canonicalURL.pathname === '/' && baseURL.pathname !== '/') {
           return {
             rawValue: false,
-            explanation: 'Points to a root of the same origin',
+            explanation: str_(UIStrings.explanationRoot),
           };
         }
 
@@ -175,3 +199,4 @@ class Canonical extends Audit {
 }
 
 module.exports = Canonical;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/seo/font-size.js

@@ -14,14 +14,22 @@ const ViewportAudit = require('../viewport');
 const MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT = 60;
 
 const UIStrings = {
-  /** Imperative title of a Lighthouse audit that tells the user that they should use font sizes that are easily read by the user. This is displayed in a list of audit titles that Lighthouse generates. */
+  /** Title of a Lighthouse audit that provides detail on the font sizes used on the page. This descriptive title is shown to users when the fonts used on the page are large enough to be considered legible. */
   title: 'Document uses legible font sizes',
-  /** Imperative title of a Lighthouse audit that tells the user that they should use font sizes that are easily read by the user. This imperative title is shown to users when there is a font that is too small to be read by the user. */
+  /** Descriptive title of a Lighthouse audit that provides detail on the font sizes used on the page. This imperative title is shown to users when there is a font that is too small to be read by the user. */
   failureTitle: 'Document doesn\'t use legible font sizes',
   /** Description of a Lighthouse audit that tells the user *why* they need to use a larger font size. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
   description: 'Font sizes less than 12px are too small to be legible and require mobile visitors to “pinch to zoom” in order to read. Strive to have >60% of page text ≥12px. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/font-sizes).',
   /** [ICU Syntax] Label for the audit identifying font sizes that are too small. */
   displayValue: '{decimalProportion, number, extendedPercent} legible text',
+  /** Explanatory message stating that there was a failure in an audit caused by a missing page viewport meta tag configuration. */
+  explanationViewport: 'Text is illegible because there\'s no viewport meta tag optimized ' +
+    'for mobile screens.',
+  /** Explanatory message stating that there was a failure in an audit caused by a certain percentage of the text on the page being too small. */
+  explanation: '{decimalProportion, number, extendedPercent} of text is too small.',
+  /** Explanatory message stating that there was a failure in an audit caused by a certain percentage of the text on the page being too small, based on a sample size of text that was less than 100% of the text on the page. */
+  explanationWithDisclaimer: '{decimalProportion, number, extendedPercent} of text is too ' +
+    'small (based on {decimalProportionVisited, number, extendedPercent} sample).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -212,8 +220,7 @@ class FontSize extends Audit {
     if (!hasViewportSet) {
       return {
         rawValue: false,
-        explanation:
-          'Text is illegible because there\'s no viewport meta tag optimized for mobile screens',
+        explanation: str_(UIStrings.explanationViewport),
       };
     }
 
@@ -287,16 +294,20 @@ class FontSize extends Audit {
 
     let explanation;
     if (!passed) {
-      const percentageOfFailingText = parseFloat((100 - percentageOfPassingText).toFixed(2));
-      let disclaimer = '';
+      const percentageOfFailingText = parseFloat((100 - percentageOfPassingText).toFixed(2)) / 100;
 
       // if we were unable to visit all text nodes we should disclose that information
       if (visitedTextLength < totalTextLength) {
-        const percentageOfVisitedText = visitedTextLength / totalTextLength * 100;
-        disclaimer = ` (based on ${percentageOfVisitedText.toFixed()}% sample)`;
+        const percentageOfVisitedText = (visitedTextLength / totalTextLength).toFixed(2);
+        explanation = str_(UIStrings.explanationWithDisclaimer,
+          {
+            decimalProportion: percentageOfFailingText,
+            decimalProportionVisited: percentageOfVisitedText,
+          });
+      } else {
+        explanation = str_(UIStrings.explanation,
+          {decimalProportion: percentageOfFailingText});
       }
-
-      explanation = `${percentageOfFailingText}% of text is too small${disclaimer}.`;
     }
 
     return {

lighthouse-core/audits/seo/hreflang.js

@@ -11,6 +11,20 @@ const MainResource = require('../../computed/main-resource.js');
 const VALID_LANGS = importValidLangs();
 const LINK_HEADER = 'link';
 const NO_LANGUAGE = 'x-default';
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the `hreflang` element on a page. This descriptive title is shown when the `hreflang` element is configured correctly. */
+  title: 'Document has a valid `hreflang`',
+  /** Descriptive title of a Lighthouse audit that provides detail on the `hreflang` element on a page. This imperative title is shown when the `hreflang` element is not valid and needs to be fixed. */
+  failureTitle: 'Document doesn\'t have a valid `hreflang`',
+  /** Description of a Lighthouse audit that tells the user *why* they need to have an hreflang link on their page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'hreflang links tell search engines what version of a page they should ' +
+    'list in search results for a given language or region. [Learn more]' +
+    '(https://developers.google.com/web/tools/lighthouse/audits/hreflang).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * Import list of valid languages from axe core without including whole axe-core package
@@ -65,11 +79,9 @@ class Hreflang extends Audit {
   static get meta() {
     return {
       id: 'hreflang',
-      title: 'Document has a valid `hreflang`',
-      failureTitle: 'Document doesn\'t have a valid `hreflang`',
-      description: 'hreflang links tell search engines what version of a page they should ' +
-        'list in search results for a given language or region. [Learn more]' +
-        '(https://developers.google.com/web/tools/lighthouse/audits/hreflang).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['Hreflang', 'URL'],
     };
   }
@@ -120,3 +132,4 @@ class Hreflang extends Audit {
 }
 
 module.exports = Hreflang;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/seo/http-status-code.js

@@ -9,6 +9,20 @@ const Audit = require('../audit');
 const MainResource = require('../../computed/main-resource.js');
 const HTTP_UNSUCCESSFUL_CODE_LOW = 400;
 const HTTP_UNSUCCESSFUL_CODE_HIGH = 599;
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the HTTP status code a page responds with. This descriptive title is shown when the page has responded with a valid HTTP status code. */
+  title: 'Page has successful HTTP status code',
+  /** Descriptive title of a Lighthouse audit that provides detail on the HTTP status code a page responds with. This imperative title is shown when the page responds to requests with an HTTP status code that indicates the request was unsuccessful. */
+  failureTitle: 'Page has unsuccessful HTTP status code',
+  /** Description of a Lighthouse audit that tells the user *why* they need to serve pages with a valid HTTP status code. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Pages with unsuccessful HTTP status codes may not be indexed properly. ' +
+  '[Learn more]' +
+  '(https://developers.google.com/web/tools/lighthouse/audits/successful-http-code).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class HTTPStatusCode extends Audit {
   /**
@@ -17,11 +31,9 @@ class HTTPStatusCode extends Audit {
   static get meta() {
     return {
       id: 'http-status-code',
-      title: 'Page has successful HTTP status code',
-      failureTitle: 'Page has unsuccessful HTTP status code',
-      description: 'Pages with unsuccessful HTTP status codes may not be indexed properly. ' +
-      '[Learn more]' +
-      '(https://developers.google.com/web/tools/lighthouse/audits/successful-http-code).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['devtoolsLogs', 'URL'],
     };
   }
@@ -55,3 +67,4 @@ class HTTPStatusCode extends Audit {
 }
 
 module.exports = HTTPStatusCode;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/seo/is-crawlable.js

@@ -15,6 +15,20 @@ const BLOCKLIST = new Set([
 ]);
 const ROBOTS_HEADER = 'x-robots-tag';
 const UNAVAILABLE_AFTER = 'unavailable_after';
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the blocking status of their page in regards to search-engine index crawling. This descriptive title is shown when the page is not blocked from indexing and can be crawled. */
+  title: 'Page isn’t blocked from indexing',
+  /** Descriptive title of a Lighthouse audit that provides detail on the blocking status of their page in regards to search-engine index crawling. This imperative title is shown when the page has been configured to block indexing and therefore cannot be indexed by search engines. */
+  failureTitle: 'Page is blocked from indexing',
+  /** Description of a Lighthouse audit that tells the user *why* they need to allow crawling on their page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Search engines are unable to include your pages in search results ' +
+      'if they don\'t have permission to crawl them. [Learn ' +
+      'more](https://developers.google.com/web/tools/lighthouse/audits/indexing).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 /**
  * Checks if given directive is a valid unavailable_after directive with a date in the past
@@ -64,11 +78,9 @@ class IsCrawlable extends Audit {
   static get meta() {
     return {
       id: 'is-crawlable',
-      title: 'Page isn’t blocked from indexing',
-      failureTitle: 'Page is blocked from indexing',
-      description: 'Search engines are unable to include your pages in search results ' +
-          'if they don\'t have permission to crawl them. [Learn ' +
-          'more](https://developers.google.com/web/tools/lighthouse/audits/indexing).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['MetaElements', 'RobotsTxt', 'URL'],
     };
   }
@@ -135,3 +147,4 @@ class IsCrawlable extends Audit {
 }
 
 module.exports = IsCrawlable;
+module.exports.UIStrings = UIStrings;

lighthouse-core/audits/seo/link-text.js

@@ -18,6 +18,24 @@ const BLOCKLIST = new Set([
   'more',
   'learn more',
 ]);
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the text descriptions used for links on the page. This descriptive title is shown when all links on the page have sufficient textual descriptions. */
+  title: 'Links have descriptive text',
+  /** Descriptive title of a Lighthouse audit that provides detail on the text descriptions used for links on the page, this is shown when links contain generic non-descriptive text like "click here". This imperative title is shown when one or more links on the page do not have enough text describing them to be considered valid when being crawled by a search engine. */
+  failureTitle: 'Links do not have descriptive text',
+  /** Description of a Lighthouse audit that tells the user *why* they need to have descriptive text on the links in their page. This is displayed after a user expands the section to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Descriptive link text helps search engines understand your content. ' +
+  '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text).',
+  /** [ICU Syntax] Label for the audit identifying the number of links found. */
+  displayValue: `{itemCount, plural,
+    =1 {1 link found}
+    other {# links found}
+    }`,
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 class LinkText extends Audit {
   /**
@@ -26,10 +44,9 @@ class LinkText extends Audit {
   static get meta() {
     return {
       id: 'link-text',
-      title: 'Links have descriptive text',
-      failureTitle: 'Links do not have descriptive text',
-      description: 'Descriptive link text helps search engines understand your content. ' +
-      '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text).',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
       requiredArtifacts: ['URL', 'AnchorElements'],
     };
   }
@@ -70,8 +87,7 @@ class LinkText extends Audit {
     let displayValue;
 
     if (failingLinks.length) {
-      displayValue = failingLinks.length > 1 ?
-        `${failingLinks.length} links found` : '1 link found';
+      displayValue = str_(UIStrings.displayValue, {itemCount: failingLinks.length});
     }
 
     return {
@@ -83,3 +99,4 @@ class LinkText extends Audit {
 }
 
 module.exports = LinkText;
+module.exports.UIStrings = UIStrings;