验证 AMP 页面
AMP 的主要优势不仅在于它能使你的页面加载速度更快,还在于它能以一种可验证的方式使你的页面加载速度更快。这样,Twitter、Instagram 或 Google 搜索等第三方就可以放心地以越来越有趣的方式向读者提供 AMP 页面。
如何检查我的页面是否为有效的 AMP?
有几种方法可用于验证 AMP 文档。它们都会产生完全相同的结果,因此请使用最适合你的开发风格的方法。
除了 AMP 有效性之外,你可能还希望确认你的 AMP 文档对于第三方平台来说是可发现的。
浏览器开发者控制台
AMP 验证器与 AMP JS 库捆绑在一起,因此它开箱即用地出现在每个 AMP 页面上。要验证
- 在浏览器中打开你的 AMP 页面。
- 将 "
#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
将根据电子邮件规范验证文档。 - 打开 Chrome DevTools 控制台 并检查验证错误。
开发者控制台错误看起来类似于此
Web 界面
AMP 验证器可以用作网络界面,网址为 validator.ampproject.org。此界面显示与页面的 HTML 源代码内联显示的错误。该界面是一个交互式编辑器:对 html 源代码的更改会导致交互式重新验证。
浏览器扩展
可以使用浏览器扩展直接从浏览器的工具栏访问 AMP 验证器。当你浏览时,它会自动验证访问的每个 AMP 页面,并以彩色图标的形式直观地指示页面的有效性。
| 当 AMP 页面中存在错误时,扩展程序的图标显示为红色,并显示遇到的错误数。 |
| 当 AMP 页面中没有错误时,图标显示为绿色,并显示警告数(如果存在)。 |
| 当页面不是 AMP,但页面表明有 AMP 版本可用时,图标显示为蓝色并带有链接图标,单击扩展程序会将浏览器重定向到 AMP 版本。 |
适用于 Chrome 和 Opera 的 AMP 验证器扩展程序。
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 文件。
开始
- 确保您的系统上安装了 Node.js 及其包管理器“npm”。
- 通过运行以下命令安装 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 界面
-
浏览器扩展
每个工具都会提供多条信息
- 错误发生在 HTML 文档中的位置(行和列),在某些界面中可点击以突出显示该位置。在本例中,问题发生在第 11 行,第 2 列。
- 描述错误的一行文本。在本例中,文本指出我们正在使用
<img>
标记,而我们应该使用<amp-img>
标记。 - 指向与错误相关的相关文档的链接。在本例中,是
<amp-img>
标记的文档。并非所有错误都会生成文档链接。
仔细重新阅读 规范 后,我们意识到我们正在使用 <img>
标记,而我们应该使用 <amp-img>
标记。
要更好地了解潜在错误的完整列表,请参阅 AMP 验证错误指南。如果您在仔细评估后仍然遇到问题,提出问题,我们会尽力提供帮助。