如何验证加速的移动页面（AMP）

在上一期AMP教程中 ，我们向您展示了如何采用AMP（加速移动页面）来显着提高速度，并在移动环境中更好地展示Google在您的网站上的移动搜索结果。

仔细遵循文档上的准则，并编写CSS来对AMP页面进行样式设置以适合您的视觉需求。

看到AMP的潜力之后，我想您可能已经开始或计划开始对您的网站进行更改以符合AMP的要求 。

现在，还有最后一件事要做：验证那些页面。

AMP验证器

有几种方法可以验证您的AMP页面：

1. 在AMP页面网址末尾的＃development #development=1路径中添加。 该报告将投影在DevTools下的Console选项卡中。
2. 或者，您可以使用在线AMP验证器 。
3. 您也可以使用Chrome AMP扩展程序 。

基于此，您可以选择要解决的问题。

这些工具将生成报告，列出页面内的错误或警告。

DevTools控制台中的AMP错误报告。

否则，您的AMP页面将不会出现在任何地方。

确保页面中的所有内容均符合AMP，并且其中没有任何违反AMP准则的内容。

AMP验证主要控制HTML元素 ， s和样式声明的使用 。

数据结构

它包含页面的上下文信息，包括标题，发布者徽标和名称，发布和修改的日期等。

此数据以JSON格式布置在页面的head标签中。

AMP还需要Schema数据结构。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

根据页面的目的，要包含的数据可能会有所不同：文章，评论，食谱，视频等。有关数据类型的详细信息，请参阅Google数据类型文档 。

但是，这些类型的错误不会出现在上述AMP验证器中。

其他一些类型的数据是可选的，只会产生警告。

如果没有提供某些数据，将会产生错误；

相反，它们将显示在Google结构化数据测试工具以及您的Google网站管理员帐户中。

AMP使用者或支持AMP的客户端（例如Google搜索和Twitter Moments）可以使用这组数据在其结果页中显示AMP内容。

Google SERP中的AMP轮播

因此，除了遵循AMP准则及其专有的自定义HTML元素外，还必须具备所需的架构数据。

被忽略的错误

。

但是，一些错误是由变量引起的，我们可能不会注意到这些变量，例如“无效的属性值”，该变量表示"The attribute '%1' in tag '%2' is set to the invalid value '%3'."

大多数错误已在文档中明确指出，并且可以一目了然。

这些属性值必须是图像的确切大小，以保持图像比率。

但是我知道的是，我们不能将<amp-img>元素的width和height设置为100%或auto 。

此错误报告未提及或精确列出哪个值无效。

有许多自定义元素amp-img ， amp-iframe和amp-ads带有针对属性及其值的使用的自己的验证规则集。

这只是一个例子。

这可能会使验证AMP Page成为一项艰巨的任务，尤其是如果我们考虑了数百年前（或也许是数千年）发布的旧内容的话。

最终思想

因此，请确保根据指南的最新更改不时对AMP页面进行持续验证 。

与HTML5相似，将来可能会淘汰某些元素，属性和某些做法。

但是AMP肯定会发展 。

在Google和网络开发社区的共同努力下，它处于非常积极的开发状态。

AMP仍处于早期阶段。

翻译自: https://www.hongkiat.com/blog/amp-page-validation/