当前位置:首页 > CMS教程 > WordPress > 列表

为WordPress设置和测试AMP功能:快速7步法指南

发布:smiling 来源: PHP粉丝网  添加日期:2018-12-17 10:04:56 浏览: 评论:0 

在当今以移动为中心的世界中,快速加载页面对于满足用户需求至关重要。不仅如此,缓慢的页面速度所带来的影响与整体收入的下降和页面被遗弃的增加有关。用户已经开始期待移动站点的加载速度和桌面版一样快。事实上,亚马逊是最大的在线零售商之一,它得出的结论是,即使是在页面加载速度上一秒钟的延迟,也会导致年收入减少1.6亿美元。

加速的移动页面(AMPs)正迅速成为如何构建快速加载页面的标准。使用预渲染,AMPs能够比标准移动页面的加载速度快15-80%,而不影响功能。虽然AMP实现的简易性取决于你的CMS(内容管理系统),但WordPress可以作为一个良好的测试环境去预览AMP页面的大概模样。

注意:本指南的部分假设您已经激活了Yoast 搜索引擎优化插件作为您的WordPress设置的一部分。如果你没有,你可以跳过引用这个插件的部分——你仍然可以在没有它的情况下激活AMP功能——但是如果你认真地为你的WordPress站点做搜索引擎优化,那么我强烈推荐这个插件。

步骤1:安装并激活你的AMP插件(s)

Automattic 的AMP插件被要求启动AMP功能。这是为了AMP工作需要用到的基本插件。

AMP插件会自动生成所有你的博文兼容的版本,您可以通过附加/放大器功能添加到你的博文URLs的末尾。例如:

注意,只有您的博文——而不是您的页面——才会与这个基本插件兼容。为了使您的页面能够兼容,您需要安装一个额外的插件(详细说明)。

一旦您安装了AMP插件,您就可以添加额外的插件以获得更大的功能。有几个免费的选项供您选择,但我在本指南中使用的是如下:

AMP-加速移动页面-这个插件的显著特点包括Google AdSense集成,rel=canonical标签支持,AMP拖放页面生成器,以及创建AMP内容的能力,这些内容与标准移动页面上的内容不同。

使用这个插件的好处之一是它允许你制作网页、文章和媒体兼容的内容。Yoast插件的 The Glue也可以无缝地确保默认的AMP插件在正确的元数据中拉出。类似于WP插件的AMP功能,它支持AMP页面的定制样式,您甚至可以选择一个定制图标,改变您的网站的logo在AMP页面上的样子。(注意:您必须安装并激活了Yoast 搜索引擎优化插件,这样才能让插件运行。)

第二步:建立 Google Analytics

为了将你的页面设置为Google Analytics跟踪,您首先需要找到您的跟踪ID,登录到Google Analytics,然后点击左下角的齿轮图标来打开管理面板。一旦您从各自的下拉菜单中选择了帐户和属性,点击属性列中的“跟踪信息”。然后,点击“跟踪代码”来查看您的跟踪ID——ID应该从UA开始。

复制您的跟踪ID,然后登录到WordPress。在左边的导航栏中,您可以使用AMP功能分析并粘贴您的跟踪ID,在这里输入“Google Analytics”。然后单击Save更改。

步骤3:配置插件设置

在这一步中,我将讨论在步骤1中提到的Yoast 搜索引擎优化插件的一些基本配置。如果您选择不安装这个插件,您可以跳过这一步。

这里推荐的配置将允许您定制加速移动页面的外观和感觉,并支持对多种内容类型的AMP支持。

首先,使用Yoast 搜索引擎优化 》 AMP 》 博文 TypesPost。在这里,您可以选择哪些博文类型应该能够兼容AMPamp。

在第二个选项卡上,“设计”,您可以定制您的AMP激活页面的外观和感觉。应用CSS样式,定制内容和链接颜色,上传一个定制的AMP图标,并为没有与它们相关联的图像设置一个默认的图像。

步骤4:测试/验证AMP设置

既然我们已经创建了AMP URLs,那么确保它们正常工作是很重要的。如果没有正确配置,谷歌将不会在搜索结果中显示它们。虽然这可以防止您展示一个半功能的AMP页面,但它也可能是许多网站管理员的伤心之处。

幸运的是,有几个测试您的AMP URLs的解决方案。选择几个关键页面,并使用下面的方法测试AMP版本。正如第1步中提到的,您可以附加/amp/附加到标准URL的末尾以查看它。

方法1:AMP测试

在这里删除您的URL并单击“Run Test”,然后注意结果(有效/无效)。

方法2:开发人员控制台

这个选项特别针对那些使用谷歌Chrome浏览器的用户。如果您使用另一个浏览器(Firefox、Safari、Microsoft Edge或其他浏览器),那么这个方法并不适用于您。

打开Chrome Dev Tools Console(在Chrome菜单中,选择更多的工具,然后点击“控制台”选项卡)并检查确认错误。

如果一切进行地顺利,那么验证就应该是成功的。

方法3:AMP验证器

将AMP URL粘贴到“URL”字段中,然后单击“验证器”。

该工具将会突出显示任何错误,并在HTML中标记它们。

注意:您还可以使用AMP Validator Chrome扩展来查看AMP URL本身的相同结果。

步骤5:为索引提交最重要的AMP URLs

如果在Google Search Console上使用AMP测试,您可以在运行测试并验证页面之后点击“提交到谷歌”按钮。

或者,如果您登录到您的Google Search Console账户,您可以搜索“提交到谷歌”,并直接在谷歌搜索结果中提交网址:

虽然将AMP页面提交给谷歌并不是一项要求,但如果它是在内部链接或在XML站点地图中列出的,那么谷歌只会索引AMP页面。

在搜索界面下,点击加速移动页面。

在这里,您将能够看到您的加速移动页面中有多少正在被索引,如果有的话,这些页面有一些关键问题。如果您识别出有问题的页面,您可以使用前面步骤中的工具进行故障排除。

第七步:测试页面速度

一旦您完成了上面的工作,现在是时候看看努力有什么结果了。通过像WebPageTest这样的页面速度工具来运行你的AMP和标准移动页面,并比较结果:

开始使用AMP !

随着谷歌加大力度推出移动为先的索引和页面速度,以成为移动排名的重要因素,在移动流量受到冲击之前,利用AMP功能变得更加重要。按照上面的步骤,您应该能够快速轻松地为WordPress站点启用AMP页面。

Tags: WordPress测试 AMP功能

分享到: