如何在WordPress 网站使用Google AMP 技术对网站加速

网站建设 服务器租用 1年前 (2017-07-08) 2999次浏览 0个评论 扫描二维码

以下是在WordPress 网站使用Google AMP 技术,提升页面开启速度教学!

如何在 WordPress 网站使用 Google AMP 技术对网站加速

Google 宣布推出一项全新技术 AMP(Accelerated Mobile Pages),大幅加快使用者在行动装置(例如手机、平板电脑)开启网站的速度,虽然 Google 表示这项技术并不会影响网站在搜寻引擎结果排名,但满足某些特定条件时,将有机会在其他区域优先显示。换句话说,Google AMP不一定适合所有网站使用,为避免不公平的情形发生,有或没有加入这项技术皆不影响 SEO,但有助于最佳化你的使用者体验和获得更多曝光。

Google AMP常被拿来和 Facebook Instant Articles 比较,两者本质上差不多,将现有内容套入技术框架,重新改写后在远端伺服器建立快取以提高载入速度。Google 也提到这项技术适合各种静态内容网页,例如新闻、食谱、电影列表、产品页面、评论、影片及网志,因此非常推荐WordPress网站使用。

如果你是使用WordPress架站,Automattic 已经和 Google 合作推出 AMP for WordPress 插件,并将专案开放原始码放上 GitHub ,只要简单安装启用即可为现有网志整合这项新技术;WordPress.com 使用者则从去年底开始支援 AMP,无须做其他设定。

在为网站加入AMP 技术后,Google 搜寻结果旁边会标示 AMP 闪电标志,使用者点击就会直接跳转到 AMP 网站。Google 表示开启速度会比原本还快四倍!近期台湾使用者已陆续看到相关网站出现于行动装置搜寻结果,或许可以自己做个实验看看。

我想站长们最想知道的就是目前趋势,以及追求最新技术来提供网站访客更快更好的阅读体验吧!以下我会就如何在你的WordPress 网站使用Google AMP 技术教学,不用花大钱也可以自己做网站最佳化。

加入Google AMP 技术,让访客秒开网页

1、开启WordPress控制台,点选「安装插件」后输入 AMP 进行搜寻,第一个搜寻结果就是官方版的 AMP 插件功能(请确认作者是否为 Automattic)。没问题的话点选「安装」即可远端将它下载、安装到你的网站。

如何在 WordPress 网站使用 Google AMP 技术对网站加速

2、在AMP for WordPress 插件启用后不会有任何新的设定页面,至少目前没有,自订选项只能透过函式来加入(稍后介绍)。

如何在 WordPress 网站使用 Google AMP 技术对网站加速

3、要如何确认你的 WordPress 网站已经支援Google AMP 呢?

开启任一篇文章,查看原始码里是否有<link rel=”amphtml”标签,这是告诉 Google 该页面的 AMP 网址,安装插件后才会产生,如果有的话,代表你的网站已经有AMP 页面

如何在 WordPress 网站使用 Google AMP 技术对网站加速

4、你也可以直接在文章页面的网址后方加上/amp/(如果你有使用固定网址),若维持预设的网址格式,就在网址后方加上?amp=1 即可看到网站的 AMP 效果,不过从电脑版感受不到它的速度有多快,还是要透过手机才行。

Google 已经提供一个测试 AMP 功能,以手机开启 https://g.co/ampdemo 即可。

如何在 WordPress 网站使用 Google AMP 技术对网站加速

5、因为 Google AMP 有非常严格的语法格式规范,任何错误都不会索引页面,因此要维持AMP 页面正确才行。还好AMP for WordPress插件会自动产生AMP 页面,排除可能的语法错误问题,不过最好还是手动检查一下。

要如何检查呢?最简单的方法是在AMP 页面网址后面加上#development=1,接着开启浏览器的开发者工具功能,切换到 Console 如果有出现 Powered by AMP 就表示正确。

如何在 WordPress 网站使用 Google AMP 技术对网站加速

另一个我偏好的测试方式是利用 AMP Project 提供的线上验证器「The AMP Validator」,将网址复制贴上、点选「VALIDATE」,如果测试结果为绿色的 PASS 就表示该页面没有存在任何的错误语法。

6、Google 需要一段时间才会开始为加速行动版网页建立索引,因此不会立即在 Google 搜寻结果出现,但透过 Google 网站管理者工具可以知道目前的索引及错误情形,可以的话尽量维持蓝色数量,减少有问题的 AMP 网页数,Google 也会显示相关的错误资讯及修正方法。

如何在 WordPress 网站使用 Google AMP 技术对网站加速

前面提过AMP for WordPress没有设定页面,因此功能都必须要透过程式码加入,其实方法并不会太难,从网路上就可以找到一些程式码范例。举例来说,如果想在 AMP 网页加上 Google Analytics 追踪代码,只要在现有的布景主题中开启 functions.php,加入以下:

add_filter( ‘amp_post_template_analytics’, ‘xyz_amp_add_custom_analytics’ );function xyz_amp_add_custom_analytics( $analytics ) { if ( ! is_array( $analytics ) ) { $analytics = array(); } // https://developers.google.com/analytics/devguides/collection/amp-analytics/ $analytics[‘xyz-googleanalytics’] = array( ‘type’ => ‘googleanalytics’, ‘attributes’ => array( // ‘data-credentials’ => ‘include’, ), ‘config_data’ => array( ‘vars’ => array( ‘account’ => “UA-XXXXX-Y” ), ‘triggers’ => array( ‘trackPageview’ => array( ‘on’ => ‘visible’, ‘request’ => ‘pageview’, ), ), ), ); return $analytics;}

view rawamp-for-wordpress-google-analytics-code.php hosted with ❤ by GitHub

记得把 UA-XXXXX-Y 改成你的 Google Analytics 使用的用户代号。

总结

以上就是在 WordPress 网站使用 Google AMP 技术提升行动装置使用者开启速度的教学,是不是非常容易呢?对 WordPress 来说,因为拥有庞大的使用族群及开发者,可以快速整合各项新技术,也算是跟其他平台很不一样的地方。


服务器租用(www.fuwuqizuyong.cc) , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明:如何在 WordPress 网站使用 Google AMP 技术对网站加速
服务器租用
喜欢 (2)
[]
分享 (0)
服务器租用
关于作者:
服务器租用专注为广大站长与网友朋友分享建站教程、SEO优化文章、网站模板资源、服务器软件(Web环境、建站程序)等,另外为大家推荐各种国内外服务器、香港服务器、虚拟主机、域名购买优惠信息与服务器相关知识。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到