如何在您的网站上实施 AMP 并获得超音速加载速度

您可能希望实施 AMP 以提高页面速度。 这就是为什么

快速加载的网站是可有可无的。 人类的注意力呈螺旋式下降——没有人愿意等待，尤其是当他们在移动设备上时。

我们需要多快？ Google 建议页面加载时间少于两秒。

SEO的页面和技术领域有许多流行的措施可以帮助您实现目标。

但是，其中一项措施——为网站的移动版本设置加速移动页面(AMP)——被谨慎使用。

为什么？ 简而言之，使用 AMP 需要相当多的时间、精力和资金，具体取决于网站的规模。 最后，它甚至可能不值得。

您是否值得投资 AMP？ 如果答案是肯定的，这篇文章将帮助您一步一步地为您的 WordPress 网站有效地设置 AMP。

实施 AMP 第 1 步：选择正确的插件

插件选项

WordPress 为 AMP 提供了许多插件。 我已经在不同程度上尝试了其中一些并取得了成功。 其中有一段时间在 Google Pagespeed Insights 中给出了惊人的结果。 但它破坏了我在移动设备上的所有 AMP 页面！

我的推荐

我会推荐 AMP for WP – Accelerated Mobile Pages – WordPress 插件。 这个插件提供了很多自定义移动网页的选项。 这篇文章的其余部分将介绍使用此插件为您的网站设置 AMP。

安装并激活插件后，WordPress 仪表板将显示打开网站 AMP 版本的选项。 您还将看到下图中突出显示的新插件 (AMP)。

如上图所示，您将看到一组选项，我们将逐个介绍它们。

让我们进入设置。

实施 AMP 第 2 步：插件的基本设置

网站类型

选择最能代表您的业务的选项。 如果没有其他匹配项，请选择“其他” ，之后您将可以选择输入您的网站类型。

您需要在哪里实施 AMP？

选择您要实施 AMP 的位置。 当您选择 AMP 时，您决定让您的移动网页几乎完全是 HTML。 您需要放弃降低加载速度的 CSS/JS 代码。

不利的一面是，用户体验 (UX) 会受到影响。 例如，您不能再有一个可以旋转以吸引访问者注意力的号召性用语 (CTA) 按钮。 AMP 会删除该代码，从而节省页面加载时间。 这可能最终导致参与率降低。

在上面的列表中，您可能希望选择在您的页面或帖子上安装 AMP，或两者兼而有之。

设计和展示

在这里，您可以设置您的徽标，建议尺寸为 120 x 90 像素。 我建议不要使用徽标，因为它会增加页面加载时间。 如果此面板上未更新徽标，则 AMP 页面将仅使用网站名称代替徽标。

全局颜色方案选项将帮助您为 AMP 页面选择一种颜色，该颜色显示在页面上的 CTA 链接和页脚链接上。

例如，我选择浅蓝色作为全局颜色，如下图所示。

分析跟踪

在此选项面板中，您可以启用用于跟踪的工具。 例如，您可以通过添加跟踪 ID 来启用 Google Analytics。 这样，来自 AMP 页面的数据将直接在您的 Google Analytics（分析）帐户中更新。

同样，您可以添加上图中列出的多个其他跟踪工具。

隐私设置

Cookie 通知栏使您能够就您在网站上使用的 cookie 征求访问者的同意。 在下图中，黑色的对话框是一个 cookie 通知栏。

图片来源 - Monster Insights

如果您或您的受众群体来自 GDPR 国家/地区，您需要打开GDPR – 通用数据保护条例的设置。

请注意，如果必须选择，您只能选择两个选项之一，不能同时选择两者。

广告

在此部分中，选择您想要放置广告的位置。 您可以根据需要进行自定义——您可以在全站范围内或在单个帖子上发布广告，或者在其他选项中发布标题。

您可以从 Adsense 广告代码中选择广告类型、广告尺寸以及数据广告客户端和数据广告位。

第三方兼容性

最后一个实体捕获您需要 AMP 兼容性的插件列表。

Gravity Form 和 Elementor for AMP 要求您为扩展付费。 结构化数据、WP 的广告和 WP 的 PWA 是免费插件。 最后三个将在后面的帖子中更详细地介绍。

实施 AMP 第 3 步：更多 AMP 设置

通用设置

常规选项卡涵盖了我们在基本设置中介绍的选项。 此外，您可以选择是否要在档案、类别和标签页面上使用 AMP。

启用最后一个选项 - AMP Takeover (Beta) - 将使您的桌面版和移动版相同。 这意味着，您的桌面版本也将包含 AMP 页面。

我建议关闭此选项。 页面加载在桌面上通常比在移动设备上更好。 在桌面上安装 AMP 意味着以用户体验为代价换取页面速度的小幅提升。 不好讨价还价。

广告

此部分与基本设置中的广告部分具有相同的选项。

搜索引擎优化

如果您选择开启Meta Description ，您在Head Section中填写的文字将被 Google 提取。 这将不同于您为桌面版本填写的文本。 我建议保持设置关闭，并在两个版本之间保持元描述一致。

OpenGraph 元数据标签是控制在社交媒体上共享 URL 时如何显示的代码片段。 当您在 SEO 插件中设置标题和元数据时，此部分对桌面版本可见。 以下是 Yoast SEO 插件的示例。

您可以通过转到任何帖子或页面的编辑器部分找到它，滚动到底部。 看到 Yoast 部分后，单击“社交”选项卡，然后您可以选择首选的社交媒体平台。

AMP 插件允许您在同一选项面板上选择首选的 SEO 插件。 在上面的示例中，Yoast 是选择的插件。 您在桌面版 Yoast 中输入的所有数据都会复制到 AMP 版本中。

您将看到删除分页索​​引和URL 检查工具兼容性的选项。

分页页面应该被索引，但只能作为规范。 我建议关闭此设置。

URL 检查工具兼容性为您提供更透明的搜索。 它在您的 Google Search Console 帐户中提供有关抓取、索引和服务信息的详细报告。 我建议保持打开状态。

元素支持

AMPforWP PageBuilder的选项将允许您为 AMP 版本构建单独的页面，这与桌面版本不同。 当您希望 AMP 页面的文本或 CTA 略有不同时，它很有用。

例如，如果您有一个“联系我们”的桌面 CTA，但您希望移动访问者给您打电话，您可以激活此选项并创建一个单独的页面。

PWA

根据 AMP for WP Plugin 的描述——渐进式 Web 应用程序 (PWA) 将您的网站转换为 Web 应用程序，并为访问者提供类似原生移动应用程序的体验。

这是一种设计增强。 激活模块是一个选择问题。

表现

性能面板深入研究页面速度优化。

它使您能够在不影响用户体验或功能的情况下缩小CSS/JS 以减少带宽使用。 利用浏览器缓存使您能够加快回访者的加载时间。 我建议保持这两个选项都打开。

启用优化 CSS将触发优化 CSS 的摇树特性。 如果您没有其他插件已经完成这项工作，您可以保持打开状态。

分析、结构化数据、通知栏和 GDPR

这些部分的选项与基本设置中的选项相同。

推送通知

如果您想设置推送通知，您可以选择OneSignal、iZooto 和 Truepush 之一。

在上面的示例中，我选择了 OneSignal。 但是，对于任何选择，您都会看到一个输入 APP ID 的部分，这是一个为 Pages 启用推送通知的选项。 此外，您需要选择要放置通知的位置（例如页面底部）以及要显示的文本。

联系表格

这使您可以选择 3 个插件中的一个来优化 AMP - Contact Form 7、Gravity Forms 和 Ninja Forms。

这三个都要求您支付延期费用。 如果您的 CTA 主要集中在表单上，​​那么投资扩展是明智的。

注释

此屏幕可让您选择希望用户生成的评论在您的网站上显示的位置。 您还可以选择显示评论的来源。

选择最适合您的设置。

即时文章

Instant Articles 是 Facebook 应用程序上面向移动用户的一项功能，可让您托管您的网站文章。

与在您的网站上拥有相同的文章相比，启用此功能的好处是加载时间更快。 由于文章在应用程序中加载，您的加载速度最高可提高 10 倍。

但是，由于内容保留在 Facebook 上，您可能会失去一些网站流量。 这是页面速度和网站流量之间的权衡。 我会建议保持关闭。

如果您选择保持打开状态，您将看到以下设置。

输入您的 Facebook 主页 ID 后，您可以自定义文章设置。 一个需要更多解释的设置是——Crawler Ingestion 。

当您网站上托管的文章链接在 Facebook 上共享时，Facebook 爬虫会查找ia:markup_url标签。 如果存在，Facebook 会提取您的文章并在您的 Facebook 页面上创建一篇即时文章。

工具

单个 AMP 页面选项可让您选择是否要默认显示 AMP 页面。 当您选择Show by Default时，您的所有页面都将显示 AMP 版本。 但是，您可以选择隐藏单个帖子或页面的 AMP。

为此，请转到任何页面并单击Edit Page 。 在右侧的“设置”选项卡中，您可以找到将其关闭的选项。

同样，您可以选择隐藏所选类别和帖子的 AMP 版本。

Query Monitor是 WordPress 的开发者工具面板。 如果您是开发人员，需要查看页面上的查询，则应保持该设置处于开启状态。

高级设置

高级设置选项面板有许多设置，其中大部分是不言自明的。

我建议保持默认设置打开，除非您是 WP 开发人员或聘请了专家来设计您的网站。

电子商务

如果您拥有在线商店，则可以为WooCommerce自定义您的 AMP 版本。 如果您主要销售数字资产，则可以打开Easy Digital Downloads Support选项。 这两个选项都要求您启用付费扩展。

翻译小组

此面板使您可以选择将一组常用单词正确翻译成您选择的语言。

例如，您需要输入适合您的受众的“查看非 AMP 版本”的翻译。

对于多语言翻译，您可以打开翻译的使用 POT 文件方法。 POT（Portable Object Template）文件是 PO 文件的模板。 它们是包含翻译的纯文本文件。 每种语言都有自己的文件扩展名。 例如法语有 po.fr。

实施 AMP 第 4 步：设计

主题

就像您网站的桌面版本一样，您可以为 AMP 版本选择主题。

有四个免费选项可供选择。

• 迅速
• 设计一
• 设计二
• 并且，设计三

此外，每个页面和帖子都有一个部分，可让您创建自己的设计。

这是您如何找到它的方法。 转到页面或帖子，然后单击顶部工具栏中的“编辑页面”。 向下滚动以查看以下屏幕。

如果您选择Use Builder复选框，将显示您创建的模板，否则将显示您选择的免费模板。

如果您正在构建自己的模板，则可以选择以下模块。

请记住，AMP 基本上是一个 HTML 页面。 您无法获得太多自定义或花哨的按钮。

请注意：您必须选择一个主题。 该插件需要它来选择图标和结构——即使您创建自己的设计也是如此。 在实施 AMP 时，您可以在此步骤中了解更多详细信息。

全球的

此选项面板可让您自定义 AMP 版本。

您可以按照上述选择颜色。 此外，您可以选择Google 字体。 但是，我建议将其关闭，因为 Google 字体会增加加载时间，从而违背了 AMP 的目的。

此外，如果您希望网页看起来像这样，您可以选择保持侧边栏和无限滚动。 但是，从页面速度的角度来看，您应该将其关闭。

字体图标库将与您在设计面板开始时选择的主题相同。

标题

标题选项面板让您决定标题的布局以及导航菜单的外观。

它还允许您添加立即呼叫按钮。 对于移动用户来说，这是一个有用的按钮。

您可以选择在标题中显示您的非 AMP 链接。 但是，如果您的受众在技术上不以 SEO 为导向，他们可能不会点击该链接。

您还可以启用搜索栏。 如果您有一个博客网站，这将是有益的。

高级标题选项使您可以更具体地使用标题部分设置。 这是一个选择问题。 但是，请记住不要添加到代码中，因为它会对页面加载速度产生负面影响。

主页、单页、页脚、页面、社交分享、日期和其他

这些选项面板，就像标题一样，完全是设计选择的问题。 您可以选择最适合您的任何设置。

加起来

上述步骤将帮助您在您的网站上有效地实施 AMP。 保存更改后，查看手机上的 AMP 版本，或者在 URL 后附加“/amp” 。

下图捕捉了您的 AMP 页面的功能。

AMG 页面视觉

页脚

你有它。 按照以下步骤实施 AMP，并为手机访问者在 2 秒内加载无错误、超快的页面。