WordPress AMP 外掛設定,全面提升手機網頁的開啟速度

Hi,我是民樂電腦。說到提升閱讀體驗,除了文章內容、SEO 優化,最重要的就是網站網頁速度。這次的主題要來探討,短時間能讓手機網頁文章加快的方法,既簡單又有效,它就是外掛 AMP。想知道有多快嗎?那就仔細閱讀本文囉!

WordPress AMP 外掛設定,全面提升手機網頁的開啟速度

前言

在這個資訊公開透明,知識隨手可得的時代,講求的是效率,速度就是王道。智慧型手機的發明,改變了人類的生活型態,擁有手機,除了可隨時隨地接受到各種資訊,也可以即時獲得想要的知識

據統計,將近一半以上的人,用手機瀏覽網頁時如果加載時間超過 3 秒,通常都會選擇回上一頁,而放棄閱讀。因此 Google 為了改善這個問題,針對手機版開發了 AMP 專案,讓使用者擁有流暢的即時閱讀體驗

用手機瀏覽網頁閱讀,已經是現代人的日常

AMP

AMP( Accelerated Mobile Pages )稱爲加速行動版網頁,簡單的說就是加快行動裝置開啓網頁的速度,有點類似 Facebook 的 Instant Articles,於 2016 年 2 月正式發布。主要分爲三大部份:AMP html、AMP JS、AMP Cache

  • AMP html:AMP 專用的標準規範。簡單來說,AMP 網頁會針對文字、圖片、影片或廣告來制定專用的 html 規範,以確保其網頁內容的可信度
  • AMP JS:負責支援普通非同步的 Javascript,也是一套可讓 AMP 架構最佳化的函式庫,負責管理網頁載入,並提供自訂標記,快速轉譯網頁
  • AMP Cache:是一種快取與傳輸 AMP 的內容傳遞系統。簡單來說,用戶點擊 AMP 網頁時,實際上都是存取最佳化後的快取頁面

AMP 教學

☞ 溫馨提醒:Automattic 和 Google 合作,針對 WordPress 架站使用者推出簡單外掛,並將專案開放原始碼放上 GitHub,只要安裝啟用即可整合這項新技術,實在是太方便了!難怪 WordPress 這麼受歡迎!

Step1. 外掛下載

AMP For WordPress

☞ 相關連結:AMP

Step2. 外掛設定

範本模式

範本模式設定成閱讀器模式

支援類型

支援類型只要文章與頁面即可

Step3. 確認啓用

☞ 溫馨提醒:到這裡 AMP 外掛算是完成了,什麼?!就這麼簡單。沒錯,只要開始寫文章出現啓用 AMP 就收工了

如果不想啓用 AMP 格式,直接點擊關掉即可

Step4. 建立索引

☞ 溫馨提醒:以下開始才是重頭戲。如果你想將所有的新舊文章都改成 AMP 格式,但又不想等 Google 太久的時間,就請做好步驟 4。如果只想要某幾篇文章來改,那麼就選擇那幾篇文章即可

建立索引時,請務必將全部文章都執行過一遍

☞ 相關連結:Google Search Console

Step5. 網址驗證

☞ 溫馨提醒:等 Google 一段時間索引好,就可以利用線上 AMP 驗證,看文章是否已經變成 AMP 狀態,假使測試結果為綠色的 PASS,就表示該文章頁面沒有任何的錯誤語法

利用線上 AMP 驗證工具

☞ 相關連結:The AMP Validator

Step6. 索引確認

☞ 溫馨提醒:如果還是不放心的話,可再回 Google Search Console 進行索引驗證,確認 AMP 版本已建立索引

Google Search Console AMP 版本建立索引

Step7. 搜尋結果

☞ 溫馨提醒:完成之後,利用行動裝置來搜尋網頁文章測試。最簡單只要看到文章網址後面有個閃電的符號,那篇文章就是 AMP 格式

關鍵字搜尋文章

近期新文章

之前舊文章

☞ 溫馨提醒:由上述這些圖片看來,只要步驟都有做對,無論是以前的舊文章,還是剛寫的新文章,都可以改成 AMP 格式

Step8. 效果呈現

AMP 懶人包

☞ 溫馨提醒:AMP 看似很厲害,但還是有一些缺點限制,以下是筆者簡單做個懶人包表格提供大家參考

 AMP
優點1.行動裝置文章開啓很快,非常快,秒開!
2.因爲快,可以提高單篇文章的點擊率
3.因爲網頁載入速度變快,可提高 SEO
4.外掛免費、安裝簡單,任何人都可以使用
缺點1.僅限於手機、平板行動裝置才有支援
2.只能用 Google 搜尋網頁才有效果
3.廣告部份也只能用 Google Adsense
4.網頁設計不靈活,只顯示圖片和文字
5.文章中若有選單、表格,無法顯示效果
6.若想要解除 AMP,會有掉 SEO 的風險

結論

最後你一定會問,既然 AMP 的技術在 2016 年就有了,爲何到現在還要介紹呢?因爲筆者開始使用 AMP 後發現,文章開啓真的就是快,很快,非常快。這麼好的東西一定要分享給大家 XD

對於講求效率的網路世界裡,如果你的網站文章擁有這樣的條件下,對於 SEO 一定非常有幫助,雖然會犧牲一些美觀,但是換來了速度,卻是值得的。難道你想要看超過三秒以上的文章嗎?

不過到現在這種技巧並非完全普及,許多網站站長也是都沒使用,搞不好都還不知道這項技術呢!如果你想要搶先吸引閱讀者的眼光,爭取到高排名的話,仔細閱讀本篇教學,相信你也會想要快點換 AMP!

Q&A

恢復正常網頁

如果你剛好正在看 AMP 的文章,是否可以轉換回正常網頁呢?答案是可以的,一種是滑到文章最底下,接著點擊「檢視留言」即可轉回一般網頁。另一種是滑到文章最頂部,接著點擊「LOGO」圖示即可

滑到文章最底下,接著點擊「檢視留言」

滑到文章最頂部,接著點擊「LOGO」圖示

加入 Ads 廣告

AMP 格式文章是否能加入 Google AdSense Ads 廣告呢?答案是可行的。必須用另一種外掛 Ad Inserter,並將兩種代碼同時貼在外掛當中即可

AMP 文章廣告顯示效果

☞ 延伸閱讀:Ad Inserter – 專爲 WordPress AMP 加入 Ads 的廣告外掛

Previous Post

Google reCAPTCHA v3 整合教學,協助辨識是不是機器人

Next Post

Ad Inserter – 專爲 WordPress AMP 加入 Ads 的廣告外掛

Scroll to top