AMP

验证 AMP 页面

观看我们关于各种验证选项的视频。

AMP 的主要优势不仅仅在于它使你的页面速度更快,还在于它以一种可以被验证的方式使你的页面速度更快。这样,诸如 Twitter、Instagram 或 Google 搜索之类的第三方可以放心地以越来越有趣的方式向读者提供 AMP 页面。

如何检查我的页面是否为有效的 AMP 页面?

有几种方法可以用来验证 AMP 文档。它们都会产生完全相同的结果,因此请使用最适合你的开发风格的方法。

除了 AMP 有效性之外,你可能还需要确认你的 AMP 文档对于第三方平台是可发现的

浏览器开发者控制台

AMP 验证器与 AMP JS 库捆绑在一起,因此在每个 AMP 页面上都可用。要验证

  1. 在浏览器中打开你的 AMP 页面。
  2. 将 "#development=[1,actions,amp,amp4ads,amp4email]" 附加到 URL,例如,https://127.0.0.1:8000/released.amp.html#development=1 是验证 AMP 格式的传统方法。以下 URL https://127.0.0.1:8000/released.amp.html#development=amp4email 将根据 AMP for email 规范验证文档。
  3. 打开Chrome DevTools 控制台并检查验证错误。

开发者控制台错误将类似于这样

Web 界面

AMP 验证器可以在 validator.ampproject.org 上用作 Web 界面。此界面会在页面的 HTML 源代码旁边显示内联错误。该界面是一个交互式编辑器:对 html 源代码的更改会导致交互式重新验证。

浏览器扩展程序

可以使用浏览器扩展程序直接从浏览器的工具栏访问 AMP 验证器。当你浏览时,它会自动验证访问的每个 AMP 页面,并以彩色图标直观地指示页面的有效性。

当 AMP 页面中存在错误时,扩展程序的图标会以红色显示,并显示遇到的错误数。
当 AMP 页面中没有错误时,图标会以绿色显示,并显示警告数(如果存在)。
当页面不是 AMP 页面,但该页面表明有 AMP 版本可用时,图标会以蓝色显示,并带有链接图标,单击该扩展程序会将浏览器重定向到 AMP 版本。

AMP 验证器扩展程序适用于 ChromeOpera

用于 CI 的 NPM 包

作为构建和测试管道的一部分,你可以通过 AMP 验证器 NPM 包集成 AMP 验证:amphtml-validatorgulp-amphtml-validator (一个 gulp 插件)。例如,你可以使用 AMP 验证器 NPM 包进行集成测试或在计划任务中验证生产 AMP 页面。

示例:验证 AMP HTML 文件

在此示例中,我们通过使用 amphtml-validator NPM 包来验证 AMP HTML 文件。验证状态会通过管道输出到控制台。

'use strict';
var amphtmlValidator = require('amphtml-validator');
var fs = require('fs');

amphtmlValidator.getInstance().then(function (validator) {
  var input = fs.readFileSync('index.html', 'utf8');
  var result = validator.validateString(input);
  ((result.status === 'PASS') ? console.log : console.error)(result.status);
  for (var ii = 0; ii < result.errors.length; ii++) {
    var error = result.errors[ii];
    var msg = 'line ' + error.line + ', col ' + error.col + ': ' + error.message;
    if (error.specUrl !== null) {
      msg += ' (see ' + error.specUrl + ')';
    }
    ((error.severity === 'ERROR') ? console.error : console.warn)(msg);
  }
});
示例:使用 gulp 任务验证 AMP HTML

在此示例中,我们有一个 gulp 任务,该任务会验证所有 AMP HTML 文件。如果存在 AMP 验证错误,则该任务将以错误代码 (1) 退出。

const gulp = require('gulp');
const gulpAmpValidator = require('gulp-amphtml-validator');

const paths = {
  src: 'src/*.html'
};

gulp.task('amphtml:validate', () => {
  return gulp.src(paths.src)
    .pipe(gulpAmpValidator.validate())
    .pipe(gulpAmpValidator.format())
    .pipe(gulpAmpValidator.failAfterError());
});

gulp.task('default', ['amphtml:validate'], function () {
});

命令行工具

你可以使用 AMP HTML 验证器命令行工具来验证 AMP HTML 文件。

入门

  1. 请确保你的系统上安装了带有其包管理器“npm”的 Node.js
  2. 通过运行以下命令安装 AMP HTML 验证器命令行工具npm install -g amphtml-validator

现在让我们验证一个真正的 AMP HTML 页面

$ amphtml-validator https://amp.org.cn/
https://amp.org.cn/: PASS

毫不奇怪,此页面是有效的 AMP HTML。让我们尝试一个无效的页面:several_errors.html。要运行 amphtml-validator 命令,你可以提供页面的 URL 或本地文件名。下载并将 several_errors.html 保存到文件中,然后运行

$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see /documentation/components/amp-img/)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /documentation/components/amp-ad/)
...

错误消息的格式包括文件名、行、列和消息,通常后面会附带指向 AMP HTML 参考的链接。包括 Emacs 在内的一些编辑器可以解释此格式,并让你跳转到原始文件中的错误。

要开始创建你自己的 AMP 页面,请考虑使用 minimum_valid_amp.html

$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS

该命令行工具提供了其他功能,包括关闭颜色、打印 JSON 输出或运行特定版本的验证器 Javascript(默认情况下它运行最新发布的脚本)。

$ amphtml-validator --help

  Usage: index [options] <fileOrUrlOrMinus...>

  Validates the files or urls provided as arguments. If "-" is
  specified, reads from stdin instead.

  Options:

    -h, --help                  output usage information
    -V, --version               output the version number
    --validator_js <fileOrUrl>  The Validator Javascript.
      Latest published version by default, or
      dist/validator_minified.js (built with build.py)
      for development.
    --format <color|text|json>  How to format the output.
      "color" displays errors/warnings/success in
              red/orange/green.
      "text"  avoids color (e.g., useful in terminals not
              supporting color).
      "json"  emits json corresponding to the ValidationResult
              message in validator.proto.

如果我的页面无效会怎样?

AMP 验证器不仅仅是你在开发过程中的便利工具。Twitter 或 Google 等平台也会使用它,这些平台会将你的 AMP 页面集成到它们的内容和搜索结果中。此外,它们通常不直接从你的服务器请求页面,而是使用 Google AMP 缓存,这是一项免费服务,可以缓存你的页面并使其在世界各地可用,从而使加载速度更快。

如果 AMP 验证服务检测到你的页面存在问题,则第三方网站不会发现并分发该页面,并且不会出现在 Google AMP 缓存中。因此,你不仅会失去缓存的速度优势,而且你的页面很可能在许多地方都看不到!那将是一件遗憾的事情,所以让我们确保这种情况不会发生。

如何修复验证错误?

大多数验证错误都很容易处理和修复。考虑一下此 HTML 标记

<img src="cat.png">

这会生成此 AMP 验证错误,这些错误显示在以下不同的工具中

  • 浏览器开发者控制台

  • Web 界面

  • 浏览器扩展程序

每个工具都提供以下几条信息

  1. HTML 文档中发生错误的位置(行和列),在某些界面中可单击以突出显示该位置。在这种情况下,问题发生在第 11 行,第 2 列。
  2. 一行描述错误的文本。在这种情况下,文本表明我们正在使用 <img> 标记,而我们应该使用 <amp-img> 标记。
  3. 指向有关该错误的相应文档的链接。在这种情况下,是 <amp-img> 标记的文档。并非所有错误都会生成文档链接。

仔细重新阅读 规范后,我们意识到我们正在使用 <img> 标记,而我们应该使用 <amp-img> 标记。

要更好地了解潜在错误的完整列表,请参阅AMP 验证错误指南。如果你在仔细评估后仍然遇到问题,请提出问题,我们将尽力帮助你。