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

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

1.透過WordPress後台安裝AMP for WordPress及設定

2.以網址及Google說明文件驗證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教學的第一手資訊喔!我們下週的教學見拉!

Google 相關教學文章:

Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

Google Map 自訂外觀 – 客製化 Google 地圖樣式教學

Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法

Google Maps JavaScript API 申請 – 網站啟用 Google 地圖 教學

Google AdSense 教學 – AdSense申請在 WordPress 加入網站廣告

Google網站管理員 ( Search Console ) 驗證網站所有權的三種方式

Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能

[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學

使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

Google 字體下載 – WordPress 字體快速分析及網頁字體設定

Google Page Speed Insight 網站速度測試

WordPress 外掛教學相關文章:

網站架設知識推薦閱讀:

WordPress 介紹 – 全球市佔率達三成,遠超其他CMS管理系統

免費網頁空間 架站平台比較 – WordPress,Wix,Weebly,Blogger

WordPress 市佔率再創新高,2019 年成長至 33.4%!

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
分享在 twitter
Twitter
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top