什麼是AMP加速行動版網頁

什麼是AMP加速行動版網頁

什麼是AMP網頁?

AMP全名 Accelerated Mobile Pages,是一種根據開放原始碼規格所設計的網頁。透過 AMP 製作技術, 在行動裝置上AMP 網頁的載入速度和顯示外觀均優於標準 HTML 網頁。能夠縮短網頁載入速度和有效提升網頁效能。AMP 包括三個部分:分別是AMP HTML,AMP JS以及Google AMP Cache。通常會用在靜態的網頁,例如部落格、新聞文章等。


AMP網頁由於有將物件給元件化、強調不載入外部CSS,加上經由Google cache等特性能讓網頁快速載入。目前只有行動裝置能透過搜尋並看到AMP網頁,而且可在搜尋排名前面。


感受一下AMP網頁的速度

網頁如果有製作AMP頁面,手機搜尋時能看到網址出現一個 閃電 標誌,就代表該頁有AMP


AMP網頁-瞬間載入

一般網頁-載入時間較久



如上述圖示,由於AMP資料語法特殊已經透過google記錄住了,AMP網頁幾乎是立即出現,不需要等待就能完整瀏覽頁面; 而一般的網頁通常會因為載入各項語法需要花較多時間才能完整呈現

快速載入頁面可以讓搜尋的觀看者馬上看到訊息,不會因等待而失去耐心進而離開頁面,讓觀看者有更好的體驗。


AMP的原理

AMP使用了一套自成一格的技術,HTML、CSS、JS都有其嚴格的規範,當中若有任何一項錯誤就會導致AMP失效不會出現在Google搜尋中。通常AMP是輔助於原本的網頁,加速原本網頁觀看者的體驗,因此每頁AMP會和原本的網頁互相連結,例如一頁關於我們可能就會連結另外一頁AMP版的關於我們(內容必須一致),這樣AMP頁可以透過原始網頁被搜尋到,AMP頁面也有可能拉抬原本網頁的搜尋排名。


AMP的禁止事項與注意事項

由於為了要快速載入,禁止了許多項目
  • 不能載入或在頁面內自行寫JavaScript,如果有需要任何互動效果只能用AMP的套件
  • 不能載入Css,僅能在html頁面內編寫,或是使用白名單的css (大部分是圖標)
  • 任何帶有 iframe 的語法都不能通過:例如想崁入Youtube或是FB影片語法都不行,但可以使用AMP套件
  • 圖片標籤需要更改為 < amp-img src="..." width="700" layout="responsive" alt="...">   圖片寬高是必要的
  • AMP頁面必須有宣告和原本頁面互相連結,才能告訴google該頁有amp可以收錄,例如 < link rel="canonical" href=" https://www.smartweb.tw">

AMP的優點與缺點

優點:
  • 快速載入
  • 搜尋排名容易在前面
  • 拉抬原本頁面的排名
  • 快速吸引消費者眼光

缺點:
  • 原本的網站要多做amp版需要多花一份心力,或維護兩份資料
  • 標籤或任何一項不符合規定就不會被收錄
  • 網頁變更後,要等google來撈資料後,搜尋的頁面才會出現變更後的頁面(通常至少需2-3天)
  • JavaScript不能自由編寫,因此有些功能無法照舊使用。

AMP看來似乎後續維護很麻煩,但在某些情況下還是能達成只須要維護一份資料,就能擁有一般網頁與AMP版網頁。您現在所看的這個站有製作成全站AMP化,而資料僅須要維護一份即可,即使AMP版網頁沒有被收錄,仍可以看到一般版的網頁。
目前國內外許多新聞媒體或部落格已經採用AMP技術,而形象式或商城式的網頁也陸續開始使用,或許未來仍有很大的發展。


更多文章:

  1. AMP教學-amp-bind-產品輪播圖與規格互動
  2. AMP教學-amp-bind-產品規格製作教學
  3. 在AMP中添加或刪除class的方式
  4. 每個AMP頁面都必須有非AMP版本嗎?
  5. AMP教學-amp-bind 增加網頁互動

回應