使您的页面可被发现
现在您已经用 AMP 制作了一篇新闻文章,让我们确保用户可以找到并发现您的内容。
链接 AMP 内容
您的网站可以由全部 AMP 页面、部分 AMP 页面或没有 AMP 页面组成。本教程的这一部分将介绍如何将 AMP 合并到您的网站结构中。
在常规 HTML 页面中,规范链接是一种常见的技术,用于声明当多个页面包含相同内容时应将哪个页面视为首选页面。
向网站添加 AMP 时,一种常见的方法是生成传统非 AMP HTML 页面的 AMP 版本。这两个版本通常具有相同的内容(例如,文章的文本),但它们可能具有不同的呈现方式。在这种情况下,您应该将传统的 HTML 页面视为“规范”页面,并将 AMP 页面与这些 HTML 页面配对。
如果可以,请像使用其他 JavaScript 库一样使用 AMP 来构建您的网站,而忘记规范链接。使用 AMP 构建整个网站可以大大减少您的维护负担。
在本教程中,我们将重点介绍您拥有页面的 AMP 和非 AMP 版本的情况。在本教程中,我们的网站包含一篇新闻文章,该文章具有非 AMP HTML 页面(article.html)和该页面的 AMP 版本(article.amp.html)。我们将通过 link 将这些页面配对。
我们已经在 AMP 文档中通过在 <head> 中包含一个指向规范页面的链接标签完成了实现此目的的第一步
<link rel="canonical" href="/article.html">
下一步是将规范文章链接到 AMP 页面。这可以通过在规范文章的 <head> 部分包含 <link rel="amphtml"> 标签来实现。
在 article.html 文件中,将以下代码添加到 <head> 部分
<link rel="amphtml" href="/article.amp.html">
下图说明了链接标签的方向
必须设置这种双向链接,以便搜索引擎理解我们常规 HTML 规范文档和 AMP 文档之间的关系。如果未提供任何链接,则爬虫程序不一定清楚哪些文章是常规 HTML 文档的“AMP 版本”。通过显式提供这些链接,我们确保不存在歧义!
添加结构化数据
有效的 AMP 页面不需要 schema.org 结构化数据,但某些平台(如 Google 搜索)需要它才能获得某些体验,例如“热门新闻”轮播。通常,最好包括结构化数据。结构化数据有助于搜索引擎更好地了解您的网页,并在搜索引擎结果页面(例如,在富摘要中)更好地显示您的内容。结构化数据通过 application/ld+json 类型的脚本标签包含在 AMP 页面的 <head> 标签中。
对于我们的新闻文章,将以下结构化数据添加到 AMP 文档的 <head> 部分的底部
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_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": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>
在浏览器中重新加载页面,并验证是否未引入 AMP 验证错误。
验证结构化数据
为了验证您的结构化数据是否正确,许多平台都提供了验证工具。在本教程中,我们将使用 Google 结构化数据验证工具验证我们的结构化数据。
- 在一个新的浏览器窗口中,打开 Google 结构化数据验证工具。
- 选择“代码段”选项卡。
- 将 AMP 页面的完整源代码复制并粘贴到验证工具的文本编辑器面板中。
- 单击“运行测试”。
如果您的结构化数据有效,则应看到“0 个错误”和“0 个警告”。
太棒了!您已完成您的 AMP 新闻文章。