大幅提高行动版网页速度 AMP网页设计教学 | 圣侨资讯

翻转行销 黄诗宜 2017-01-25

在用手机上网的时候,您有计算过自己会花多少时间等待页面载入吗?试着想像一下,如果连您都不愿花3~5秒左右去等一个网站的话,又怎能期望消费者能够给您机会呢?

什么是AMP(Accelerated Mobile Pages)

简单来说就是指加速版的行动网页,它是Google为了与FB的Instant Articles和Apple News等即时新闻功能相抗衡,于2015年10月所推出的一种开源方案,它具有以下优点:

一、 网页载入速度较过去快了四倍且数据量仅占原本的十分之一

二、 支援Chrome、Firefox、Safari及Opera等浏览器

三、 会在Google搜寻结果顶端的Top Stories中以卡片的方式呈现,方便使用者浏览

四、 让内容发布者有更多的平台可以经营,从而获得更大的收益

 

它与目前常见的RWD一样是因应行动装置而开发的技术,但RWD的目的是随着设备不同自由改变解析度,虽然网站必须要重新改版设计但在使用上相当灵活,适用于所有类型的网站;而AMP的重点则是即时向移动用户提供内容,只要在既有的网站上加入AMP机制即可,常用于新闻发布、产品页面、评论、网志等静态型的网页,但在今年Google有意扩展让所有行动网站都能支援AMP技术。

虽然Google官方已证实AMP不会影响网页的排名,但正如我们先前提到的,SEO的重点就在于优化使用者体验,有了提高网页速度这个重大优势,AMP领域在2017年必定是SEO业者必争之地。

AMP三大组成要素

一、 AMP HTML

与传统的HTML标签相似,如<body>、<article>等可直接使用,但有些具有规范限制,如DTD 必须为 <!doctype html>、顶层必须包含AMP属性、<img>应替换为<amp-img>等,详细的使用方式可参考↓↓
AMP HTML

二、 AMP JS

为了有效管理资源载入并提供客制化标签,所以仅能使用AMP的元件,详细的操作实例请参考↓↓
AMP JS库

三、 Google AMP Cache

内建验证系统的缓存机制,它会抓取AMP页面并放在Google AMP Cache中以最佳化性能,搜寻的结果会显示于Google Search的Top Stories版位中。

五大步骤教您如何设计AMP网页

一、 搜集教学资料

自2015年底Google发布讯息之后,网路上已有不少教学文章,可多方参考,找出适合自己的学习教材,在文末有整理出一些AMP的教学网站,欢迎参考。


二、 建立AMP HTML标准模板

✦ 开头一定要有<! doctype html>

✦ 顶层标记为<html ⚡>或<!html amp>

✦ 一定要有<head>及<body>标签

✦ 在<head>內放<link rel="canonical" href="/orignal.html">参照网址指向非AMP的原始网页,若没有原始网页则将其本身指定为标准准版本

✦ 将<meta charset="utf-8">设为<head>区块的第一个子标记

✦ <head>内要包含<meta name="viewport" content="width=device-width,minimum-scale=1">以及initial-scale=1

✦ 将<script async src="https://cdn.ampproject.org/v0.js"></script>設在<head>区块最末端

✦ <head>区块中加入 AMP boilerplate code

在上述前提下所建立的标准模板如下:


三、 图像载入及修改语法

有了标准模版之后,就要开始载入图档或是其它多媒体档案,如将<img>修改为<amp-img>,接着就是修改样式,AMP跟一般网页不同的是必须从一开始就严格地定义各个元素样式。详细作法请参考↓↓
AMP载入多媒体档案


四、 预览和验证

可选择用浏览器直接开启离线档案或是使用Apache2、Nginx等本地网站伺服器开启(执行python –m SimpleHTTPServer),接着照以下步骤来验证它是否是有效的AMP网页:

1. 以浏览器开启页面

2. 网址后方加入 #development=1

3. 使用Chrome的DevTools控制台验证错误


五、 页面发布

若希望Google能同时找到AMP和非AMP版本的网页,应视网页类型加入以下连结:

✦ 非 AMP 网页:参照对应的 AMP 版本网页,让 Google 和其他平台了解两者间的关系:
<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />

✦ AMP 网页:加入下列文字以参照对应的非 AMP 标准版本网页:
<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />

✦ 如为独立的 AMP 网页 (没有相应的非 AMP 版本),请将其本身指定为标准版本:
<link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />


到了这里,恭喜你已经拥有自己的AMP网页,如果对相关资讯有兴趣的话欢迎持续关注翻转行销专栏。

参考资料

AMP教学网

Google官方布告栏

Google Search Console说明

WeiYuan Note AMP 与 RWD

B2C AMP vs Responsive Web Design

Jerry Qu AMP,来自 Google 的移动页面优化方案

  • 41