Google AMP 超快4倍速提升WordPress行動版網頁載入

Google新技術再次來到,這回推出所謂的AMP網頁技術,全名稱為「Accelerated Mobile Pages」,一般簡稱為AMP。當你的網站使用後,網頁載入速度會更省流量、更快速,這個AMP專案主要是Google針對在行動裝置上(手機或平板),搜尋結果點入後載入速度將會比傳統搜尋快4倍,流量卻不到過去的十分之一,同時也將優先出現於Top Stories的區塊。

面對這項全新的技術,是哪些網站可以使用?Google AMP是開放專案,只要符合寫法規範,Google就會依照您提供的內容作快取機制,快取到Google伺服器中成為其中的Top Stories區塊的內容,除了提升網站四倍速快,同時也可以降低網站的流量,SEO排名等於也相對變得更優秀。目前Google大動作的支援WordPress,其實不難發現WordPress的使用者占全球網站的四分之一,怪不得Google會優先力挺。


一般網站想要擁有AMP的頁面,需要透過AMP(Accelerated Mobile Pages)專案的介紹與說明,來替自己的網站改寫內容,可以參考「Create Your First AMP Page」或Google官方說明指南或者是Github。但如果你是WordPress使用者那就非常恭喜你!因為WordPress官方已經立馬推出AMP的外掛透過外掛可以讓你的WordPress直接擁有AMP頁面,同時也切割好一般電腦版、行動版、AMP版的頁面,不會讓你的搜尋排名大亂,而是替你的WordPress排名有效加分。

Google AMP 超快4倍速提升WordPress行動版網頁載入

Google AMP這項技術,主要是基於現有的網頁技術得開放框架,打造輕量級的網頁瀏覽體驗,與Facebook Instant Articles 有點類似,但Google是針對在Google搜索結構上作呈現,不過使用AMP的網頁有很多語法不能使用,所以有些網站元件可能會無法載入,因為它就是要給使用最佳的瀏覽體驗,內容王道!至於限制或者是需要轉換HTML標籤變成AMP標籤的可以參考AMP HTML。雖然AMP的網頁語法有諸多限制,但好在AMP可以支援Google Analytics支援Google AdSense,只需要做一個小轉換就可以達成,也可以繼續賺廣告費、繼續統計網站人氣。

第1步  WordPress安裝外掛很簡單,來到WordPress外掛管理介面中,搜尋「AMP」並找到作者為「Automattic」這個就是官方製作者,點選﹝立刻安裝﹞。

Google AMP 超快4倍速提升WordPress行動版網頁載入

第2步  接著請您啟用外掛。

Google AMP 超快4倍速提升WordPress行動版網頁載入

第3步  啟動之後,官方AMP沒有任何選項可以設定。想知道有無成功,可以到任一篇文章的原始碼內查看,語法內會多一行META宣告,只是Google如果要看AMP網頁請到另外一個網址。

Google AMP 超快4倍速提升WordPress行動版網頁載入

第4步  在WordPress中,AMP頁面的網址就是在文章網址後方加上「amp」或者是「?amp=1」即可查看,畫面如下。

Google AMP 超快4倍速提升WordPress行動版網頁載入

第5步  如果你是自己製作的網頁想看看有無把AMP語法寫好,可以開啟Chrome devTools的【Console】即可查看,如果顯示「owered by AMP ⚡ HTML – Version XXXXX」那就是表示此頁面為正確的AMP網頁。若下方有錯誤訊息,可以依照訊息做修正處理。

想知道有無驗證過,可以在網址末端加上「#development=1」,然後開啟本步驟的開發者工具,將會顯示是否驗證通過。

Google AMP 超快4倍速提升WordPress行動版網頁載入

基本上WordPress官方的AMP,在香腸撰寫此篇文章的時候尚不支援Google Analytics語法,若您想要讓AMP網頁也可以列入Google Analytics分析統計,你可以額外安裝AMP Analytics這支外掛,它是依賴在官方AMP外掛下的外掛,也就是要安裝官方AMP外掛後這支外掛才有效果。如果不想使用外掛,也可以自己嘗試改code並且hook到官方AMP plugin下。

如果要查看Google到底有沒有讀取到你網站AMP,可以透過「Accelerated Mobile Pages (AMP) 報告」來做查詢。假設您剛啟用AMP,請稍待一兩週在回來觀看。