2016年11月Google就宣布开始向移动优先索引（Mobile-First Index）迁移，移动页面SEO优化的重要性大大上升。网页打开速度对用户体验影响非常大，AMP（加速移动页面）应运而生。本文结合项目实战经验，深入解读AMP的操作和效果。如果您所涉及的业务有“出海”需求的话，不妨尝试一下 AMP。
目录：
- 什么是AMP
- 实施AMP的好处
- 如何实施AMP
- AMP实施案例
- 常用平台AMP插件汇总
一． 什么是AMP
AMP（Accelerated Mobile Pages）是Google推出的一个开源项目，旨在加快移动设备上网页的加载速度，从而极大地提升用户体验。AMP目前主要针对的群体是提供静态内容的网站，如博客、新闻等。这类网站交互少，对JS依赖也少，也比较适合做缓存。知名的CMS平台WordPress已经支持AMP网页，通过简单的设置就可以开发自己的AMP页面。
二． 实施AMP的好处
实施AMP带来的好处很多，这也促使欧美各大媒体如BBC, CNN, 纽约时报等纷纷开始实施AMP。具体优势如下：
1.提高移动页面加载速度，优化移动端用户体验，移动端网站表现好也会提升桌面端Google SEO排名。
2.如果移动端富摘要搜索结果中展示的是AMP网页，那么用户点击该富摘要进入网页时会直接定位到文中对应的位置，并且这些内容会突出展示。
3.从Google的搜索结果里进入AMP网页可以做到预加载甚至预渲染，让用户更快到达着陆页。
4.Google AMP Cache能够让我们充分借助Google免费的 CDN，用于缓存页面。内部已经做过DNS预热的网站，如果能有Google全球CDN支持就会如虎添翼。
5.AMP页面的URL前面会带有⚡图标。
三． 如何实施AMP
AMP项目开发对页面有不少要求，比如（不限于）：
- 为了避免 JavaScript 延缓页面渲染，AMP页面不能包含自己编写的JavaScript。
- CSS都必须内联，以减少HTTP的请求，并且有50KB的大小限制。
- AMP 页面允许第三方 JavaScript，但仅限在沙盒环境下的 iframe 中。
- 用户几乎可以使用所有原生的HTML标签，但是对img、video等会产生外部资源依赖的标签，只能使用amp-img，amp-video自定义标签。
因此，页面上所有交互逻辑都必须通过CSS实现，无法依赖JavaScript。尽管JS丰富了页面，但复杂的交互会拖慢页面加载速度。以下是AMP页面的开发步骤：
（一）开发环境
Google 提供了一个在线编辑的开发环境：https://ampbyexample.com/playground/ 该IDE界面十分简洁，左侧是AMP HTML开发环境，右侧可以选择不同设备，直观地看到AMP页面调试结果。
（二）检验网页是否符合AMP规范
通过书写 <html ⚡>或<html amp>标识当前页面类型为 AMP 页面。开发完成后，当 Google 搜索引擎抓取该页面时， 会校验当前页面是否符合AMP规范， 只有符合规范才会被Google 收录，并添加到 Google AMP Cache。在Chrome中安装AMP Validator插件，当你的页面是完全符合AMP规范的时候，Chrome AMP Validator按钮会呈现绿色。如下图：
（三）发布前设置
当页面通过Chrome AMP Validator验证后，需要在link中配置amphtml和canonical标签。
有时一个页面可能对应两个版本， AMP 版本和 PC 版本。
非 AMP 页面需要指向 AMP 页面：
AMP 页面需要指向 PC 页面：
有时网页只有一个版本，且该版本是AMP页面，则仍要为其添加canonical标签，并指向其自身。
至此，AMP页面开发工作基本完成，可以发布了。
四． AMP实施案例
- Wego.com
Wego.com是一家第三方旅行门户网站，帮助用户以优惠的价格预订机票或酒店，占有中东和亚太地区最大的旅游市场。在这些地区经常存在网速慢、网络不稳定或手机内存低的情况，移动端加载速度优化显得尤为重要。实施AMP页面之后，Wego.com打开速度从原来的11秒多减少到不足1秒，进入合作伙伴网站的转化率提升了95%，广告点击率从原来的0.75%增长到2.55%。
- Renovation Brands
Renovation Brands是一家500强电商，主营家居装饰产品。注重用户优先的网站体验。该网站让所有页面采用了AMP版本，每个页面开发时间只用了大约30分钟。新的AMP页面使会话时长提高了27%，跳出率降低30%，加载速度提高一倍，转化率提升了75%。
- Greenweez
Greenweez是一家法国的有机食品零售商，他们只做线上销售。一开始他们的移动端页面加载速度超过10秒，转移到AMP页面后，加载速度提高一倍，移动端转化率提高80%，CPA降低66%。
五． 常用平台AMP插件汇总
- WordPress
用户可以在WordPress官网下载AMP免费插件AMPforWP，点击https://wordpress.org/plugins/accelerated-mobile-pages/ 进行下载。这里也提供了扩展程序。也可以直接在WordPress后台搜索AMP插件进行安装。该插件同时兼容Yoast，Genesis和其他SEO插件，在AMP页面上也可以轻松实现SEO优化。
另一个可以在WordPress上使用的插件是Google自己开发的AMP，也可以同过后台搜索找到。
- Shopify
用户可以在Shopify app store里下载安装AMP应用：https://apps.shopify.com/amp-google，轻松自定义AMP页面。
- Magento
Magento与Wompmobile合作开发了一个基础AMP模板，针对Magento2.0以上的版本，使用有效的AMP标记来展示产品页面。这个模板目前还不能匹配整个网站的主题，只能展示一些基本的产品信息。这个模板是开源的，可以点击https://github.com/wompmobile/Magento-Module-AmpProductExample 获得该模板。
