让您的网页可被发现
现在您已经用 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
将这些页面配对。
我们已经通过在 <head>
中包含返回规范页面的链接标记,在我们的 AMP 文档中迈出了实现此目标的第一步
<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 新闻文章。