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日节日快乐!
都在折腾这个啊:)
@路杨 图新鲜呗~反正又不难。
@老头 WP 就是方便
@路杨 WP 在向哥们挥手~
@老头 用过,但是还是用不惯。习惯是个顽固的东西哦。
@路杨 这倒是大实话,有些东西习惯了就很难改变。
博客查询功能呢?想说挖财的确是最好用的,
@郑永 搜索在侧栏,侧栏隐藏了就没了。目前 MOZE 使用良好,暂时不换了,估计换也不会换挖财,功能太多。
@老头 可以搞出来啊,不是喜欢折腾嘛。。。 挖财是功能多,而且简单好用,尤其是后期,突然有一天需要某个功能,里面都有了,不至于到时候还要转移数据。我去试试moze看看怎么样。
@老头 目前找不到类似挖财这么好的功能,随手记才是太复杂的一种,界面不方便。
加速不加速的,我一直觉得变化不大!
哈哈,稍后折腾。
@灰常记忆 装插件,启用就好了。
@老头 嗯,现在还没法搞,但是插件已经上传了。
@灰常记忆 上传了开启就完事了。
上AMP插件之后,不添加什么代码,能用么?
@随望淡思 Google Analytics
@随望淡思 能用,添加统计代码只是为了方便分析。
厉害了,对google优化是有好处的,百度就呵呵~
@chencool 百度有类似的东西,叫 MIP。
打开一看,像是百度转码那种?
@不亦乐乎 个人感觉就是给移动端 Google 搜索提供一个极简的主题,然后 Google 就会根据这个极简主题提供的内容进行静态化缓存加速~
の
没看懂这是干嘛的。。
@牧羊人 Google 搜索一下,再看一下就懂了,哈哈。
typecho如何使用?没找到插件
@钛客志 typecho 还没有类似的插件,等插件出或者大神出教程咯。
会限制部分CSS以及部分JS,这点上面估计很多人不能接受了
@BanYuner 萝卜青菜各有所爱~
接受不了,辛辛苦苦整的效果别人看不到了
@木瓜园 对于移动端的 Google 搜索结果加速而已。
不错,也紧跟技术的潮流啊。至少方便能使用移动Google的用户。点赞。
@土木坛子 效果微乎其微,纯粹折腾了。另外,在 iOS 下的 Chrome 好像没有效果。
看到你们都用上了赶紧给自己也用上,不用不是人了。
@riverAi 不用不是人 —— 这倒不至于吧。