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

歡迎回到鵠學苑—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,點擊搜尋。

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

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

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

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

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

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

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

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁
第二步:在網頁HTML中啟動尋找功能(command或control+F),輸入AMP,如果找到如下圖的LIMK字串,就表示AMP已加入網頁中。

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

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

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

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

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

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

 

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

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

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

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

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁

結語:

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

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

站內相關文章:

網站資訊文章推薦

一頁式網站介紹 – 單頁式活動網站製作要點與應用說明
微軟公布 : 2021 年 Microsoft 365 服務將不再支持 Internet Explorer 11(IE 11)
Google 優先索引行動版內容 將於一年內對所有網站實施

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

回到頂端