谷歌 AMP 改造

更新日期: 2018-03-22 阅读次数: 15177 分类: SEO

什么是 AMP

AMP 是 Accelerated Mobile Pages 的缩写,即加速的移动端网页。由 Google 发起。跟百度的 MIP 是同一路技术。

为什么要进行 AMP 改造

目前我的网站流量来源分布

  • 六成来自百度
  • 二成来自 Google
  • 二成来自其他渠道

最近一周进行了百度 MIP & 熊掌号改造之后,虽然时间不长,但是效果显著,网站流量短时间内就有了 20% 的稳定增长,我预计下周会更明显。

那另外一个流量来源大头,Google 搜索就不能忽视了,所以我决定再来一次 AMP 改造。

时间成本应该不高,当时百度 MIP 改造只用了周六一个晚上不到两个小时的时间。那 AMP 改造应该就更快了。

再者,国内的搜索引擎也认可并兼容 AMP,目前已知的是百度是支持 AMP 的。

AMP 网页与原有 PC 网页如何并存

查一下,AMP 是否可以像 MIP 一样,指定 PC 网页对应的 AMP 网页。反之亦然。

果然有对应的设置,看了 AMP 的文档,感觉 MIP 的文档很大一部分是抄袭自 AMP 。。。

PC 网页中设置 AMP 网页地址
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

AMP 网页中设置 PC 网页
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

TODO List

  • (Done) AMP base layout blade
  • (Done) amphtml link tag
  • (Done) new image tag
  • (Done) Google Ad
  • (Done) 创建一个测试页
  • (Done) route
  • (Done) robots 屏蔽百度爬虫爬取 AMP 网页
  • (Done) link
  • (Done) ld+json

本地 debug AMP 页面的方法

参考

https://www.ampproject.org/docs/fundamentals/converting/building-page

链接后面缀上 #development=1 即可,打开 Chrome Console 会到验证信息。

Powered by AMP ⚡ HTML – Version 1521658019509 http://localhost:8000/amp/mysql-table-engine#development=1
global-shortcut.js:10 Uncaught TypeError: Cannot read property 'hasAttribute' of null at global-shortcut.js:10

validator.js:861 AMP validation had errors: amp$validator$Terminal.error @ validator.js:861
(anonymous) @ validator.js:881
validator.js:861 http://localhost:8000/amp/mysql-table-engine:130:3 The tag 'mip-img' is disallowed.

amp-img 的处理

The mandatory attribute 'height' is missing in tag 'amp-img'

参考 https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/#fixed-height-layout-with-correct-aspect-ratios 的解决方案

感觉 amp-img 有点过于严格了,不指定高度还不行,非常反感。

在 AMP 页面中添加百度统计

https://tongji.baidu.com/web/help/article?id=268&type=0&castk=26a6bpk771ddca7d2d922

没有数据,最终还是改成了 Google 分析的代码。

AMP 在线校验工具

https://validator.ampproject.org/

AMP 在线校验工具

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式