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

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/498/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

使用 rclone 将 Google Drive 文件同步至 OneDrive

前几天上了博友「灵尘居」的 Office 365 车,1T OneDrive 到手,手机照片一直喂 Google AI,挺方便的,以前还会同步一份到家里的垃圾西数 NAS,不过并不太自动,后来就懒得弄了。 Google 虽然是大厂,但是数据只有一份,还是怕怕,多一个备份不是坏事。苹果 iCloud 不错,但是贼贵,况且我只有一个…
浏览: 31 标签:  ,  ,  ,  , 

尼康 D7100 中文使用说明书 高清 PDF 电子版免费下载

尼康 D7100 说明书是一份介绍详细尼康 D7100 单反官方教程,推荐购买了 D7100 单反博友下载保存参考,以便随时查看一些常用按键操作和使用技巧。 尼康 D7100 简介 尼康 D7100 搭载先进的对象捕捉性能和成像性能,能够忠实还原拍摄细节。高密度的 51 点自动对焦系统准确捕捉目标对象并进行跟踪,…

全网热门公共 BitTorrent Tracker 列表合集 加速BT下载

BT 下载速度取决于其他下载同一资源的用户上传速度。做种「指上传文件数据给其他 BT 用户的行为」用户越多,你的下载速度越快!如果资源没人提供上传,就会完全没有下载速度,而做种用户靠 Peer、DHT、Tracker 获得。 Tracker 是什么? BT 下载的文件都是其他用户上传给你的。 BT 下载速度…

换域名?改固定链接?

去年底注册了个短域名,虽然非主流,但是胜在够短,两字母,还没有溢价。一直寻思着把它转移到 Cloudflare,换到博客使用,无奈 Google Adsense 一直没能折腾审核通过。 WordPress 修改固定链接? 以前听说 postname 更有利于 SEO,曾经试过人工翻译。后来嫌麻烦,干脆只用 /%post_id%/,后面 .…
浏览: 53 标签:  ,  ,  , 
浏览: 88 标签:  ,  ,  ,  , 

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楼
  10. 沙唐桔-BanYuner
    BanYuner

    会限制部分CSS以及部分JS,这点上面估计很多人不能接受了

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

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

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

    2017.05.20 13:27 # 回复
    13楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息