让你的页面可被发现
现在你已用 AMP 制作了一篇新闻文章,让我们确保用户可以找到并发现你的内容。
链接 AMP 内容
你的网站可以由所有 AMP 页面、部分 AMP 页面或没有 AMP 页面组成。本教程的这一部分将介绍如何将 AMP 纳入你的网站结构。
在常规 HTML 页面中进行规范链接是一种常见的技术,用于声明当多个页面包含相同内容时应将哪个页面视为首选页面。
在向网站添加 AMP 时,一种常见的方法是生成传统非 AMP HTML 页面的 AMP 版本。这两个版本通常具有相同的内容(例如文章文本),但它们可能具有不同的呈现方式。在这种情况下,你应将传统 HTML 页面视为“规范”页面,并将 AMP 页面与这些 HTML 页面配对。
如果可以,使用 AMP 就像使用任何其他 JavaScript 库来构建网站并忘记规范链接。使用 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 新闻文章。