什么是 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/
2024-08-31 更新
AI 大模型取代搜索引擎的时代，是时候取消博客网站的 AMP MIP 支持了
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式