沙唐桔

WordPress 博客开启 Google AMP 移动网页加速技术和技巧

Google AMP,简单来说就是给搜索引擎适配一个极简主题,尽可能少加载资源,实现 AMP 网页读得快,加载快,显示更快……

不得不说,Google 的响应速度还是挺快的。今天早上将近十点折腾完,晚上八点多的时候搜索已经看到有一篇广告的搜索结果打上了闪电符号+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 插件配置项添加统计代码。AMP >> Analytics >> 在 Type 中填入:googleanalytics ,在 JSON Configuration 填入以下代码:

{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}

注意:请把上述代码中 UA-XXXXX-Y 替换为自己在 Google Analytics 中相应的媒体资源跟踪 ID。

Google 官方文档:将 Google Analytics(分析)添加到 AMP 网页


可以同时添加多个统计代码,比如百度统计。添加百度统计代码如下:

{
  "vars": {
    "token": "你的token"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}

注意:请把上述代码中 你的token 替换为自己在百度统计中相应的媒体资源跟踪 ID。

百度统计官方文档:在 AMP 页面中添加百度统计

旧方法:▼展开

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日节日快乐!