加速行動版網頁(AMP, Accelerated Mobile Pages)

加速行動版網頁(AMP, Accelerated Mobile Pages)

加速行動版網頁(AMP, Accelerated Mobile Pages)是 Google 推出的一套框架,用來使行動裝置網頁能快速載入。 在 Search Console 上會看到提示建議 Webmaster 使用與提交這樣的頁面。

加速行動版網頁(AMP, Accelerated Mobile Pages)

官網的教學會一步一步帶著完成一個 AMP 頁面,接下來還可以從撰寫好的範例中看看怎麼實際使用到現實專案上。  

AMP 共分三部份

優點/成效

來說說使用 AMP 的優點,也就是使用後的成效。

限制

使用 AMP 的限制非常多,而 Google 也解釋,這些限制是因為希望提供較佳的效能。

電商網站的範例:eBay

目前使用 AMP 的頁面大多是新聞網站的頁面,而很特別的是,eBay 居然宣布開始使用 AMP 了。但我很好奇,Top Stories 的類型多為新聞、食譜,目前沒有看到商品,eBay 做這個是為未來 Top Stories 新增商品類型做準備嗎?

eBay 製作的 AMP 頁面是站內搜尋頁,而它的站內搜尋頁有兩個版本:未使用 AMP、使用 AMP。點開下面的連結來看看使用與未使用 AMP 的差異:

實作

我也幫「吃什麼,どっち」做了一個 AMP 的頁面,可以用手機點開來看。

範例

測試與驗證

網址後加上 #development=1,即可在瀏覽器的 JavaScript Console 檢視錯誤訊息。

備註

結論

目前台灣在 Google SERPs 上是沒有看到 Top Stories(如果有看到請跟我說),所以扣除 AMP 可以在 Top Stories 吸引使用者點閱外,就只剩下使用行動裝置瀏覽時能快速載入的優點了。因此,目前對我來說,AMP 就是個類似 Bootstrap 的前端框架,依照規格撰寫與應用,組成行動裝置版本的網頁,然後優點是效能很好。

後記

(2018/01/01 更新)

Top Stories

Top Stories 可吸引使用者點閱,帶目前台灣在 Google SERPs 上是沒有看到 Top Stories,測試的時候我都需要把手機定位關掉或改為美國才能找到。

Top Stories

與結構化資料結合

與結構化資料結合,能顯示更多商品資訊。

Top Stories

References


這篇文章的原始位置在這裡-加速行動版網頁(AMP, Accelerated Mobile Pages)

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus