AMP
ZH
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe Polski Tiếng việt

验证 AMP 网页

观看我们的视频，了解各种验证选项。

AMP 的强大之处在于它不仅能提升网页加载速度，还能以可验证的方式让网页快速加载。这样一来，Twitter、Instagram 或 Google 搜索等第三方就能放心地通过越来越有趣的方式向读者呈现 AMP 网页。

如何检查我的网页是否是有效的 AMP 网页？

您可以通过多种方式验证 AMP 文档。这些验证方式产生的结果完全相同，因此不妨使用最适合您的开发风格的方式。

除了 AMP 有效性之外，您可能还需要确认 AMP 文档能被第三方平台发现。

浏览器开发者控制台

AMP 验证工具绑定了 AMP JS 库，因此可直接在任何 AMP 网页上使用。要验证 AMP 网页，请执行以下操作：

  1. 在浏览器中打开 AMP 网页。
  2. 将“#development=[1,actions,amp,amp4ads,amp4email]”附加到网址后面，例如 http://localhost:8000/released.amp.html#development=1 是用于验证 AMP 格式的旧方式。网址 http://localhost:8000/released.amp.html#development=amp4email 将针对 AMP 电子邮件规范验证文档。
  3. 打开 Chrome DevTools 控制台并检查有无验证错误。

DevTools 控制台中显示的错误与下面屏幕截图中的类似：

网页界面

AMP 验证工具可以当作网页界面使用，网址为 validator.ampproject.org。此界面会在网页 HTML 源代码旁边并排显示错误。此界面是一个互动式编辑器：更改 HTML 源代码会立即导致互动式重新验证。

浏览器扩展程序

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

如果 AMP 网页中存在错误，扩展程序的图标将为红色并显示遇到的错误数。
如果 AMP 网页中没有错误，图标将为绿色并显示警告数（如果有）。
如果网页不是 AMP 版本，但标示存在 AMP 版本，图标将为蓝色并带有一个链接图标，点击扩展程序会将浏览器重定向至对应的 AMP 版本。

AMP 验证工具扩展程序适用于 Chrome 和 Opera。

适用于 CI 的 NPM 软件包

作为构建和测试管道的一部分，您可以通过以下 AMP 验证工具 NPM 软件包集成 AMP 验证功能：amphtml-validator 或 gulp-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. 确保您已在自己的系统上安装 Node.js 及其软件包管理器 'npm'。
  2. 通过运行以下命令安装 AMP HTML 验证工具命令行工具：npm install -g amphtml-validator。

现在，我们来验证一个真实的 AMP HTML 网页：

$ amphtml-validator https://amp.dev/ https://amp.dev/: PASS

不出所料，此网页是有效的 AMP HTML。我们来试一个无效的网页：several_errors.html。要运行 amphtml-validator 命令，您可以提供网页的网址或本地文件名称。将 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 /zh_cn/documentation/components/amp-img/) several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /zh_cn/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 验证工具不仅能在开发过程中为您提供便利，还可供将您的 AMP 网页集成到其内容与搜索结果中的 Twitter 或 Google 等平台使用。尤其值得一提的是，他们通常不会直接向您的服务器请求网页，而是使用免费的 Google AMP 缓存服务来缓存您的网页并使之可向全球分发，从而进一步提高网页加载速度。

如果 AMP 验证服务检测到您的网页有问题，则该网页不会被第三方网站发现和分发，也不会出现在 Google AMP 缓存中。这样一来，您不仅会失去缓存的速度优势，您的网页还有可能无法在许多位置显示！这样就太糟糕了，我们一定要确保这种情况不会发生。

如何修复验证错误？

大多数验证错误都可以轻松处理和修复。请考虑使用以下 HTML 标记：

<img src="cat.png">

该标记生成了相关的 AMP 验证错误（在 3 种不同的工具中分别如下所示）：

  • 浏览器开发者控制台

  • 网页界面

  • 浏览器扩展程序

每种工具都提供了以下几个信息：

  1. HTML 文档中存在错误的位置（行和列），在某些界面中可以点击，以突出显示相应位置。在本例中，错误发生在第 11 行第 2 列。
  2. 一行描述错误的文字。在本例中，这些文字表明我们在本该使用 <amp-img> 标记的位置使用了 <img> 标记。
  3. 指向与错误相关的文档的链接。本例中是指 <amp-img> 标记的文档。并非所有错误都会生成文档链接。

再次仔细阅读规范之后，我们意识到我们在本该使用 <amp-img> 标记的位置使用了 <img> 标记。

要详细了解可能出现的错误的完整列表，请参阅 AMP 验证错误指南。如果在认真评估之后仍有疑问，请提出问题，我们将尽力提供帮助。