core(meta): refactor all meta audits to single artifact

lighthouse-cli/test/fixtures/seo/seo-failure-cases.html

@@ -12,7 +12,7 @@
   <!-- FAIL(font-size): missing viewport -->
   <meta name="viewport" content="invalid-content=should_have_looked_it_up">
   <!-- no <meta name="description" content=""> -->
-  <meta name="robots" content="nofollow, NOINDEX, all">
+  <meta name="RoBots" content="nofollow, NOINDEX, all">
   <!-- FAIL(hreflang): invalid language code -->
   <link rel="alternate" hreflang="xx" href="https://xx.example.com" />
   <!-- FAIL(hreflang): spece before a valid code -->

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

@@ -199,7 +199,7 @@ class FontSize extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['FontSize', 'URL', 'Viewport'],
+      requiredArtifacts: ['FontSize', 'URL', 'MetaElements'],
     };
   }
 

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

@@ -69,7 +69,7 @@ class IsCrawlable extends Audit {
       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).',
-      requiredArtifacts: ['MetaRobots', 'RobotsTxt', 'URL'],
+      requiredArtifacts: ['MetaElements', 'RobotsTxt', 'URL'],
     };
   }
 
@@ -80,20 +80,22 @@ class IsCrawlable extends Audit {
    */
   static audit(artifacts, context) {
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const metaRobots = artifacts.MetaElements.find(meta => meta.name === 'robots');
 
     return MainResource.request({devtoolsLog, URL: artifacts.URL}, context)
       .then(mainResource => {
         /** @type {Array<Object<string, LH.Audit.DetailsItem>>} */
         const blockingDirectives = [];
 
-        if (artifacts.MetaRobots) {
-          const isBlocking = hasBlockingDirective(artifacts.MetaRobots);
+        if (metaRobots) {
+          const metaRobotsContent = metaRobots.content || '';
+          const isBlocking = hasBlockingDirective(metaRobotsContent);
 
           if (isBlocking) {
             blockingDirectives.push({
               source: {
                 type: /** @type {'node'} */ ('node'),
-                snippet: `<meta name="robots" content="${artifacts.MetaRobots}" />`,
+                snippet: `<meta name="robots" content="${metaRobotsContent}" />`,
               },
             });
           }

lighthouse-core/audits/seo/meta-description.js

@@ -19,7 +19,7 @@ class Description extends Audit {
       description: 'Meta descriptions may be included in search results to concisely summarize ' +
           'page content. ' +
           '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/description).',
-      requiredArtifacts: ['MetaDescription'],
+      requiredArtifacts: ['MetaElements'],
     };
   }
 
@@ -28,13 +28,15 @@ class Description extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    if (artifacts.MetaDescription === null) {
+    const metaDescription = artifacts.MetaElements.find(meta => meta.name === 'description');
+    if (!metaDescription) {
       return {
         rawValue: false,
       };
     }
 
-    if (artifacts.MetaDescription.trim().length === 0) {
+    const description = metaDescription.content || '';
+    if (description.trim().length === 0) {
       return {
         rawValue: false,
         explanation: 'Description text is empty.',

lighthouse-core/audits/themed-omnibox.js

@@ -30,7 +30,7 @@ class ThemedOmnibox extends MultiCheckAudit {
       failureTitle: 'Does not set an address-bar theme color',
       description: 'The browser address bar can be themed to match your site. ' +
           '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/address-bar).',
-      requiredArtifacts: ['Manifest', 'ThemeColor'],
+      requiredArtifacts: ['Manifest', 'MetaElements'],
     };
   }
 
@@ -43,13 +43,13 @@ class ThemedOmnibox extends MultiCheckAudit {
   }
 
   /**
-   * @param {LH.Artifacts['ThemeColor']} themeColorMeta
+   * @param {LH.Artifacts['MetaElements'][0]|undefined} themeColorMeta
    * @param {Array<string>} failures
    */
   static assessMetaThemecolor(themeColorMeta, failures) {
-    if (themeColorMeta === null) {
+    if (!themeColorMeta) {
       failures.push('No `<meta name="theme-color">` tag found');
-    } else if (!ThemedOmnibox.isValidColor(themeColorMeta)) {
+    } else if (!ThemedOmnibox.isValidColor(themeColorMeta.content || '')) {
       failures.push('The theme-color meta tag did not contain a valid CSS color');
     }
   }
@@ -79,14 +79,15 @@ class ThemedOmnibox extends MultiCheckAudit {
     /** @type {Array<string>} */
     const failures = [];
 
+    const themeColorMeta = artifacts.MetaElements.find(meta => meta.name === 'theme-color');
     const manifestValues = await ManifestValues.request(artifacts.Manifest, context);
     ThemedOmnibox.assessManifest(manifestValues, failures);
-    ThemedOmnibox.assessMetaThemecolor(artifacts.ThemeColor, failures);
+    ThemedOmnibox.assessMetaThemecolor(themeColorMeta, failures);
 
     return {
       failures,
       manifestValues,
-      themeColor: artifacts.ThemeColor,
+      themeColor: (themeColorMeta && themeColorMeta.content) || null,
     };
   }
 }

lighthouse-core/audits/viewport.js

@@ -20,7 +20,7 @@ class Viewport extends Audit {
           'or `initial-scale`',
       description: 'Add a viewport meta tag to optimize your app for mobile screens. ' +
           '[Learn more](https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag).',
-      requiredArtifacts: ['Viewport'],
+      requiredArtifacts: ['MetaElements'],
     };
   }
 
@@ -29,15 +29,16 @@ class Viewport extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    if (artifacts.Viewport === null) {
+    const viewportMeta = artifacts.MetaElements.find(meta => meta.name === 'viewport');
+    if (!viewportMeta) {
       return {
         explanation: 'No viewport meta tag found',
         rawValue: false,
       };
     }
 
     const warnings = [];
-    const parsedProps = Parser.parseMetaViewPortContent(artifacts.Viewport);
+    const parsedProps = Parser.parseMetaViewPortContent(viewportMeta.content || '');
 
     if (Object.keys(parsedProps.unknownProperties).length) {
       warnings.push(`Invalid properties found: ${JSON.stringify(parsedProps.unknownProperties)}`);

lighthouse-core/config/default-config.js

@@ -86,15 +86,14 @@ const defaultConfig = {
     gatherers: [
       'scripts',
       'css-usage',
-      'viewport',
       'viewport-dimensions',
-      'theme-color',
       'manifest',
       'runtime-exceptions',
       'chrome-console-messages',
       'image-usage',
       'accessibility',
       'link-elements',
+      'meta-elements',
       'dobetterweb/anchors-with-no-rel-noopener',
       'dobetterweb/appcache',
       'dobetterweb/doctype',
@@ -104,10 +103,8 @@ const defaultConfig = {
       'dobetterweb/password-inputs-with-prevented-paste',
       'dobetterweb/response-compression',
       'dobetterweb/tags-blocking-first-paint',
-      'seo/meta-description',
       'seo/font-size',
       'seo/crawlable-links',
-      'seo/meta-robots',
       'seo/hreflang',
       'seo/embedded-content',
       'seo/canonical',

lighthouse-core/gather/gatherers/meta-elements.js

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const Gatherer = require('./gatherer.js');
+const getElementsInDocumentString = require('../../lib/page-functions.js').getElementsInDocumentString; // eslint-disable-line max-len
+
+class MetaElements extends Gatherer {
+  /**
+   * @param {LH.Gatherer.PassContext} passContext
+   * @return {Promise<LH.Artifacts['MetaElements']>}
+   */
+  async afterPass(passContext) {
+    const driver = passContext.driver;
+
+    // We'll use evaluateAsync because the `node.getAttribute` method doesn't actually normalize
+    // the values like access from JavaScript does.
+    return driver.evaluateAsync(`(() => {
+      ${getElementsInDocumentString};
+
+      return getElementsInDocument('head meta').map(meta => {
+        return {
+          name: meta.name.toLowerCase(),
+          content: meta.content,
+        };
+      });
+    })()`, {useIsolation: true});
+  }
+}
+
+module.exports = MetaElements;

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

@@ -14,10 +14,12 @@ const validViewport = 'width=device-width';
 /* eslint-env jest */
 
 describe('SEO: Font size audit', () => {
+  const makeMetaElements = viewport => viewport ? [{name: 'viewport', content: viewport}] : [];
+
   it('fails when viewport is not set', () => {
     const artifacts = {
       URL,
-      Viewport: null,
+      MetaElements: makeMetaElements(null),
       FontSize: [],
     };
 
@@ -29,7 +31,7 @@ describe('SEO: Font size audit', () => {
   it('fails when less than 60% of text is legible', () => {
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 100,
         visitedTextLength: 100,
@@ -51,7 +53,7 @@ describe('SEO: Font size audit', () => {
   it('passes when there is no text', () => {
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 0,
         visitedTextLength: 0,
@@ -70,7 +72,7 @@ describe('SEO: Font size audit', () => {
   it('passes when more than 60% of text is legible', () => {
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 330,
         visitedTextLength: 330,
@@ -106,7 +108,7 @@ describe('SEO: Font size audit', () => {
     };
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 7,
         visitedTextLength: 7,
@@ -130,7 +132,7 @@ describe('SEO: Font size audit', () => {
   it('adds a category for failing text that wasn\'t analyzed', () => {
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 100,
         visitedTextLength: 100,
@@ -152,7 +154,7 @@ describe('SEO: Font size audit', () => {
   it('informs user if audit haven\'t covered all text on the page', () => {
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 100,
         visitedTextLength: 50,
@@ -172,7 +174,7 @@ describe('SEO: Font size audit', () => {
   it('maintains 2 trailing decimal places', () => {
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 323,
         visitedTextLength: 323,
@@ -191,7 +193,7 @@ describe('SEO: Font size audit', () => {
   it('maintains 2 trailing decimal places with only 1 leading digit', () => {
     const artifacts = {
       URL,
-      Viewport: validViewport,
+      MetaElements: makeMetaElements(validViewport),
       FontSize: {
         totalTextLength: 323,
         visitedTextLength: 323,