WordPress 博客使用 AMP 移动加速的技术和技巧

早在去年2月份的时候 当时 Google 推出AMP技术的时候我就小试了一把, 可是当时并不是很理解 AMP技术的原理和格式规范, 在使用了同样的AMP WordPress 插件后在 Google Webmaster 后台显示了很多错误 结果就是AMP不被索引 于是我就删除了AMP插件.

这几天 受土木坛子的怂恿和无私的帮助, 我先是在我的小站(英文 CodingForSpeed.com)上试验和调试与不断调整, 总算解决了我能容忍AMP的底线, 就是: 简要的文章内容, 支持 Google Analytics 跟踪代码, 并且能在文章前后添加广告 (没广告收入我就没动力写文章).

AMP 在过去一年来成长许多, 开始越来越多的网站跟随这门新技术, 但实际上操作起来很简单, 到现在我都不需要理解和研究AMP的严格标签和语法, 就能把我好几个WP博客全用上了AMP 除了 畅购英伦代购网站 因为是电子商务网站 有动态的JS很重要 并不适合AMP.

AMP 到底是啥?

AMP 就是一种简化的HTML5, 有自己一套的标签, 并只能有一个内链CSS (不允许有外部CSS文件, 因为CSS是会阻碍浏览器渲染, blocking), 对同步的JS代码也有很大的限制, 好像只能放在 iframe 里, 总之 这一切的设计就是为了让AMP网页读得快 加载得快 显示更快.

为什么我们要关注 AMP?

速度! 为了在网络慢的地方 或者比较慢的手机上显示, 需要一个简化的AMP规范来提升用户体验. 而这是有代价的:

• 只显示重要的文章内容 而其它可有可无的小插件就不会被加载.
• AMP 内容会被Google 的CDN或者CloudFlare CDN 给预先缓存, 比如你在搜索的时候 显示搜索结果的时候 Google 已经把AMP的内容给下载下来放在本地缓存中, 等到你需要的时候直接加载渲染.
• AMP 的设计是手机友好的, 事实上AMP页面是静态布局, 不需要麻烦的CSS来灵活定义 viewpoint, AMP在加载的时候 智能设备就能先把局给布好了, 挖几个坑等着填文本 能不快么?

谁更需要 AMP?

如果你的网站主要是以内容为主, 包括很多静态文本, 则可以考虑使用AMP移动加速版本. 但是这不适合电子商务等需要很多 复杂JS 建成的用户交互界面.

AMP 会影响SEO分数么?

官方是说不会影响 (为了公平), 但是我认为准确的说是 不会直接影响 SEO分数排名. 但是由于 AMP 站点平均上3到4倍速度的提升 而页面加载速度会影响排名 所以实际上间接上是会有一点影响的.

前不久 在手机端搜索结果上 Google 移除了 “手机端友好” 主要就是为了给 AMP腾地. 实际上 AMP页面都是手机友好, 而反之则不是. 下图左边是AMP而右边是手机友好 (响应式设计 Responsive Design)

怎么样启用AMP对WP博客的支持?

AMP实际上就是一个模板, 因为和传统的HTML5标准差异较大, 所以在设计的时候 就分成两个不同的网址, 规范是AMP的页面网址在源网址后加上 /amp 或者 /amp/ 但理论上没有这个限制的.

其实您做的最重要的第一步就是 装上官方的AMP插件: the official AMP plugin.

开启插件后 每篇博文 (类别是 post, 其它页面 page 是没有的) 会自动有一个 /amp 的显示版本.

怎么知道AMP已经工作了?

• 您可以下载 CHROME浏览器插件 AMP Chrome Extension 这个插件会在合格的AMP页面显示一个绿色的闪电, 而在有AMP版本的主页面里也会有一个提示, 这时候点击图标就会自动转到AMP版本.
• 在CHROME浏览器里按F12调出控制台, 会显示以下 代表该页面已经启用AMP.

  Powered by AMP ⚡ HTML – Version 1490234009582 https://justyy.com/archives/4249/amp    cdn.ampproject.org/v0.js:394

• 直接访问网页工具 Web AMP Validator: 这种方法好处是可以直接在工具里调试AMP代码.
• 还可以用 curl 在命令行里验证:

  1 2	$ curl https://amp.cloudflare.com/q/justyy.com/archives/1279/amp {"version":"1488238516283","source":"http://justyy.com/archives/1279/amp","valid":true}

在谷歌 Web Master 控制台里可以看到 已经被索引的AMP页面数目及 遇到的一些问题 比如AMP格式有误. 并且提供了另一个 AMP validator.

怎么样加入GOOGLE ANALYTICS代码?

分两步:

1. 在 AMP 模板文件 wp-content/plugins/amp/templates/single.php 的 </head>前加入

   1	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

2. 同样的模板文件里 在 </body> 前加入:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <amp-analytics type="googleanalytics"> <script type="application/json"> {   "vars": {     "account": "UA-12341234-1" // 修改成您的GA   },   "triggers": {     "trackPageview": {       "on": "visible",       "request": "pageview"     }   } } </script> </amp-analytics>

怎么样在AMP页面里加入 ADSENSE 广告?

只需要更改少量的 Adsense 代码就可以了:

1. 类似的 修改 AMP 模板文件 wp-content/plugins/amp/templates/single.php 在 </head> 前加入

   1	<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

2. 并且根据需要在放广告的地方 比如 post_amp_content 里加入Adsense代码:

   1	<amp-ad layout="responsive" width=300 height=250 type="adsense" data-ad-client="ca-pub-123456" data-ad-slot="72341234"></amp-ad>

AMP显示文章的模板页面(含GOOGLE ANALYTICS和ADSENSE广告代码)

什么时候AMP才会被搜索引擎收录?

并不是所有搜索引擎都会懂您的AMP, 但是显然AMP之老爸Google是最懂的. 大概来说, 一到两天就会被陆陆续续的索引, 不要着急. 在非AMP页面里会有一行代码指向 AMP版本:

1

<link rel="amphtml" href="//helloacm.com/how-to-parallel-for-in-linux-bash-shell/amp/"/>

而在AMP里又会指回来, 所以搜索引擎不会认为是重复的内容.

1

<link rel="canonical" href="//helloacm.com/how-to-parallel-for-in-linux-bash-shell/"/>

我的理解是 AMP是越多越好, 但是有些页面没有也不会影响SEO分数, 甚至如果有些AMP不规范或者无效, 最差的情况就是不被搜索引擎索引AMP, 并不会带来很糟的副作用.

怎么样在PHP里判断该页面是AMP?

在WP的模板函数 functions.php 里最简单的方法就是判断该页面的URL是否末尾含有 /amp 或者 /amp/ 字符.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

if (!function_exists("endsWith")) {
  function endsWith($haystack, $needle) {
    return $needle === "" || (($temp = strlen($haystack) - strlen($needle)) >= 0 && strpos($haystack, $needle, $temp) !== FALSE);
  }
}
 
function is_amp() {
  return (endsWith($_SERVER['REQUEST_URI'], '/amp') || endsWith($_SERVER['REQUEST_URI'], '/amp/'));
}
 
if (!is_amp()) { // 只有在非AMP版本才会添加广告
  add_filter( 'the_content', 'add_content_ads' );
} 
 
function add_content_ads($content) {
   // 这里比如在前后添加广告
   $content .= " 广告代码";
   return $content;
}

您也许注意到现在博客会显示AMP地址, 所有的AMP文章都会在这里显示. 而页面是没有AMP版本的, 在页面调用AMP是会被301转向回正常页面. 您可以用以下方法来判断该页面的类型.

1
2
3

if ( get_post_type( get_the_ID() ) == 'post' ) {
  // 显示 AMP 的网址
}

是AMP就是另一个模板,不影响正常的模板 (是的 你可以同时有两个模板供用户选择) 最坏情况下 就是AMP格式有问题 不被搜索引擎收录而已 并不影响SEO. 还有就是文中原有的链接并不会改变 所以AMP的主要入口就是搜索引擎. 要改变文中的链接 可以考虑使用 CloudFlare 的AML(自动AMP链接跳转)

如果AMP页面有错误, 很有可能搜索引擎就不会收录它们(除非是较小的AMP错误, Minor Errors). 谷歌在搜索结果里会提示说有AMP错误 点击后则会导向到Google Webmaster站长控制台.

英文: WordPress 博客使用 AMP 移动加速的技术和技巧