HTML 转 AMP 实践参考

ampproject.org

(Accelerated Mobile Pages)是谷歌近年推出的,
一项专门针对移动设备快速加载页面的技术。
近期的项目中已经开始试用,
于是把目前从 经验稍微整理下,以作参考。
以下的内容适用于已经基本了解 概念,
开始进入实践阶段的 coder。

【AMP 资料】
1、官网:https://www.ampproject.org/
2、范例:https://ampbyexample.com/
3、社区:https://github.com/ampproject
4、检测:https://search.google.com/test/amp

【图片转换】
1、<img> 替换为 <amp-img>
2、所有图片需指明高宽
3、响应式图片增加 layout="responsive"
4、因 amp 实现方式,对父级容器的定位可能需要事后调整

整理】
1、除了字体,全部样式需直接插入页头的 <style amp-custom>
2、不能使用 !important,不能使用各类 hack
3、动画效果仅限 opacity/transform(支持 gpu 加速的属性)
(transition/animation/keyframe)
4、精简并压缩(https://cssminifier.com/https://www.cleancss.com/css-minify/

【常用交互】
1、滑出侧栏:https://ampbyexample.com/components/amp-sidebar/
2、收缩区块:https://ampbyexample.com/components/amp-accordion/
3、图片轮播:https://ampbyexample.com/components/amp-carousel/
4、图片放大:https://ampbyexample.com/components/amp-image-lightbox/
5、图文遮罩:https://ampbyexample.com/components/amp-lightbox/

【跟踪分析】
1、ga:https://developers.google.cn/analytics/devguides/collection/amp-analytics/
2、gtag:(似乎已失效,最终使用的是 amp-pixel)
https://juliencoquet.com/en/2017/01/27/tracking-amp-pages-with-google-analytics-and-tag-manager-2/
https://www.conversioner.com/blog/google-analytics-amp-website-google-tag-manager
3、bing:https://www.ampproject.org/docs/reference/components/amp-pixel

【调试发布】
1、地址后添加 #development=1 进入调试模式/校验
2、head 中 canonical 指向普通版网址,普通版网址通过 amphtml 指向 amp 页面。
3、添加“结构化数据/schema”(https://www.ampproject.org/docs/tutorials/create/basic_markup
4、通过在线测试后加入谷歌索引

发表评论

电子邮件地址不会被公开。 必填项已用*标注