Google 于 2015 年首次推出 AMP,即加速移动页面。借助开源 AMP 框架,网页设计师可以制作快速加载的移动网页。该框架的创建是为了应对使用移动设备访问互联网的个人数量的增加。从那时起,谷歌一直在推动使用 AMP 来增强移动设备上的 SEO 和用户体验。我们将在这篇文章中更详细地研究 AMP,并讨论它如何影响 SEO。

什么是 Google AMP?


如前所述,AMP 是一个开源框架,允许开发人员创建快速加载的移动页面。AMP 使用 HTML、CSS 和 JavaScript 的精简版本来显著缩短网页加载时间。AMP 还会在 Google 的服务器上缓存网页,让用户点击网页时几乎可以立即加载网页。使用 AMP 的网页会显示在移动设备搜索结果顶部的轮播界面中,从而让用户更容易看到这些网页。

为什么谷歌要推送 AMP?

出于多种原因,Google 一直在推动 AMP 的采用。首先,AMP 改善了移动设备上的用户体验。使用 AMP 的网页加载速度更快,从而可以更轻松地快速访问所需的内容。更快的加载时间也会降低跳出率,这是谷歌的一个重要排名因素。其次,谷歌将AMP视为一种将用户留在网络上而不是在应用程序内的方式。最后,谷歌希望通过提供卓越的移动体验来保持领先于竞争对手。

AMP 如何影响 SEO?

AMP 对 SEO 有重大影响。使用 AMP 的网页会受到 Google 的优惠待遇。启用了 AMP 的网页更有可能在移动设备上的搜索结果中排名第一。如前所述,AMP 网页会显示在搜索结果顶部的轮播界面中。轮播界面中显示的网页比未界面界面中显示的网页获得的点击次数更多。

AMP对SEO的影响不仅限于移动设备。谷歌表示,AMP也是桌面搜索结果的一个排名因素。

如何在您的网站上实施 AMP

在您的网站上实施 AMP 非常简单。第一步是创建网页的 AMP 版本。您可以手动创建网页的 AMP 版本,也可以使用插件或扩展程序自动创建 AMP 版本。

创建网页的 AMP 版本后,您需要添加一些代码,告知 Google 在哪里可以找到 AMP 版本。为此,您可以在 HTML 代码的 head 部分添加 rel=“amphtml” 标记。此代码会告知 Google 在何处可以找到您网页的 AMP 版本。

为确保您的 AMP 网页符合 AMP 规范,您必须对其进行验证。您可以使用 AMP 验证工具(Google 提供的一种工具)来验证您的 AMP 网页。AMP 验证工具会检查您的网页是否存在错误,并提供有关如何修正这些错误的建议。

AMP 最佳实践

在您的网站上实施加速移动页面 (AMP) 时,您应该遵循一些最佳实践,以确保您的网页表现良好并提供良好的用户体验。以下是一些顶级 AMP 最佳做法。

  • 使用AMP缓存 - AMP缓存是一个内容分发网络,可将您的AMP页面缓存在Google的服务器上。使用 AMP 缓存可以显著提高 AMP 网页的性能。当用户点击指向您的 AMP 网页的链接时,AMP 缓存会提供缓存中的网页,从而加快加载过程。以下代码必须包含在 HTML 代码的头部才能使用 AMP 缓存:
<link rel="canonical" href="https://www.example.com/amp/page.html">
<link rel="amphtml" href="https://www.example.com/amp/page.html">

第一行代码告诉 Google 您网页的 AMP 版本是规范的,第二行代码告诉 Google 在哪里可以找到您网页的 AMP 版本。

  • 优化图像 - 图像可能是页面加载时间的重要来源。确保优化图像的大小和格式。使用图像压缩工具在不牺牲质量的情况下减小图像的文件大小。为每个图像使用正确的图像格式。例如,将 JPEG 用于照片,将 PNG 用于具有透明度的图像。
  • 使用 AMP Analytics - Google 提供 AMP Analytics,这是一项可让您监控 AMP 网站上用户活动的服务。使用 AMP 分析可以帮助您确定需要改进的领域,并优化网页以提高性能。以下代码必须包含在 HTML 代码的头部才能使用 AMP Analytics :
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

您还需要将以下代码添加到HTML代码的正文部分:

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json"> 
{
   "vars": {
      "account": "UA-XXXXXX-Y"
   },
   "triggers": {
      "trackPageview": {
         "on": "visible",
         "request": "pageview"
      }
   }
}
</script>
</amp-analytics>

将“UA-XXXXXX-Y”替换为您的 Google Analytics(分析)跟踪 ID。

  • 避免使用外部资源 - 外部资源(如 JavaScript 和 CSS 文件)可能会降低 AMP 网页的速度。请尽可能避免在 AMP 网页上使用外部资源。请改用 AMP 组件库,该库提供了可用于构建网页的预构建组件。如果需要外部资源,请使用异步加载来减少对页面加载时间的影响。
  • 使用结构化数据 - 使用结构化数据可以提高网页在搜索结果中的可见度。AMP 网页支持结构化数据,因此请将其添加到您的网页中。使用 AMP 版本的结构化数据标记,以确保与 AMP 兼容。您可以使用 Google 提供的结构化数据测试工具测试结构化数据。
  • 测试您的网页 - 在发布 AMP 网页之前,请对其进行全面测试。使用 AMP 验证工具和移动设备适合性测试等工具,确保您的网页符合 AMP 规范并提供良好的用户体验。AMP 验证工具会检查您的网页是否存在错误,并提供有关如何修正这些错误的建议。移动设备适合性测试会检查您的网页是否适合移动设备,并提供如何改进它们的建议。

通过遵循这些 AMP 最佳做法,您可以确保您的网页提供针对移动设备进行优化的快速加载、用户友好的体验。这有助于提高您网站的搜索引擎排名并增加用户参与度。

  • 使用正确的 HTML 语法 − 确保在创建 AMP 网页时使用正确的 HTML 语法。AMP 网页需要严格的 HTML 语法,因此错误可能会导致您的网页无法通过验证。使用 AMP HTML 样板代码确保您的网页使用正确的语法。
  • 使用 AMP 组件 - AMP 组件是预构建的 HTML 和 JavaScript 模块,可为您的 AMP 网页提供大量功能。这些组件针对 AMP 进行了优化,因此它们很轻巧,不会导致任何页面速度问题。一些常用的 AMP 组件包括 amp-img、amp-carousel 和 amp-video 组件。
  • 使用内联 CSS - 内联 CSS 有助于减少 AMP 网页上加载的外部资源数量。您可以通过将 CSS 代码直接包含在 HTML 文档中来避免需要外部 CSS 文件。但是,请尽可能减少 CSS 代码,以避免任何潜在的性能问题。
  • 使用正确的广告格式 - 如果您打算通过广告通过 AMP 网页获利,请使用与 AMP 兼容的广告格式。Google AdSense 是 AMP 网站最受欢迎的广告网络之一,因为它提供了多种适合 AMP 的广告类型。

请遵循 AMP 广告指南,确保您的广告不会对用户体验产生负面影响。

结论

总之,AMP 是一个强大的工具,可以提高移动页面的性能并提升您的 SEO。通过遵循 AMP 的最佳做法,您可以确保您的网页提供针对移动设备优化的快速、用户友好的体验。AMP 可以帮助您提高网站在搜索结果中的可见度,并提高用户参与度。如果您尚未实施 AMP,请考虑在您的网站上实施 AMP。

如果感觉这篇文章还不错的话可以点赞收藏,对这个还有疑问可以评论回复解答的哈,需要seo学习资料或者相关的面试题可以通过文末免费获取

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐