AMP HTML
二、 AMP JS
為了有效管理資源載入並提供客製化標籤,所以僅能使用AMP的元件,詳細的操作實例請參考↓↓
AMP JS庫
三、 Google AMP Cache
內建驗證系統的緩存機制,它會抓取AMP頁面並放在Google AMP Cache中以最佳化性能,搜尋的結果會顯示於Google Search的Top Stories版位中。
五大步驟教您如何設計AMP網頁
一、 蒐集教學資料
自2015年底Google發布訊息之後,網路上已有不少教學文章,可多方參考,找出適合自己的學習教材,在文末有整理出一些AMP的教學網站,歡迎參考。
二、 建立AMP HTML標準模板
✦ 開頭一定要有
✦ 頂層標記為
✦ 一定要有
及標籤✦ 在
內放 參照網址指向非AMP的原始網頁,若沒有原始網頁則將其本身指定為標準準版本✦ 將設為
區塊的第一個子標記✦
內要包含以及initial-scale=1✦ 將設在
區塊最末端✦
區塊中加入 AMP boilerplate code在上述前提下所建立的標準模板如下:
三、 圖像載入及修改語法
有了標準模版之後,就要開始載入圖檔或是其它多媒體檔案,如將修改為
AMP載入多媒體檔案
四、 預覽和驗證
可選擇用瀏覽器直接開啓離線檔案或是使用Apache2、Nginx等本地網站伺服器開啟(執行python –m SimpleHTTPServer),接著照以下步驟來驗證它是否是有效的AMP網頁:
1. 以瀏覽器開啓頁面
2. 網址後方加入 #development=1
3. 使用Chrome的DevTools控制台驗證錯誤
五、 頁面發布
若希望Google能同時找到AMP和非AMP版本的網頁,應視網頁類型加入以下連結:
✦ 非 AMP 網頁:參照對應的 AMP 版本網頁,讓 Google 和其他平台瞭解兩者間的關係:
✦ AMP 網頁:加入下列文字以參照對應的非 AMP 標準版本網頁:
✦ 如為獨立的 AMP 網頁 (沒有相應的非 AMP 版本),請將其本身指定為標準版本:
到了這裡,恭喜你已經擁有自己的AMP網頁,如果對相關資訊有興趣的話歡迎持續關注翻轉行銷專欄。
參考資料
AMP教學網Google官方佈告欄
Google Search Console說明
WeiYuan Note AMP 與 RWD ?
B2C AMP vs Responsive Web Design
Jerry Qu AMP,来自 Google 的移动页面优化方案