diff --git a/lighthouse-cli/test/fixtures/seo/seo-failure-cases.html b/lighthouse-cli/test/fixtures/seo/seo-failure-cases.html index 91a272e51b3b..062c31298314 100644 --- a/lighthouse-cli/test/fixtures/seo/seo-failure-cases.html +++ b/lighthouse-cli/test/fixtures/seo/seo-failure-cases.html @@ -12,6 +12,10 @@ + + + +

SEO

diff --git a/lighthouse-cli/test/fixtures/seo/seo-tester.html b/lighthouse-cli/test/fixtures/seo/seo-tester.html index 095dc2e79733..442ac3f7c04c 100644 --- a/lighthouse-cli/test/fixtures/seo/seo-tester.html +++ b/lighthouse-cli/test/fixtures/seo/seo-tester.html @@ -11,6 +11,12 @@ + + + + + +

SEO

diff --git a/lighthouse-cli/test/fixtures/static-server.js b/lighthouse-cli/test/fixtures/static-server.js index 8a2dea1fb4b7..69e1c3c9148f 100644 --- a/lighthouse-cli/test/fixtures/static-server.js +++ b/lighthouse-cli/test/fixtures/static-server.js @@ -12,7 +12,7 @@ const path = require('path'); const fs = require('fs'); const parseQueryString = require('querystring').parse; const parseURL = require('url').parse; -const HEADER_SAFELIST = new Set(['x-robots-tag']); +const HEADER_SAFELIST = new Set(['x-robots-tag', 'link']); const lhRootDirPath = path.join(__dirname, '../../../'); diff --git a/lighthouse-cli/test/smokehouse/seo/expectations.js b/lighthouse-cli/test/smokehouse/seo/expectations.js index 82602f6d4c6c..ae55871da27f 100644 --- a/lighthouse-cli/test/smokehouse/seo/expectations.js +++ b/lighthouse-cli/test/smokehouse/seo/expectations.js @@ -4,14 +4,29 @@ * 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 BASE_URL = 'http://localhost:10200/seo/'; + +function headersParam(headers) { + return headers + .map(({name, value}) => `extra_header=${name}:${encodeURI(value)}`) + .join('&'); +} + +const failureHeaders = headersParam([{ + name: 'x-robots-tag', + value: 'none', +}, { + name: 'link', + value: ';rel="alternate";hreflang="xx"', +}]); /** * Expected Lighthouse audit values for seo tests */ module.exports = [ { - initialUrl: 'http://localhost:10200/seo/seo-tester.html', - url: 'http://localhost:10200/seo/seo-tester.html', + initialUrl: BASE_URL + 'seo-tester.html', + url: BASE_URL + 'seo-tester.html', audits: { 'viewport': { score: true, @@ -31,11 +46,14 @@ module.exports = [ 'is-crawlable': { score: true, }, + 'hreflang': { + score: true, + }, }, }, { - initialUrl: 'http://localhost:10200/seo/seo-failure-cases.html?status_code=403&extra_header=x-robots-tag:none', - url: 'http://localhost:10200/seo/seo-failure-cases.html?status_code=403&extra_header=x-robots-tag:none', + initialUrl: BASE_URL + 'seo-failure-cases.html?status_code=403&' + failureHeaders, + url: BASE_URL + 'seo-failure-cases.html?status_code=403&' + failureHeaders, audits: { 'viewport': { score: false, @@ -72,6 +90,14 @@ module.exports = [ }, }, }, + 'hreflang': { + score: false, + details: { + items: { + length: 3, + }, + }, + }, }, }, ]; diff --git a/lighthouse-core/audits/seo/hreflang.js b/lighthouse-core/audits/seo/hreflang.js new file mode 100644 index 000000000000..46592aa738ad --- /dev/null +++ b/lighthouse-core/audits/seo/hreflang.js @@ -0,0 +1,112 @@ +/** + * @license Copyright 2017 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 Audit = require('../audit'); +const LinkHeader = require('http-link-header'); +const VALID_LANGS = importValidLangs(); +const LINK_HEADER = 'link'; +const NO_LANGUAGE = 'x-default'; + +/** + * Import list of valid languages from axe core without including whole axe-core package + * This is a huge array of language codes that can be stored more efficiently if we will need to + * shrink the bundle size. + */ +function importValidLangs() { + const axeCache = global.axe; + global.axe = {utils: {}}; + require('axe-core/lib/commons/utils/valid-langs.js'); + const validLangs = global.axe.utils.validLangs(); + global.axe = axeCache; + + return validLangs; +} + +/** + * @param {string} hreflang + * @returns {boolean} + */ +function isValidHreflang(hreflang) { + if (hreflang.toLowerCase() === NO_LANGUAGE) { + return true; + } + + // hreflang can consist of language-script-region, we are validating only language + const [lang] = hreflang.split('-'); + return VALID_LANGS.includes(lang.toLowerCase()); +} + +/** + * @param {string} headerValue + * @returns {boolean} + */ +function headerHasValidHreflangs(headerValue) { + const linkHeader = LinkHeader.parse(headerValue); + + return linkHeader.get('rel', 'alternate') + .every(link => link.hreflang && isValidHreflang(link.hreflang)); +} + +class Hreflang extends Audit { + /** + * @return {!AuditMeta} + */ + static get meta() { + return { + name: 'hreflang', + description: 'Document has a valid `hreflang`', + failureDescription: 'Document doesn\'t have a valid `hreflang`', + helpText: 'hreflang allows crawlers to discover alternate translations of the ' + + 'page content. [Learn more]' + + '(https://support.google.com/webmasters/answer/189077).', + requiredArtifacts: ['Hreflang'], + }; + } + + /** + * @param {!Artifacts} artifacts + * @return {!AuditResult} + */ + static audit(artifacts) { + const devtoolsLogs = artifacts.devtoolsLogs[Audit.DEFAULT_PASS]; + + return artifacts.requestMainResource(devtoolsLogs) + .then(mainResource => { + /** @type {Array<{source: string|{type: string, snippet: string}}>} */ + const invalidHreflangs = []; + + if (artifacts.Hreflang) { + artifacts.Hreflang.forEach(({href, hreflang}) => { + if (!isValidHreflang(hreflang)) { + invalidHreflangs.push({ + source: { + type: 'node', + snippet: ``, + }, + }); + } + }); + } + + mainResource.responseHeaders + .filter(h => h.name.toLowerCase() === LINK_HEADER && !headerHasValidHreflangs(h.value)) + .forEach(h => invalidHreflangs.push({source: `${h.name}: ${h.value}`})); + + const headings = [ + {key: 'source', itemType: 'code', text: 'Source'}, + ]; + const details = Audit.makeTableDetails(headings, invalidHreflangs); + + return { + rawValue: invalidHreflangs.length === 0, + details, + }; + }); + } +} + +module.exports = Hreflang; diff --git a/lighthouse-core/config/default.js b/lighthouse-core/config/default.js index def894524c3c..0150c281b116 100644 --- a/lighthouse-core/config/default.js +++ b/lighthouse-core/config/default.js @@ -39,6 +39,7 @@ module.exports = { 'seo/meta-description', 'seo/crawlable-links', 'seo/meta-robots', + 'seo/hreflang', ], }, { @@ -165,6 +166,7 @@ module.exports = { 'seo/http-status-code', 'seo/link-text', 'seo/is-crawlable', + 'seo/hreflang', ], groups: { diff --git a/lighthouse-core/config/seo.js b/lighthouse-core/config/seo.js index 0eda0f8dce0d..49bed5564d15 100644 --- a/lighthouse-core/config/seo.js +++ b/lighthouse-core/config/seo.js @@ -13,6 +13,7 @@ module.exports = { 'seo/meta-description', 'seo/crawlable-links', 'seo/meta-robots', + 'seo/hreflang', ], }], audits: [ @@ -20,6 +21,7 @@ module.exports = { 'seo/http-status-code', 'seo/link-text', 'seo/is-crawlable', + 'seo/hreflang', ], groups: { 'seo-mobile': { @@ -47,6 +49,7 @@ module.exports = { {id: 'http-status-code', weight: 1, group: 'seo-crawl'}, {id: 'link-text', weight: 1, group: 'seo-content'}, {id: 'is-crawlable', weight: 1, group: 'seo-crawl'}, + {id: 'hreflang', weight: 1, group: 'seo-content'}, ], }, }, diff --git a/lighthouse-core/gather/gatherers/seo/hreflang.js b/lighthouse-core/gather/gatherers/seo/hreflang.js new file mode 100644 index 000000000000..f05028ab3d72 --- /dev/null +++ b/lighthouse-core/gather/gatherers/seo/hreflang.js @@ -0,0 +1,32 @@ +/** + * @license Copyright 2017 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'); + +class Hreflang extends Gatherer { + /** + * @param {{driver: !Object}} options Run options + * @return {!Promise>} Array with hreflang and href values of all link[rel=alternate] nodes found in HEAD + */ + afterPass(options) { + const driver = options.driver; + + return driver.querySelectorAll('head link[rel="alternate" i][hreflang]') + .then(nodes => Promise.all(nodes.map(node => + Promise.all([node.getAttribute('href'), node.getAttribute('hreflang')])) + ) + ).then(attributeValues => attributeValues && + attributeValues.map(values => { + const [href, hreflang] = values; + return {href, hreflang}; + }) + ); + } +} + +module.exports = Hreflang; + diff --git a/lighthouse-core/test/audits/seo/hreflang.js b/lighthouse-core/test/audits/seo/hreflang.js new file mode 100644 index 000000000000..36e6d9189e69 --- /dev/null +++ b/lighthouse-core/test/audits/seo/hreflang.js @@ -0,0 +1,164 @@ +/** + * @license Copyright 2017 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 HreflangAudit = require('../../../audits/seo/hreflang.js'); +const assert = require('assert'); + +/* eslint-env mocha */ + +describe('SEO: Document has valid hreflang code', () => { + it('fails when language code provided in hreflang via link element is invalid', () => { + const hreflangValues = [ + 'xx', + 'XX-be', + 'XX-be-Hans', + '', + ' es', + ]; + + const allRuns = hreflangValues.map(hreflangValue => { + const mainResource = { + responseHeaders: [], + }; + const artifacts = { + devtoolsLogs: {[HreflangAudit.DEFAULT_PASS]: []}, + requestMainResource: () => Promise.resolve(mainResource), + Hreflang: [{ + hreflang: hreflangValue, + href: 'https://example.com', + }], + }; + + return HreflangAudit.audit(artifacts).then(auditResult => { + assert.equal(auditResult.rawValue, false); + assert.equal(auditResult.details.items.length, 1); + }); + }); + + return Promise.all(allRuns); + }); + + it('succeeds when language code provided via link element is valid', () => { + const mainResource = { + responseHeaders: [], + }; + const artifacts = { + devtoolsLogs: {[HreflangAudit.DEFAULT_PASS]: []}, + requestMainResource: () => Promise.resolve(mainResource), + Hreflang: [ + {hreflang: 'pl'}, + {hreflang: 'nl-be'}, + {hreflang: 'zh-Hans'}, + {hreflang: 'x-default'}, + {hreflang: 'FR-BE'}, + ], + }; + + return HreflangAudit.audit(artifacts).then(auditResult => { + assert.equal(auditResult.rawValue, true); + }); + }); + + it('succeeds when there are no rel=alternate link elements nor headers', () => { + const mainResource = { + responseHeaders: [], + }; + const artifacts = { + devtoolsLogs: {[HreflangAudit.DEFAULT_PASS]: []}, + requestMainResource: () => Promise.resolve(mainResource), + Hreflang: [], + }; + + return HreflangAudit.audit(artifacts).then(auditResult => { + assert.equal(auditResult.rawValue, true); + }); + }); + + it('fails when language code provided in hreflang via header is invalid', () => { + const linkHeaders = [ + [ + {name: 'Link', value: '; rel="alternate"; hreflang="xx"'}, + ], + [ + {name: 'link', value: '; rel="alternate"; hreflang=""'}, + ], + [ + {name: 'LINK', value: '; rel="alternate"'}, + ], + [ + {name: 'Link', value: '; rel="alternate"; hreflang="es",; rel="alternate"; Hreflang="xx"'}, + ], + [ + {name: 'link', value: '; rel="alternate"; hreflang="es"'}, + {name: 'Link', value: '; rel="alternate"; hreflang="x"'}, + ], + ]; + + const allRuns = linkHeaders.map(headers => { + const mainResource = { + responseHeaders: headers, + }; + const artifacts = { + devtoolsLogs: {[HreflangAudit.DEFAULT_PASS]: []}, + requestMainResource: () => Promise.resolve(mainResource), + Hreflang: null, + }; + + return HreflangAudit.audit(artifacts).then(auditResult => { + assert.equal(auditResult.rawValue, false); + assert.equal(auditResult.details.items.length, 1); + }); + }); + + return Promise.all(allRuns); + }); + + it('succeeds when language codes provided via Link header are valid', () => { + const mainResource = { + responseHeaders: [ + {name: 'link', value: ''}, + {name: 'link', value: 'garbage'}, + {name: 'link', value: '; rel="example"; hreflang="xx"'}, + {name: 'link', value: '; rel="alternate"; hreflang="es"'}, + {name: 'Link', value: '; rel="alternate"; hreflang="fr-be"'}, + {name: 'LINK', value: '; rel="alternate"; hreflang="es",; rel="alternate"; Hreflang="fr-be"'}, + ], + }; + const artifacts = { + devtoolsLogs: {[HreflangAudit.DEFAULT_PASS]: []}, + requestMainResource: () => Promise.resolve(mainResource), + Hreflang: null, + }; + + return HreflangAudit.audit(artifacts).then(auditResult => { + assert.equal(auditResult.rawValue, true); + }); + }); + + it('returns all failing items', () => { + const mainResource = { + responseHeaders: [ + {name: 'link', value: '; rel="alternate"; hreflang="xx1"'}, + {name: 'Link', value: '; rel="alternate"; hreflang="xx2"'}, + ], + }; + const artifacts = { + devtoolsLogs: {[HreflangAudit.DEFAULT_PASS]: []}, + requestMainResource: () => Promise.resolve(mainResource), + Hreflang: [{ + hreflang: 'xx3', + }, { + hreflang: 'xx4', + }], + }; + + return HreflangAudit.audit(artifacts).then(auditResult => { + assert.equal(auditResult.rawValue, false); + assert.equal(auditResult.details.items.length, 4); + }); + }); +}); diff --git a/package.json b/package.json index a21fe526a8b6..f5daeb66f759 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "chrome-launcher": "0.8.1", "configstore": "^3.1.1", "devtools-timeline-model": "1.1.6", + "http-link-header": "^0.8.0", "inquirer": "^3.3.0", "jpeg-js": "0.1.2", "js-library-detector": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index bfd3ff3ba5d9..996c5397bc46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2028,6 +2028,10 @@ html-encoding-sniffer@^1.0.1: dependencies: whatwg-encoding "^1.0.1" +http-link-header@^0.8.0: + version "0.8.0" + resolved "https://registry.npmjs.org/http-link-header/-/http-link-header-0.8.0.tgz#a22b41a0c9b1e2d8fac1bf1b697c6bd532d5f5e4" + http-signature@~1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"