露从今夜白,月是故乡明。

Google AMP 为 WordPress 博客移动网页的加载提速

Google AMP 为 WordPress 博客移动网页的加载提速

事实上谷歌很早前就发布了这项新的技术,推出了 AMP (Accelerated Mobile Pages),从名字就能看出是针对移动网页推出的新技术,我也曾在 Google Search Console 里面注意到 Google AMP 这个东西,但是因为我并没有编程之类的知识储备,所以简单看了一下官方文档就放弃了。这项技术号称可以把网页的移动版加载速度提升 4 倍!所以最终我还是决定要试试接触一下。

开启方法

前几天偶然的机会,搜索到了一款 WordPress 插件,还是官方出品的(作者 Automattic ),可以帮你自动生成一个符合谷歌规范的移动网页。

AMP 插件

或者在博客后台插件里搜索 AMP 安装就行了。目前这款插件没有设置界面,所以只要安装后开启就行了。但是怎么确认插件有没有生效呢?很简单:只要在文章页面的网址后面加上 /amp/ 再访问就可以看到新布局的网页(在电脑上同样可以用此方法浏览到效果)。或者查看网页源码中有没有 <link rel="amphtml" 标签。

一切搞定后(就装个插件也没啥要搞定的),就等着过些日子 Google 搜索引擎来检索了。当然你也可以去 Google Search Console 后台手动提交,不过我想你应该不会那么无聊……

手动提交索引

需要注意的是,Google 对 AMP 的语法规范要求十分严格,任何的错误都会导致其不予索引。不过这次直接用的官方插件,所以出错的几率不大,若是不放心还是可以手动检测一下的。检测的方法有两种:

  1. 在 AMP 页面地址后面加上 #development=1 ,然后开启浏览器的调试功能,切换到 Console 标签,若能看到 Powered by AMP 就表示正确;
  2. 利用 AMP Project 提供的网站 The AMP Validator 将网址贴过去,点 VALIDATE ,PASS 了就行了。

可以看出这个网页能被识别出,至于下面的两条错误好像是跟那个脚本地址有关系,毕竟是墙外的东西,不太懂……不晓得影不影响索引,要以观后效了。

利用  The AMP Validator 检测的倒是通过了。

开启 AMP 后的网页效果

下面来看一看文章网页 AMP 版本的呈现效果:

AMP 结果呈现

可以看出,开启 AMP 的网页在移动网页上会有一个小闪电和 “AMP” 字样的标识,打开之后(加载很快,几乎瞬间打开),页面十分简洁,仅保留了主要信息(其实相当于某些浏览器的阅读模式),顶部会显示该网页源站,点一下那个小小的链接标识还会弹出该网页的源网址。页脚也仅保留了关键信息。作为对比,下面是该网页的移动版原版样式:

网页移动版原网页

默认的 AMP 插件样板主题焦点色是蓝色, WordPress 的那个蓝色,可能是因为是该插件是 WordPress 官方开发的插件吧。可以通过编辑插件简单地修改一下主题色和在页脚添加必要的信息,下篇再讲。(出来了,《 Google AMP 插件编辑:修改主题色和页脚》)

最后要说明的是,据说该功能并不会影响到 SEO 的质量——只是为了让你的网页更好地呈现在移动端,尤其在恶劣网络环境下提升加载速度。目前应该仅在 Google 搜索结果页才会呈现这个,不过因为看到了效果,所以今后我在移动端分享链接也决定要加一个 /amp 的尾巴了。此外,类似的技术还有百度的 MIP ( Mobile Instant Page – 移动网页加速器)、微博的头条文章、 Facebook Instant Articles 等。如果不喜欢用插件,你可以参考谷歌官方开发文档来手动修改。


回到顶部
myself

发表评论

电子邮件地址不会被公开。 必填项已用*标注