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”类型。标题应与您的文章标题匹配。image 对象引用文章的英雄图像。

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

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

验证结构化数据

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

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

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

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

做得好!您已经完成了您的 AMP 新闻文章。