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 获得该模板。