开启 Google AMP 移动网页加速

Google AMP,对于我这小博,开不开不会有太大的区别,所以纯粹是过过折腾瘾了。

不得不说,Google 的响应速度还是挺快的。今天早上将近十点折腾完,晚上八点多的时候搜索已经看到有一篇广告的搜索结果打上了闪电符号+AMP 了。

 498-amp-banwagong

下面简单记录一下折腾要点,方法摘自土木坛子 AMP 系列文章,适用于 WordPress 搭建的博客/网站。

安装 AMP 插件

直接后台搜索安装就可以了,ftp 上传也可以。我装的是 Automattic 出品的 AMP 插件,官方地址:https://wordpress.org/plugins/amp/

启用插件,然后随便打开一个页面,地址后加上 ?amp=1 就能看到 AMP 插件是否已经生效了。比如本文链接:https://cyhour.com/498/,预览 AMP 版本链接就是:https://cyhour.com/498/?amp=1。直接链接后加 amp 也可以预览到,比如:https://cyhour.com/498/amp

添加 Google Analytics 统计代码

amp 页面是不会加载常规页面的统计代码的,必须手工修改 amp 插件的模板文件把统计代码添加进去。要添加两个代码:

1、打开 AMP 插件目录下的 amp/templates/single.php 文件,将以下代码添加到/head标签之前。

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

2、将以下代码放到 amp/templates/single.php 文件里的 /body 标签之前。

注意:请将 UA-4444-Y 替换成你自己的 ID。

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

自定义 amp 页面样式和显示内容

修改方法于 WordPress 主题差不多,amp 模板文件在 amp/templates/ 目录下,按需修改即可。


4月1日节日快乐!

支付宝扫码打赏微信打赏

如果文章对您有帮助,欢迎移至上方按钮打赏老杨

声明: 除非注明,常阳时光文章均为原创,转载请以链接形式标明本文地址
本文地址:https://cyhour.com/498/

Comments:34

  1. 都在折腾这个啊:)

    2017.04.01 23:20 # 回复
    1楼
  2. 博客查询功能呢?想说挖财的确是最好用的,

    2017.04.02 12:37 # 回复
    2楼
    • @郑永 搜索在侧栏,侧栏隐藏了就没了。目前 MOZE 使用良好,暂时不换了,估计换也不会换挖财,功能太多。

      2017.04.02 14:44 # 回复
      • @老杨 可以搞出来啊,不是喜欢折腾嘛。。。 挖财是功能多,而且简单好用,尤其是后期,突然有一天需要某个功能,里面都有了,不至于到时候还要转移数据。我去试试moze看看怎么样。

        2017.04.03 02:03 # 回复
      • @老杨 目前找不到类似挖财这么好的功能,随手记才是太复杂的一种,界面不方便。

        2017.04.03 02:07 # 回复
  3. 加速不加速的,我一直觉得变化不大!

    2017.04.02 17:34 # 回复
    3楼
  4. 哈哈,稍后折腾。

    2017.04.02 19:06 # 回复
    4楼
  5. 上AMP插件之后,不添加什么代码,能用么?

    2017.04.02 19:28 # 回复
    5楼
  6. 厉害了,对google优化是有好处的,百度就呵呵~

    2017.04.03 01:44 # 回复
    6楼
  7. 打开一看,像是百度转码那种?

    2017.04.05 09:55 # 回复
    7楼
    • @不亦乐乎 个人感觉就是给移动端 Google 搜索提供一个极简的主题,然后 Google 就会根据这个极简主题提供的内容进行静态化缓存加速~

      2017.04.05 14:12 # 回复
  8. 没看懂这是干嘛的。。

    2017.04.06 10:06 # 回复
    8楼
  9. typecho如何使用?没找到插件

    2017.04.06 20:58 # 回复
    9楼
    • @钛客志 typecho 还没有类似的插件,等插件出或者大神出教程咯。

      2017.04.07 10:01 # 回复
  10. 会限制部分CSS以及部分JS,这点上面估计很多人不能接受了

    2017.04.11 12:09 # 回复
    10楼
  11. 接受不了,辛辛苦苦整的效果别人看不到了

    2017.04.12 23:45 # 回复
    11楼
  12. 不错,也紧跟技术的潮流啊。至少方便能使用移动Google的用户。点赞。

    2017.05.09 01:09 # 回复
    12楼
    • @土木坛子 效果微乎其微,纯粹折腾了。另外,在 iOS 下的 Chrome 好像没有效果。

      2017.05.09 08:05 # 回复
  13. 看到你们都用上了赶紧给自己也用上,不用不是人了。

    2017.05.20 13:27 # 回复
    13楼

发表留言