1. 程式人生 > >在WordPress中使用Google的AMP技術

在WordPress中使用Google的AMP技術

在上週五APMCon大會上,Google的售前工程師專門講了一節AMP技術,之前見過這個東西,但是不明白是什麼,所以就沒有在意,聽聞這位工程師的“洗腦”後,決定了解一下,通過搜尋得知WordPress已經完全支援AMP技術了,那麼如何在WordPress中使用AMP技術呢?很簡單的幾個步驟就可以使用高大上的技術了。

一、在WordPress中安裝AMP外掛

在WordPress的後臺中找到外掛 -> 安裝外掛,在搜尋外掛中輸入amp,點選搜尋。如下圖所示:

請注意,外掛的作者一定是Automattic

二、點選現在安裝

在安裝完成後點選啟用,此時,你的WordPress網站已經支援AMP這個高大上的技術了。為什麼作者一定是Automattic呢,因為這個外掛是這個作者和Google聯合開發的,權威性比較高。並且口碑也不錯,第一個外掛我回頭新建個站點嘗試一下。

三、如何確認開啟amp外掛後,我們的WordPress已經支援AMP了呢?

在開啟外掛後,如果你的WordPress站點有各種快取,請先清理快取。清理完成快取後,隨便點開一篇文章,點選右鍵檢視原始碼,在原始碼中能夠看到下面的程式碼就表示你的站點已經支援AMP了。

<link rel="amphtml">

完整的標籤為:

<link rel="amphtml" href="https://tvzr.com/install-thrift-on-macos.html/amp" />

那麼此時,你可以通過文章目錄後面新增/amp的方式來訪問文章了,如上面的程式碼中href的值。如果你的文章URL是WP預設的,那麼amp的方式應該是?amp=1

。效果如下圖所示:

當然,AMP主要針對的是移動頁面,PC端的速度並不明顯。

需要注意的是:Google AMP有非常嚴格的語法格式規範,任何錯誤都不會索引頁面,因此要保證AMP頁面正確才可以,不過這個不用我們操心,amp這個wordpress外掛會自動產生AMP頁面,排除可能的語法錯誤,為了保證頁面可以使用amp,最好手動檢查一下。檢查的方法是在AMP頁面的後面加上#development=1,然後開啟瀏覽器的開發者工具功能,切換到Console,如果出現Powered by AMP就表示正確。

當然也可以通過線上網址驗證器「The AMP Validator」進行驗證, 開啟網址後,將文章的地址貼上進去,點選VALIDATE,即可進行驗證,如果是綠色的PASS,就表示該頁面沒有存在任何錯誤語法。

想了解AMP的童鞋請點選 https://www.ampproject.org/zh_cn/