Amp on 土木坛子

开启Google AMP后网站访问量增加不少

Fri, 31 Mar 2017 08:00:02 +0800

之前提到土木坛子网站采用AMP移动页面加载优化技术主要是为了SEO搜索引擎优化效果。现在过去一周了，从网站流量统计的结果来看，AMP确实达到了这个效果，采用AMP以来10天的网站总体流量相比之前10天增加了68%，移动页面加载时间大幅缩短，并且桌面搜索跟着移动搜索都有相似的增长幅度（55% vs 72%），Google Search Console后台统计显示的搜索点击量也明显上升。

除了有两天流量可能贡献了68%的显著增幅（也就是说可能与AMP关系不大），但即使其它的8天，平均流量也比之前增加了约25%。主要原因是移动Google搜索时，AMP页面使用了预加载技术，搜索出来再点击进去AMP页面，从而以异常快的速度真正秒开网页，使得用户更加可能浏览这样的页面，而Google正希望出现这样的效果，从而优先给出AMP搜索页面结果——而目前采用AMP的网站并不多，浏览的人越多，Google进一步会认为是优秀内容，从而进入良性正向循环。

这就是技术所带来的红利，为别人节省时间就是节省金钱。天下武功，唯快不破，网络世界也一样。我的网站本身速度虽然已经非常快，但对于首次访问用户来说，由于各种原因，在手机上加载速度还是不够快，而通过Google搜索从而加载AMP网页则刚好解决了这个问题。

我觉得对于大部分网站来说，没有理由不采用AMP技术，它纯粹是一个加分项，对原来的内容没有任何影响。即使在国内无法使用Google，也不会造成任何负面影响——最多相当于AMP页面不存在。一个好的网站，它必定会有使用Google的用户，那么采用AMP技术就会大大方便使用移动Google的用户。

AMP技术令我感到振奋，很长时间以来没有碰到过令人兴奋的网页技术了。很高兴Google依然能给我带来惊喜。完全可以尝试设置AMP支持，WordPress网站只需要添加AMP插件再添加Analytics统计即可，说不定也能大幅增加你的网站流量，使得你的声音传播到更远，传播到更多人的手中。

顺便提一句，技术所带来的方便往往超乎我们的想象，比如这篇文章的主要文字是我用语音输入完成。十年前，我觉得语音输入简直不可思议，但现在通过软件和云计算，完全能够识别出我的语音，输入速度比我五笔输入还是要快得多，前提是你要接受并习惯新技术。

AMP移动加速页面添加Google AdSense广告代码的设置方法

Thu, 23 Mar 2017 08:00:59 +0800

赖博主以前不愿意使用Google AMP加速网站，说因为不方便添加AdSense广告。其实通过WordPress官方AMP插件实现的AMP网页很容易就添加AdSense广告。方法和添加AMP Google Analytics是一样的，只需要添加相应的JS库AMP格式的AdSense广告单元即可。

具体方法如下：

1 在WordPress控制后台的AMP插件的amp/templates/single.php文件里/head之前添加以下JavaScript代码：

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

2 接下来在amp/templates/single.php文件里，对应文章中需要出现广告位置的地方添加AdSense单元，注意AdSense广告单元需要是AMP格式：

以下代码是自适应尺寸广告，建议放在文章标题下（非首屏Below the fold），如下图所示（注意data-ad-client和data-ad-slot的值换成你自己的ID）：

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

下面的代码是首屏（Above the fold）自适应尺寸广告，建议放在文章标题之上：

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

OK，WordPress官方插件AMP下的AdSense广告设置就是如此简单。

我感觉AMP页面下的AdSense广告又干净、整洁、快速，和内容也浑然一体，估计点击率应该会高一些。

AMP移动加速页面添加Google Analytics统计代码的设置方法

Wed, 22 Mar 2017 08:00:08 +0800

网站支持AMP移动网页加速加载技术后，从Google搜索移动端进入相应页面，加载速度确实如闪电般快捷，页面如出水芙蓉般清爽。

对于WordPress博客而言，如果是通过官方AMP插件实现AMP加速，该插件并不自带Google Analytics统计服务，因为官方AMP插件就相当于另一套主题。因此需要用户自己添加Analyitics代码，才能实现统计服务。

根据Google的官方总体说明，对于WordPress的官方AMP插件，Analytics代码添加方法如下（其它插件或者网站程序和此原理一样）：

1 在WordPress控制后台的AMP插件的amp/templates/single.php文件里，将以下代码添加到/head标签之前。

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

添加通用JavaScript文件

2 然后再将以下代码（注意，此段统计代码不同于Analytics以前的代码，同时请将UA-XXXXX-Y替换成你自己的ID），放到amp/templates/single.php文件里的/body标签之前：

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

添加统计代码

至此，大功靠成。

从此AMP页面也会将访问统计发到你的Google Analyitcs里面，支持实时统计。需要分析AMP页面访问时候，可以通过AMP字段过滤出相关统计页面。

启用Google AMP移动网页加速显示技术

Tue, 21 Mar 2017 08:00:45 +0800

早前关注过AMP移动加速显示优化技术（加速移动页面Accelerated Mobile Page）（百度有类似MIP，Facebook有Instant Article），尤其是在Google移动搜索里搜索新闻时候，经常见到排在前面的结果会有AMP闪电符号，打开这种结果网页也是异常地快速与简洁。

2016年8月，Google宣布AMP移动搜索结果将适用于所有网站（Google取消了移动友好页面的Mobile Friendly标志就是为了给AMP标志让路）。百度、搜狗、雅虎日本最近也宣布支持收录AMP网页，表明此技术应用越来越广泛。大势所趋，土木坛子现在也开始使用AMP技术来加速移动端加载速度。

只需在WordPress后台安装官方AMP插件（不建议安装第三方的插件，插件的中文翻译支持参考该文章），开启插件即可——不需要任何设置。对于非移动端，直接在每篇文章页面链接的最后加上AMP就可以看到AMP显示效果。也可以使用Chrome的AMP插件来检查页面上可能的HTML语法错误。

配置好AMP后，之后等待Google爬虫来索引就可以了——也可以手工去Google Webmaster后台提交。我的网站在开启AMP后24小时不到，就可以看到Google已经开始在移动端提供部分搜索结果的AMP（需要在Google手机移动端点击，平板和PC桌面Google都不行）网页了。

AMP本质技术原理其实就是一个简洁版并内置CSS的HTML静态网页（AMP HTML），禁止掉第三方JavaScript而只用少量特定版本的AMP JavaScript，再加上从Google移动搜索结果里面出来的AMP网页全部都由Google全球CDN网络提供Cache高速缓存（AMP Cache），因此在手机上的网页加载速度，即使在移动网络下，也确实达到了异常之快，闪电秒加载，有效提高访客用户体验。

采用AMP技术的网站加载速度比全站CDN还要快，Google在搜索结果里就开始预加载AMP页面，而且AMP页面本身的元素也已经极度精简。通过Google手机端搜索进入本文后页面的域名都直接变成Google, 比如本文的链接变成：

https://www.google.com/amp/s/tumutanzi.com/archives/15640/amp

使用Google AMP技术的网页本身支持Google Analytics统计，也支持显示AdSense广告。但这种简洁页面的并不是没有代价和缺点：去除了除内容之外的所有其它功能，包括各种JavaScript代码，它甚至可能会有小问题——这项开源技术还在发展中，它的设计目的也不是为了适合所有类型的网站（但非常适合新闻类和博客类等含有静态内容的网站）。这也是有些互动内容较多的网站不愿意使用的原因。

其实我的网站本身足够简洁，对手机的响应式显示也很友好，并且我也用了CloudFlare的CDN加速服务，因此，Google AMP带来移动端的加载速度提升本身并不会太明显。我使用AMP更主要的原因是因为这项技术是Google推出，为了获取AMP下更好的Google搜索排名优点（SEO），启用它应该利大于弊。

由于是Google主推的开源服务，所以国内无法看到Google提供的AMP网页，因为在中国大陆无法使用Google搜索。而我的网站主要的访客都是从Google搜索过来，移动搜索所占比重也越来越多，为了更好的服务这些访客——节省他们的时间，开启Google AMP服务支持也无可厚非。而且，增加AMP支持原来不影响网站原来的任何东西，纯粹加分项。

长期来看，AMP可能只是一个历史过渡期的产物，将来的移动网速只会越来越快，硬件性能也越来越好，网页加载速度也自然跟着提升。不过在目前，我觉得启用AMP还算是拥抱新技术。一万年太久，只争朝夕。