在上一期AMP教程中 ,我们向您展示了如何采用AMP(加速的移动页面)来显着提高速度,并在移动环境中更好地展示Google在您的网站上的移动搜索结果。
看到AMP的潜力后,我想您可能已经开始或计划开始对您的网站进行更改以符合AMP的要求 。 仔细遵循文档上的指南,并编写CSS来对AMP页面进行样式设置以适合您的视觉需求。
现在,还有最后一件事要做:验证那些页面。
AMP验证器
有几种方法可以验证您的AMP页面:
- 在AMP页面URL的末尾添加#development
#development=1
跟踪。 该报告将投影在DevTools下的Console选项卡中。 - 或者,您可以使用在线AMP验证器 。
- 您也可以使用Chrome AMP扩展程序 。
这些工具将生成报告,列出页面内的错误或警告。 基于此,您可以选择要解决的问题。
![带有AMP错误报告的控制台界面](https://i-blog.csdnimg.cn/blog_migrate/491ed701c27e68d427da3deff9d7054c.png)
AMP验证主要控制HTML元素 , s和样式声明的使用 。 确保页面中的所有内容均符合AMP,并且其中没有违反AMP准则的内容。 否则,您的AMP页面将不会出现在任何地方。
数据结构
AMP还需要Schema数据结构。 此数据以JSON格式布置在页面的head
标签中。 它包含页面的上下文信息,包括标题,发布者徽标和名称,发布和修改的日期等。
<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网站管理员帐户中。
![Google数据结构工具中的表格报告显示警告和错误](https://i-blog.csdnimg.cn/blog_migrate/81b62923f76ece04dd627026947528bc.png)
AMP使用者或支持AMP的客户端(例如Google Search和Twitter Moments)可以使用这组数据在其结果页面中显示AMP内容。
![放大器结果](https://i-blog.csdnimg.cn/blog_migrate/2f9b7cb1315fa9d3be7da7329847ebe8.png)
因此,除了遵循AMP准则及其专有的自定义HTML元素外,还必须具备所需的架构数据。
被忽略的错误
大多数错误已在文档中明确指出,并且可以一目了然。 但是,一些错误是由变量引起的,这些变量可能无法引起我们的注意,例如“无效的属性值”,该变量表示"The attribute '%1' in tag '%2' is set to the invalid value '%3'."
。
此错误报告未提及或精确列出哪个值无效。 但是我知道的是,我们不能将<amp-img>
元素的width
和height
设置为100%
或auto
。 这些属性值必须是图像的确切大小,以保持图像比率。
![功放报告](https://i-blog.csdnimg.cn/blog_migrate/e73aded4d50359495bb1b296501a4e6a.png)
这只是一个例子。 有许多自定义元素amp-img
, amp-iframe
和amp-ads
带有针对属性及其值的使用的自己的验证规则集。
这可能会使验证AMP Page成为一项艰巨的任务,尤其是如果我们考虑了数百年前(或也许是数千年)发布的旧内容的话。
最终思想
AMP仍处于早期阶段。 在Google和网络开发社区的共同努力下,它处于非常积极的开发状态。 但是AMP肯定会发展 。 与HTML5相似,将来可能会淘汰某些元素,属性和某些做法。 因此,请确保根据指南的最新更改不时对AMP页面进行持续验证 。