AMP

使您的页面可被发现

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

您的网站可以由全部 AMP 页面、部分 AMP 页面或没有 AMP 页面组成。本教程的这一部分将介绍如何将 AMP 合并到您的网站结构中。

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

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

如果可以,请像使用其他 JavaScript 库一样使用 AMP 来构建您的网站,而忘记规范链接。使用 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 新闻文章。