结合项目实战解读AMP

2016年11月Google就宣布开始向移动优先索引(Mobile-First Index)迁移,移动页面SEO优化的重要性大大上升。网页打开速度对用户体验影响非常大,AMP(加速移动页面)应运而生。本文结合项目实战经验,深入解读AMP的操作和效果。如果您所涉及的业务有“出海”需求的话,不妨尝试一下 AMP。

目录:

  1. 什么是AMP
  2. 实施AMP的好处
  3. 如何实施AMP
  4. AMP实施案例
  5. 常用平台AMP插件汇总

一. 什么是AMP

AMP(Accelerated Mobile Pages)是Google推出的一个开源项目,旨在加快移动设备上网页的加载速度,从而极大地提升用户体验。AMP目前主要针对的群体是提供静态内容的网站,如博客、新闻等。这类网站交互少,对JS依赖也少,也比较适合做缓存。知名的CMS平台WordPress已经支持AMP网页,通过简单的设置就可以开发自己的AMP页面。

二. 实施AMP的好处

实施AMP带来的好处很多,这也促使欧美各大媒体如BBC, CNN, 纽约时报等纷纷开始实施AMP。具体优势如下:

1.提高移动页面加载速度,优化移动端用户体验,移动端网站表现好也会提升桌面端Google SEO排名。

2.如果移动端富摘要搜索结果中展示的是AMP网页,那么用户点击该富摘要进入网页时会直接定位到文中对应的位置,并且这些内容会突出展示。

highlight display amp3.从Google的搜索结果里进入AMP网页可以做到预加载甚至预渲染,让用户更快到达着陆页。

4.Google AMP Cache能够让我们充分借助Google免费的 CDN,用于缓存页面。内部已经做过DNS预热的网站,如果能有Google全球CDN支持就会如虎添翼。

5.AMP页面的URL前面会带有⚡图标。

amp page mark

三. 如何实施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 page development environment

(二)检验网页是否符合AMP规范

通过书写 <html ⚡>或<html amp>标识当前页面类型为 AMP 页面。开发完成后,当 Google 搜索引擎抓取该页面时, 会校验当前页面是否符合AMP规范, 只有符合规范才会被Google 收录,并添加到 Google AMP Cache。在Chrome中安装AMP Validator插件,当你的页面是完全符合AMP规范的时候,Chrome AMP Validator按钮会呈现绿色。如下图:

amp validator

(三)发布前设置

当页面通过Chrome AMP Validator验证后,需要在link中配置amphtml和canonical标签。

有时一个页面可能对应两个版本, AMP 版本和 PC 版本。

非 AMP 页面需要指向 AMP 页面:

amphtml tag

AMP 页面需要指向 PC 页面:

canonical

有时网页只有一个版本,且该版本是AMP页面,则仍要为其添加canonical标签,并指向其自身。

caononical amp

至此,AMP页面开发工作基本完成,可以发布了。

四. AMP实施案例

  1. Wego.com

Wego.com是一家第三方旅行门户网站,帮助用户以优惠的价格预订机票或酒店,占有中东和亚太地区最大的旅游市场。在这些地区经常存在网速慢、网络不稳定或手机内存低的情况,移动端加载速度优化显得尤为重要。实施AMP页面之后,Wego.com打开速度从原来的11秒多减少到不足1秒,进入合作伙伴网站的转化率提升了95%,广告点击率从原来的0.75%增长到2.55%。

wego_frame1

  1. Renovation Brands

Renovation Brands是一家500强电商,主营家居装饰产品。注重用户优先的网站体验。该网站让所有页面采用了AMP版本,每个页面开发时间只用了大约30分钟。新的AMP页面使会话时长提高了27%,跳出率降低30%,加载速度提高一倍,转化率提升了75%。

renovation_1

  1. Greenweez

Greenweez是一家法国的有机食品零售商,他们只做线上销售。一开始他们的移动端页面加载速度超过10秒,转移到AMP页面后,加载速度提高一倍,移动端转化率提高80%,CPA降低66%。

greenweez_framed2

五. 常用平台AMP插件汇总

  1. WordPress

用户可以在WordPress官网下载AMP免费插件AMPforWP,点击https://wordpress.org/plugins/accelerated-mobile-pages/ 进行下载。这里也提供了扩展程序。也可以直接在WordPress后台搜索AMP插件进行安装。该插件同时兼容Yoast,Genesis和其他SEO插件,在AMP页面上也可以轻松实现SEO优化。

amp for Wp

另一个可以在WordPress上使用的插件是Google自己开发的AMP,也可以同过后台搜索找到。

amp plugin

  1. Shopify

用户可以在Shopify app store里下载安装AMP应用:https://apps.shopify.com/amp-google,轻松自定义AMP页面。

amp for shopify

  1. Magento

Magento与Wompmobile合作开发了一个基础AMP模板,针对Magento2.0以上的版本,使用有效的AMP标记来展示产品页面。这个模板目前还不能匹配整个网站的主题,只能展示一些基本的产品信息。这个模板是开源的,可以点击https://github.com/wompmobile/Magento-Module-AmpProductExample 获得该模板。

Scroll to Top