AMP網頁

大幅提高行動版網頁速度 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 的移动页面优化方案

fblike
  • 786