AMP

让你的页面可被发现

现在你已用 AMP 制作了一篇新闻文章,让我们确保用户可以找到并发现你的内容。

你的网站可以由所有 AMP 页面、部分 AMP 页面或没有 AMP 页面组成。本教程的这一部分将介绍如何将 AMP 纳入你的网站结构。

在常规 HTML 页面中进行规范链接是一种常见的技术,用于声明当多个页面包含相同内容时应将哪个页面视为首选页面。

在向网站添加 AMP 时,一种常见的方法是生成传统非 AMP HTML 页面的 AMP 版本。这两个版本通常具有相同的内容(例如文章文本),但它们可能具有不同的呈现方式。在这种情况下,你应将传统 HTML 页面视为“规范”页面,并将 AMP 页面与这些 HTML 页面配对。

如果可以,使用 AMP 就像使用任何其他 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">

下图说明了链接标签的方向

链接 AMP 内容

有必要设置这种双向链接,以便搜索引擎了解我们的常规 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>

注意 – 内容应始终相同。对于新闻文章,指定“NewsArticle”类型。标题应与文章标题匹配。图像对象是指文章的英雄图像。

重新加载浏览器中的页面,并验证是否未引入任何 AMP 验证错误。

除了 schema.org 结构化数据格式外,还有其他格式受搜索引擎和社交媒体网络支持。请参阅受支持的文档

验证结构化数据

为了验证您的结构化数据是否正确,许多平台提供了验证工具。在本教程中,我们将使用 Google 结构化数据验证工具 验证我们的结构化数据。

  1. 在新浏览器窗口中,打开 Google 结构化数据验证工具
  2. 选择代码片段选项卡。
  3. 将 AMP 页面的完整源代码复制并粘贴到验证工具的文本编辑器面板中。
  4. 点击运行测试

如果您的结构化数据有效,您应该会看到0 个错误0 个警告

继续阅读 – 要了解有关页面可发现性的更多信息,请参阅 让您的页面可被发现 指南。

太棒了!您已完成您的 AMP 新闻文章。