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 将这些页面配对。

我们已经通过在 <head> 中包含返回规范页面的链接标记,在我们的 AMP 文档中迈出了实现此目标的第一步

<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 新闻文章。