AMP 能提高網站SEO?讓客戶更快找到你?

透過手機來發送內容已經是生活日常,但是,使用手機閱讀網頁,讀取速度耗時,閱讀體驗也不是很好,因此,為了改善使用者的手機版瀏覽問題,Goolge推出 AMP。

什麼是Google AMP?

AMP 全名為 Accelerated Mobile Pages,中文名稱為【加速行動版網頁】,是一個由 Google 開發設計的架構,創造一個符合手機瀏覽的網頁,可讓網站讀取速度更快,使用者開啟網頁的速度更快。許多國外的媒體在安裝AMP頁面後,文章頁面開啟的速度增加數倍到數 10 倍,使用者更快的可以讀取到他們的內容。
而AMP可以分成三個部分,分別是AMP html、AMP JS、AMP Cache:

  • AMP html:一種專為AMP設計的html規範,AMP有針對圖片、影片或廣告制定html規範,例如<amp-img>、<amg-carousel>。
  • AMP JS:是一種Javascript的函式庫。AMP禁止在網頁內使用同步Javascript,因為這有可能會破壞網頁DOM的架構,但是允許使用非同步的Javascript。AMP JS是一套可讓AMP架構最佳化的函式庫,管理網頁載入,並且提供自訂標記,快速轉譯網頁。
  • AMP Cache:是一種快取與傳輸AMP的內容傳遞系統。在行動版網頁上看到的都是快取後的最佳化的AMP頁面,如此可快速載入網站頁面。

AMP很厲害,但是有一些限制

當你使用手機Google文章內容時,你會發現到一個閃電的符號,代表這個網站有安裝AMP。

一般來說,如果你的網站是屬於內容型的網站,例如像是美食部落格、電影評論網等,就非常適合安裝AMP。

但這會對網站開發人員會有以下限制:

  • 對於Javascript的使用限制:因為AMP本質上是屬於靜態的網頁,AMP限制了Javascript的使用,僅能使用AMP所提供的元件,不允許使用自己所編寫的元件功能,或者只能寫在AMP所規定的sandbox iframe區塊裡面,同時iframe的要離頂部600px或75%。
  • style大小使用不超過50KB:為了增加速網頁讀取速度,AMP限制了Style的大小,同時也規定inline style只能寫在網頁檔案內<header>之<style amp-custom></style>區塊內。
  • 圖檔使用需要先預告大小:AMP對於外部資源的引用(例如圖片、廣告等),一定要在html內宣告外部資源的大小,讓AMP確認每一個圖片或廣告的大小,避免發生有需要重新計算或重新設計layout問題。
  • 字體檔案限制使用:字體的使用需用連結標籤、或者是CSS的@font face rule。對於字體的引用,也限定特定字體供應商。

雖然有諸多限制,但是Google推出AMP來加速網頁,對於使用者體驗提昇會有一定的幫助。


AMP 對於 SEO的影響

自從Google推出了移動裝置優先指標(mobile-first index)後,許多人都會想說,那是不是裝了AMP之後,手機版網站排名就會往前,行動版的SEO 就會如魚得水。其實不然,Google官方指出,使用AMP不一定會讓排名往前,SEO有許多的決定因素,最終還是要回到網站內容是否能夠解決使用者問題,只能說AMP讓手機版 網站讀取速度變快,而網站速度為SEO影響因素之一,是可以增加手機版網站的競爭力。
但如果今天你要說服老闆或客戶來為網站安裝AMP,一定要謹記以下三點:

  1. 網站速度一向是Google搜尋引擎考慮因素,提高網站速度對於SEO一定有幫助;
  2. 根據研究,網站每慢1秒,網站轉換率會減少 7%;
  3. AMP雖然是Google推出的專案計畫,但是AMP能直接增加SEO分數只是江湖傳說;

使用AMP優點與缺點

基本上,使用AMP有以下的優點:

  1. AMP是一個開源計畫,任何人都可以使用
  2. 文章頁面加載速度變快
  3. 增加訪客黏著度,降低跳離率
  4. 提高單篇文章的點擊率
  5. 網站速度變快,有機會提高網站SEO
  6. 如果使用 WordPress架站,安裝過程便利
  7. 使用AMP架構完全免費,不需要額外收費

但是也會有以下的缺點:

  1. 僅限於 Google 搜尋引擎優化
  2. 廣告投放只能用於Google ads
  3. 網站設計較不靈活,只限於圖片和文字設計
  4. AMP 無法擴充使用其他應用程式
  5. 解除安裝過程耗時,導致網站SEO下降
  6. 減少了訪客停留在網站的時間

如何為自己的網站安裝AMP呢?

原則上就是:

  1. 建立html檔案,包含標記<html amp>標籤
  2. 載入圖片檔案,清楚說明圖片檔案尺寸大小
  3. 使用<style amp-custom>標籤,客製化網頁樣式
  4. 讓搜尋引擎知道同時存在AMP與non-AMP頁面,使用<link>標籤來告知
  5. 預覽與驗證頁面是否安裝成功

如果網站用 WordPress 架設的,會非常方便,可以透過AMP的外掛工具來安裝,安裝步驟如下:

1、進入wordpress後台,進入安裝外掛搜尋AMP,找到AMP外掛,點擊立即安裝並啟用:


2、安裝完成後,回到網站前台,進入到文章頁面,會看到原始的文章頁面:


3、此時,只要在網址最後面輸入『/amp』:


4、該篇文章頁面,就會被導向到 AMP 的網頁,就算安裝完成囉:


AMP 主要用於提高手機版網站載入速度,這是不可避免需要積極改善的,隨著開發技術進步,Google 會逐步強化 AMP 在頁面上的功能。因此,保持對於 AMP 技術更新追蹤,我們建議您頁為自己的網站裝上,給您的使用者更好的行動裝置體驗吧。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。