部落格
Blog
熱門文章Hot
-
奥运行销 7个品牌案例教您如何借势造势 | 圣侨资讯
2016-08-17
-
流量成长指标 AARRR理论 | 圣侨资讯
2016-09-29
-
商业4.0 打造未来商圈五大关键 | 圣侨资讯
2016-09-24
-
营照归属感 Airbnb感动人心的品牌策略 | 圣侨资讯
2016-07-29
-
喜迎万圣 不给商机就捣蛋节日行销术 | 圣侨资讯
2016-10-27
-
掌握视觉传达技巧 设计资讯图表So Easy | 圣侨资讯
2016-09-10
-
内容行销必备 活用HASHTAG聚焦社群议题 | 圣侨资讯
2016-08-18
-
打造台湾皮克斯 TAIWAN BAR 让我们看到年轻人眼中的台湾 | 圣侨资讯
2016-08-05
-
Beacon微定位导流 游戏式消费模式 | 圣侨资讯
2016-09-19
-
圣侨CSR 云端活化「放送精神」 | 圣侨资讯
2015-12-30
大幅提高行动版网页速度 AMP网页设计教学 | 圣侨资讯
在用手机上网的时候，您有计算过自己会花多少时间等待页面载入吗？试着想像一下，如果连您都不愿花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网页，如果对相关资讯有兴趣的话欢迎持续关注翻转行销专栏。
