Google AMP 網頁教學 AMP是什麼 ? 加速手機版網頁必學技能！

內容目錄

Toggle

歡迎回到鵠學苑—WordPress網頁設計超詳細攻略 –– Google AMP 網頁教學 AMP是什麼 ? 加速 手機版網頁！以前我們在瀏覽網頁時，必須透過桌上型電腦在固定場所接上連有數據機的網路線，才有辦法連上網站，而現在時代進步飛快，幾乎人手都有一台智慧型手機或平板，每個人不受時間空間限制，隨時隨地都可以進入網路的精彩世界！在這樣的狀況下，對於大部分的網站開發者，在狹義的說法上稱之為手機版網頁，而在廣義上來講，應該稱之為移動設備(Mobile Devices)，其瀏覽網頁的體驗就變得相當重要，而鵠學苑今天要介紹的這一個外掛–AMP for WordPress，就是加快在智慧型手機上載入網頁的速度，讓你的網站能更擁有更高效率的顯示內容。有關網站載入速度的測試，可以參考離外一篇教學文章：Google Page Speed Insight 網站速度測試。
那麼 AMP是什麼 ? 其實就是Accelerated Mobie Project的縮寫，在字面翻譯的意思是”加速移動項目“，也就是優化移動設備網頁瀏覽速度的意思。而其中Project 所指的是原本網頁的HTML、JS(Java Script)等內容，透過外掛來轉換成AMP HTML、AMP JS、以及將網站結構正確的AMP網頁頁面加入到Google AMP Cache，使其顯示在搜尋結果中。要使網頁具有AMP的效果，其實必須在AMP的官方網站暸解相關語法設定，才能夠建立(請參考:https://www.ampproject.org/zh_cn/docs/getting-started/)，不過由於WordPress在全世界相當普及化的架設網站，因此Google也特別釋出了WordPress可以直接使用的外掛，而且安裝相當的容易！接下來跟著鵠學苑的腳步，讓我們開始學習～
(小提醒：鵠學苑的所有教學均是以Apple Mac OS X系統做步驟示範！)

外掛下載點
https://tw.wordpress.org/plugins/amp

透過WordPress後台安裝AMP for WordPress外掛及設定

第一步：進入到WordPress後台，在側邊工具欄點選外掛>安裝外掛，右上角搜尋欄內輸入AMP for WordPress，點擊搜尋。

第二步：外掛圖示是藍底白字，標示Accelerated Mobie Page Project的文字，依序點選安裝、啟用。有關外掛的安裝，可以參考之前的文章：WordPress 教學基礎介紹六（外掛）。

第三步：可以在後台的側邊工具欄找到AMP的選項，點擊進去後有一般以及分析兩個選項，點選一般，可以自定義想要製作成AMP的文章類型，可以按個人需求點選。

以網址及Google說明文件驗證AMP是否運行完成

第一步：由於外掛的設定相當的安靜整潔，因此安裝完成後無法得知是否已經在網站內裝好AMP，因此我們需要以其他方法來驗證，首先找到網站內一篇文章，在頁面上點擊滑鼠右鍵，在跳出的右鍵選單上選擇 “檢視網頁原始碼“，會進到網頁HTML的畫面。

第二步：在網頁HTML中啟動尋找功能(command或control+F)，輸入AMP，如果找到如下圖的LIMK字串，就表示AMP已加入網頁中。

第三步：如果想看網頁在使用AMP-HTML後的畫面，可以在網頁網址結尾處加上/amp。另外也可以在這裡檢查AMP建立的HTML是否正常載入，在網址列最後加上 #development=1，點擊右鍵，在選單上選擇檢查，進入Chrome開發人員工具，在頁籤上選擇console，如果有顯示第一行文字：Powered by AMP⚡ HTML…以及第二行文字: AMP validation successful.，就表示AMP HTML及JS沒有錯誤，如下圖所示。

第四步：在第二步驟確認過AMP已建立後，也可以使用由Google提供的AMP線上驗證工具，進入如下圖畫面，輸入想驗證的網頁網址，結尾加上/amp，在HTML Format選項的部分選擇AMP，按下VALIDATE(驗證)，如果有顯示下圖中最下方紅色框的PASS，就表示AMP HTML在網頁中是建立成功的。

第五步：另一個AMP測試網站，是驗證AMP網頁是否有效果。輸入要測試的網址，點擊下方執行測試按鈕，分析結束後，會顯示在分析的網站檢測到AMP連結，接著點擊測試連結的AMP，如果出現綠色的文字”有效的AMP網頁“，就表示網站的AMP是可用的。

第六步：我們也可以到Google Search Console網站管理工具中查看行動版網頁加速的分析情形，這裡跟大家解釋一下，AMP加速瀏覽優化的網頁必須要經過Google重新索引後，才會顯示在搜尋結果上，並不會即時顯示。在教學中一樣先跟同學說明可以在Google Search Console看到相關數據，在下圖中有Google對AMP的說明。

第七步：下圖中是AMP優化過的網站頁面在手機版網頁中搜尋結果所呈現的樣式，可以看到在網址的前方會呈現閃電的圖示，表示該網頁具有AMP快速載入內容的優化效果。

結語：

AMP讓手機版網頁加速的優化，可以讓使用者在點擊進入網頁時可以很快地看到網頁主要內容，為什麼我會說是主要的內容呢？其實AMP HTML/JS是有非常嚴格的限制，在使網頁元素快速的讀取加載的同時，也會讓網頁中其它效果功能被停用，因而達到讓使用者快速瀏覽主內容的效果。對於鵠學苑來說，這個外掛算是一個功能性外掛，意思是它只適合需要這個功能的網站，譬如對於購物網站來說，使用者不僅僅是看到商品內容就足夠了，而是會想要有加入購物車，跳轉到結帳頁面，或比價相關商品等。因此對於網站內容以展示文字、相片、影片為主的，可以考慮以安裝AMP外掛的方式來加快手機版網頁，但如果是功能性較多，較需要操作的網站，建議還是以AMP官方網站內的教學內容去建立比較好！

今天的ＷordPress外掛教學到此告一段落了！大家要持續追蹤鵠學苑，才能掌握WordPress教學的第一手資訊喔！我們下週的教學見拉！