如何在 5 分钟内使用插件实现 AMP 你的 WordPress 网站
Posted: Sat Feb 01, 2025 5:42 am
如果您想提高移动搜索流量、转化率和排名，页面速度是一个巨大的因素。
因为显示速度慢是致命的。如果您的页面加载时间超过 3 秒，40% 的人将放弃您的网站。
所以，这次我将讲解如何在WordPress中实现AMP，使移动页面显示速度更快。使用插件可以快速轻松地实现。
什么是 AMP（加速移动页面）？
AMP（Accelerated Mobile Pages）是一个旨在加速移动页面显示的开源项目。
谷歌在与全球内容提供商和技术公司讨论后， 巴林电子消费者电子费者电子邮件列表表 于 2015 年 10 月宣布了加速移动页面 (AMP) 开源项目。该项目旨在大幅改善移动网络的外观。我们希望包含视频、动画和精美图形的网页能够立即加载，同时与智能广告完美共存。
谷歌之所以大力推广 AMP，是因为谷歌在移动设备上的搜索已经超过了在计算机上的搜索。
移动数据
这意味着，谷歌要想继续从其搜索服务中获利，就必须满足移动用户的需求，也就是让移动页面快速加载。
AMP 的好处
AMP最大的好处就是移动页面的快速显示。据谷歌称，AMP 页面可以将加载时间减少 15%-85%。
页面速度与页面浏览量、转化率和搜索排名密切相关。数据显示，移动页面加载时间延迟 1 秒就会导致转化率下降 3.5%、页面浏览量下降 9.4%、跳出率上升 8.3%。
加载时间如何影响您的网站
换句话说，更快的页面加载时间可以增加页面浏览量和转化率，并降低跳出率。更多的转化意味着您的利润更多。
简单想想吧。 （最终）
提高了移动页面速度。
页面加载时放弃浏览的移动用户越来越少。
用户页面浏览量将会增加。
页面浏览量的增加会降低跳出率。
Google 对跳出率的降低和用户体验的改善表示赞赏。
提高您的移动搜索排名。
只要简单了解一下更快的页面加载速度的影响，AMP 页面的排名高于非 AMP 页面就不足为奇了。
更新：在AMP Conf 2018上，我们宣布了 AMP 的当前良好状态。
AMP 页面花费的时间是其他页面的两倍
AMP 使转化量翻倍
此外，AMP 还提供许多其他好处：
1. 头条新闻轮播展示
使用结构化数据标记的新闻相关 AMP 页面可能会在移动搜索期间出现在顶部新闻部分的 AMP 轮播中。更不用说它给发布它的新闻网站带来的流量增加。
头条新闻
2. 使用 AMP 标志进行申诉
从 2016 年 10 月开始，Google 开始在支持 AMP 的页面的移动搜索结果中显示 AMP 标签。
AMP 标签
通过在常规搜索结果中显示AMP标志，可以吸引想要快速获取信息的移动用户的注意力，有望提高点击率和重复流量。事实上，《华盛顿邮报》在采用 AMP 后，每周重复用户数量增加了 23%。
3. 未来排名因素
AMP 还不是排名因素。然而，它几乎肯定会成为未来移动搜索的排名因素。如果您的网站在采用移动友好更新方面进展缓慢并遭受了后果，请不要犯同样的错误。
4.增加广告收入
在AMP页面上，您可以使用AMP广告（A4A），它可以让您快速展示广告。正如您在下面的演示中看到的，首屏广告立即可见，这对广告商和发布商来说都是双赢的。
AMP 广告
如何使用插件在 WordPress 网站上实现 AMP
这是我们开始将其付诸实践的地方。以下是在 5 分钟内将你的 WordPress 网站 AMP 化的步骤：
安装并激活 AMP 插件。
检查启用 AMP 的页面的外观。
安装并激活 Glue for Yoast SEO & AMP 插件。
使用 Glue for Yoast SEO 和 AMP 设置自定义 AMP 页面的设计。
在 Glue for Yoast SEO 和 AMP 设置中设置 Google Analytics 跟踪代码。
在本教程中，我们将使用“AMP”“Yoast SEO 和 AMP 的粘合剂”我使用两个插件：
[更新]：由于 AMP 插件的更新，不再需要 Glue for Yoast SEO & AMP 插件。因此，Glue for Yoast SEO & AMP 插件的开发和更新已经结束。
请注意，我们不会在本文中使用“ Facebook Instant Articles & Google AMP Pages by PageFrog ”，因为它的错误率往往很高，而很多解释 WordPress AMP 转换的内容都使用了这两个工具。
因此，作为替代插件，我们将使用 Glue for Yoast SEO & AMP，它更简单且不容易出错。这是流行的 SEO 工具 Yoast SEO 插件的附加组件，因此您可以继承 Yoast SEO 元数据等。
安装并激活 AMP 插件
首先，安装并激活AMP插件。
AMP 插件
这就是这个插件的全部内容。一旦启用，页面将以 AMP HTML 形式生成，因此请检查它是否正确显示。
将 amp/ 添加到博客文章 URL 的末尾。例如，如果文章 URL 是：
https://moukegaku.com/mobile-seo-infographics/
AMP 页面的 URL 如下所示：
https://moukegaku.com/mobile-seo-infographics/amp/
AMP 示例页面
接下来，将 #development=1 添加到 AMP 页面 URL 末尾，以确保它是一个有效的 AMP 页面。
https://moukegaku.com/mobile-seo-infogr ... elopment=1
然后，单击下面的按钮来显示开发人员工具。 （适用于谷歌浏览器）
Windows：Ctrl + Shift + I
Mac：Cmd + Opt + I
在开发者工具里选择【Console】，如果看到如下图所示的“AMP验证成功”的提示，则表示一切正常。
AMP 验证成功
如果您没有看到“AMP 验证成功”消息，而是看到红色错误，则表示 Google 不会将您的网页识别为 AMP 网页。
如果您无法确定错误的原因并解决它，您应该推迟 AMP 转换或咨询专家。 （无论如何，AMP任务将在5分钟内失败。）
安装并激活 Yoast SEO 和 AMP 的 Glue
[更新]：由于AMP插件的更新，不再需要安装Glue for Yoast SEO & AMP插件。跳至如何设置 Google Analytics。
安装并激活 Glue for Yoast SEO & AMP 以自定义 AMP 页面的设计并安装 Google Analytics 跟踪代码。 （如果您尚未安装 Yoast SEO，请点击此处。）
Yoast SEO 和 AMP 胶水
接下来，点击 WordPress 左侧菜单中“SEO”下的“AMP”。
Yoast SEO 菜单
首先，在[帖子类型]菜单中，您可以选择要 AMP 的内容类型。需要 AMP 化的 [帖子] 已被默认选中，因此无需更改任何设置。
帖子类型
接下来，[设计]。此菜单允许您自定义 AMP 页面的设计。 （AMP 页面具有简单的页面结构，删除了不必要的元素以最大限度地提高页面速度。）
设计设置
图片
AMP 图标：设置图标图像
默认图片：如果文章没有图片，则设置默认图片。
内容颜色
AMP 标题颜色：网站标题颜色
标题颜色：博客标题颜色
文字颜色：文字颜色
发布元信息颜色：作者、日期等的颜色。
链接
文字颜色：链接文字颜色
悬停颜色：鼠标悬停时链接文字的颜色
下划线：是否为链接文本添加下划线
引用
文字颜色：引文文字颜色
背景颜色：引文的背景颜色
边框颜色：报价行颜色
额外的 CSS/额外的代码：你想直接写的 CSS 或代码
除图标图像和默认图像外，默认设置就可以了。
Google Analytics 设置
在最后的[分析]菜单中，你可以设置Google Analytics跟踪代码来测量和分析AMP页面。设置 Google Analytics 跟踪代码时需要注意以下两点。
在 Google Analytics 中创建一个新属性来跟踪您的 AMP 页面。
跟踪代码以 JSON 编写。
首先，在 Google Analytics 中为 AMP 创建一个属性，以分别衡量 AMP 页面和现有页面。在Google Analytics 中，点击“分析设置”、“属性”和“创建新属性”。
创建新属性
为其指定一个属性名称，明确表明它适用于 AMP，然后输入所需的信息。
设置属性
点击【获取跟踪ID】会生成跟踪ID，复制即可。
追踪编号
现在您就可以开始了。
返回 Glue for Yoast SEO & AMP 的 [分析] 设置页面，然后将以下代码复制并粘贴到 [分析代码] 字段中。
因为显示速度慢是致命的。如果您的页面加载时间超过 3 秒，40% 的人将放弃您的网站。
所以，这次我将讲解如何在WordPress中实现AMP，使移动页面显示速度更快。使用插件可以快速轻松地实现。
什么是 AMP（加速移动页面）？
AMP（Accelerated Mobile Pages）是一个旨在加速移动页面显示的开源项目。
谷歌在与全球内容提供商和技术公司讨论后， 巴林电子消费者电子费者电子邮件列表表 于 2015 年 10 月宣布了加速移动页面 (AMP) 开源项目。该项目旨在大幅改善移动网络的外观。我们希望包含视频、动画和精美图形的网页能够立即加载，同时与智能广告完美共存。
谷歌之所以大力推广 AMP，是因为谷歌在移动设备上的搜索已经超过了在计算机上的搜索。
移动数据
这意味着，谷歌要想继续从其搜索服务中获利，就必须满足移动用户的需求，也就是让移动页面快速加载。
AMP 的好处
AMP最大的好处就是移动页面的快速显示。据谷歌称，AMP 页面可以将加载时间减少 15%-85%。
页面速度与页面浏览量、转化率和搜索排名密切相关。数据显示，移动页面加载时间延迟 1 秒就会导致转化率下降 3.5%、页面浏览量下降 9.4%、跳出率上升 8.3%。
加载时间如何影响您的网站
换句话说，更快的页面加载时间可以增加页面浏览量和转化率，并降低跳出率。更多的转化意味着您的利润更多。
简单想想吧。 （最终）
提高了移动页面速度。
页面加载时放弃浏览的移动用户越来越少。
用户页面浏览量将会增加。
页面浏览量的增加会降低跳出率。
Google 对跳出率的降低和用户体验的改善表示赞赏。
提高您的移动搜索排名。
只要简单了解一下更快的页面加载速度的影响，AMP 页面的排名高于非 AMP 页面就不足为奇了。
更新：在AMP Conf 2018上，我们宣布了 AMP 的当前良好状态。
AMP 页面花费的时间是其他页面的两倍
AMP 使转化量翻倍
此外，AMP 还提供许多其他好处：
1. 头条新闻轮播展示
使用结构化数据标记的新闻相关 AMP 页面可能会在移动搜索期间出现在顶部新闻部分的 AMP 轮播中。更不用说它给发布它的新闻网站带来的流量增加。
头条新闻
2. 使用 AMP 标志进行申诉
从 2016 年 10 月开始，Google 开始在支持 AMP 的页面的移动搜索结果中显示 AMP 标签。
AMP 标签
通过在常规搜索结果中显示AMP标志，可以吸引想要快速获取信息的移动用户的注意力，有望提高点击率和重复流量。事实上，《华盛顿邮报》在采用 AMP 后，每周重复用户数量增加了 23%。
3. 未来排名因素
AMP 还不是排名因素。然而，它几乎肯定会成为未来移动搜索的排名因素。如果您的网站在采用移动友好更新方面进展缓慢并遭受了后果，请不要犯同样的错误。
4.增加广告收入
在AMP页面上，您可以使用AMP广告（A4A），它可以让您快速展示广告。正如您在下面的演示中看到的，首屏广告立即可见，这对广告商和发布商来说都是双赢的。
AMP 广告
如何使用插件在 WordPress 网站上实现 AMP
这是我们开始将其付诸实践的地方。以下是在 5 分钟内将你的 WordPress 网站 AMP 化的步骤：
安装并激活 AMP 插件。
检查启用 AMP 的页面的外观。
安装并激活 Glue for Yoast SEO & AMP 插件。
使用 Glue for Yoast SEO 和 AMP 设置自定义 AMP 页面的设计。
在 Glue for Yoast SEO 和 AMP 设置中设置 Google Analytics 跟踪代码。
在本教程中，我们将使用“AMP”“Yoast SEO 和 AMP 的粘合剂”我使用两个插件：
[更新]：由于 AMP 插件的更新，不再需要 Glue for Yoast SEO & AMP 插件。因此，Glue for Yoast SEO & AMP 插件的开发和更新已经结束。
请注意，我们不会在本文中使用“ Facebook Instant Articles & Google AMP Pages by PageFrog ”，因为它的错误率往往很高，而很多解释 WordPress AMP 转换的内容都使用了这两个工具。
因此，作为替代插件，我们将使用 Glue for Yoast SEO & AMP，它更简单且不容易出错。这是流行的 SEO 工具 Yoast SEO 插件的附加组件，因此您可以继承 Yoast SEO 元数据等。
安装并激活 AMP 插件
首先，安装并激活AMP插件。
AMP 插件
这就是这个插件的全部内容。一旦启用，页面将以 AMP HTML 形式生成，因此请检查它是否正确显示。
将 amp/ 添加到博客文章 URL 的末尾。例如，如果文章 URL 是：
https://moukegaku.com/mobile-seo-infographics/
AMP 页面的 URL 如下所示：
https://moukegaku.com/mobile-seo-infographics/amp/
AMP 示例页面
接下来，将 #development=1 添加到 AMP 页面 URL 末尾，以确保它是一个有效的 AMP 页面。
https://moukegaku.com/mobile-seo-infogr ... elopment=1
然后，单击下面的按钮来显示开发人员工具。 （适用于谷歌浏览器）
Windows：Ctrl + Shift + I
Mac：Cmd + Opt + I
在开发者工具里选择【Console】，如果看到如下图所示的“AMP验证成功”的提示，则表示一切正常。
AMP 验证成功
如果您没有看到“AMP 验证成功”消息，而是看到红色错误，则表示 Google 不会将您的网页识别为 AMP 网页。
如果您无法确定错误的原因并解决它，您应该推迟 AMP 转换或咨询专家。 （无论如何，AMP任务将在5分钟内失败。）
安装并激活 Yoast SEO 和 AMP 的 Glue
[更新]：由于AMP插件的更新，不再需要安装Glue for Yoast SEO & AMP插件。跳至如何设置 Google Analytics。
安装并激活 Glue for Yoast SEO & AMP 以自定义 AMP 页面的设计并安装 Google Analytics 跟踪代码。 （如果您尚未安装 Yoast SEO，请点击此处。）
Yoast SEO 和 AMP 胶水
接下来，点击 WordPress 左侧菜单中“SEO”下的“AMP”。
Yoast SEO 菜单
首先，在[帖子类型]菜单中，您可以选择要 AMP 的内容类型。需要 AMP 化的 [帖子] 已被默认选中，因此无需更改任何设置。
帖子类型
接下来，[设计]。此菜单允许您自定义 AMP 页面的设计。 （AMP 页面具有简单的页面结构，删除了不必要的元素以最大限度地提高页面速度。）
设计设置
图片
AMP 图标：设置图标图像
默认图片：如果文章没有图片，则设置默认图片。
内容颜色
AMP 标题颜色：网站标题颜色
标题颜色：博客标题颜色
文字颜色：文字颜色
发布元信息颜色：作者、日期等的颜色。
链接
文字颜色：链接文字颜色
悬停颜色：鼠标悬停时链接文字的颜色
下划线：是否为链接文本添加下划线
引用
文字颜色：引文文字颜色
背景颜色：引文的背景颜色
边框颜色：报价行颜色
额外的 CSS/额外的代码：你想直接写的 CSS 或代码
除图标图像和默认图像外，默认设置就可以了。
Google Analytics 设置
在最后的[分析]菜单中，你可以设置Google Analytics跟踪代码来测量和分析AMP页面。设置 Google Analytics 跟踪代码时需要注意以下两点。
在 Google Analytics 中创建一个新属性来跟踪您的 AMP 页面。
跟踪代码以 JSON 编写。
首先，在 Google Analytics 中为 AMP 创建一个属性，以分别衡量 AMP 页面和现有页面。在Google Analytics 中，点击“分析设置”、“属性”和“创建新属性”。
创建新属性
为其指定一个属性名称，明确表明它适用于 AMP，然后输入所需的信息。
设置属性
点击【获取跟踪ID】会生成跟踪ID，复制即可。
追踪编号
现在您就可以开始了。
返回 Glue for Yoast SEO & AMP 的 [分析] 设置页面，然后将以下代码复制并粘贴到 [分析代码] 字段中。