聖僑資訊公司部落格-大幅提高行動版網頁速度 AMP網頁設計教學-人才招募,面試,評價,薪水,薪資,PPT
聖僑資訊公司部落格-大幅提高行動版網頁速度 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 HTML
二、 AMP JS
為了有效管理資源載入並提供客製化標籤，所以僅能使用AMP的元件，詳細的操作實例請參考↓↓
AMP JS庫
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
在上述前提下所建立的標準模板如下：
<script src="https://gist.github.com/anonymous/4760765f60d4c6b1eda0e39cde641c77.js"></script>
三、 圖像載入及修改語法
有了標準模版之後，就要開始載入圖檔或是其它多媒體檔案，如將<img>修改為<amp-img>，接著就是修改樣式，AMP跟一般網頁不同的是必須從一開始就嚴格地定義各個元素樣式。詳細作法請參考↓↓
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" />
<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" />
<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" />
<link rel="canonical" href="https://www.example.com/url/to/amp-document.html" />
到了這裡，恭喜你已經擁有自己的AMP網頁，如果對相關資訊有興趣的話歡迎持續關注翻轉行銷專欄。
參考資料：
https://www.youtube.com/embed/lBTCB7yLs8Y
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
https://github.com/ampproject/amphtml/tree/master/src
https://www.ampproject.org/docs/guides/author-develop/amp_replacements
https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md
https://github.com/ampproject/amphtml/tree/master/src
https://www.ampproject.org/docs/guides/author-develop/amp_replacements
留言
張貼留言