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,例如,http://localhost:8000/released.amp.html#development=1 是验证 AMP 格式的传统方法。以下 URL,http://localhost:8000/released.amp.html#development=amp4email 将根据 AMP for email 规范验证文档。
  3. 打开 Chrome DevTools 控制台并检查验证错误。

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

Screen grab of AMP Validator errors in chrome developer console

Web 界面

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

Screen grab of validator.ampproject.org with error examples.

浏览器扩展程序

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

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

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

用于 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 验证错误指南。如果您在仔细评估后仍然卡住,请提出问题,我们将尽力提供帮助。