SEO優化技術

17328056617

佛山企業網站建設,網站制作設計,順德SEO整站優化,短視頻抖音代運營,網絡營銷解決方案

快速赛车:谷歌 GOOGLE AMP 完全指南 附實戰心得

AMP 是什么

快速赛车 www.alokg.com AMP,全稱是 Accelerated Mobile Pages, 是 Google 推出的開源前端框架。AMP 最明顯的特征就是?性能,被稱為目前 WEB 屆最快的框架毫不夸張。 Google 對 AMP 的性能進行了極致的優化,比如 JS 和網頁數據放在緩存( 具體可看這篇文章:AMP 如何提升性能)。

是否有必要做 AMP

當然有必要做了。理由有 2 個:首先,是快!從內部一個 case 來看,AMP 頁面在 Load Time 上比 PC 頁面快 1 倍,在交互時間上快 2 倍。其次,SEO 流量會提升?。ň嚀蹇杉亂徊糠?AMP Cache )雖說 Google 說過 AMP 并不會提升排名和流量,但從我們的實戰經驗來看,AMP 流量還是會有明顯提升。

AMP Cache

當 AMP 頁面通過 Google 驗證時,會納入到 Google 的 AMP 索引庫,并建立 Google AMP Cache。一旦有了 AMP Cache,當用戶通過 Google 搜索訪問網頁時,將直接訪問 Cache URL,而不是原網頁 URL。數據也是直接訪問 Google 的 CDN 緩存,而無需請求網站服務器。

舉個例子:Alibaba List 頁面 – Power BankAMP 地址:https://m.alibaba.com/amp/showroom/power-bank.htmlCDN 緩存地址:https://www.google.com/amp/s/m.alibaba.com/amp/showroom/power-bank.html

在用戶搜索時,有兩個非常重要的點,大大提升了性能。第一個是 Google 將網頁中的數據放在緩存服務器上,無需訪問網站服務器。另一個是用戶在搜索時,Google 就對 AMP 頁面進行了預加載,導致 AMP 可以秒開。

這 2 個特征對移動端訪問極其重要,特別是在移動基建不好的國家和地區。

緩存更新策略

AMP 有主動和被動兩種更新策略。

  • 主動更新。定期主動訪問網頁,更新緩存。
  • 被動更新。每次有用戶訪問網頁,Google 會同時請求網頁,更新緩存,保證每次用戶訪問都是最新數據。

不過需要注意的是,雖然有這 2 種更新策略,通過我們的實驗,數據仍會有一定的延遲。所以,實時數據仍需要實用異步請求( amp-list 組件),比如個性化數據,P4P 數據等。上圖是內部一個統計的 case。

AMP 如何適配

很多網站本來就有了 PC 和 M 站,現在又來了個 AMP,如何適配呢?有兩種適配形式:

  • PC + AMP

這種形式比較簡單,只需要配置好 amphtml 和 canonical 即可,aliexpress.com 就是這種情況。關系圖如下:

  • PC + M 站 + AMP

這種情況稍微復雜一點,alibaba.com 是采用這種形式。

也有網站存在更復雜的架構,比如 PC、M 站、AMP,以及英文和多語言,這里還有完整的架構關系圖:

AMP 實戰心得

從實戰效果來看,AMP 是不可錯過的一項新技術,不管是在網頁性能,還是對 SEO 流量的幫助。首先,AMP 應該是 WEB 端性能最強的一個框架了,Google 對性能的優化做到了極致。阿里的前端甚至也在參考 AMP 的思路對性能做提升。其次,雖然 Google 說過 AMP 不會有排名的優先,但從實戰效果來看,AMP 的流量還是會提高。AMP 算是近幾年來難得的技術紅利了。

AMP 常見問題

AMP 如何驗證

本地開發完成,需要對 AMP 頁面進行驗證。驗證未通過是無法被 Google 收錄的(上線時就會發現有很多問題)??梢醞ü韻錄鋼止ぞ呃囪櫓ぃ?/span>

  • AMP 在線驗證工具: https://ampbench.appspot.com/validate?url=https://ampbyexample.com/
  • AMP 驗證工具:https://validator.ampproject.org/
  • 另一個官方驗證工具:https://search.google.com/test/amp
  • AMP chrome 插件驗證工具:https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=zh-CN
  • AMP 緩存鏈接生成工具:https://github.com/ampproject/amp-by-example/blob/master/src/30_Advanced/Using_the_Google_AMP_Cache.html (驗證是否生成緩存,但不代表會出現在 Google 搜索中)

AMP WordPress 插件

Google 已經推出了 WordPress AMP 官方插件,只要安裝插件,即可將網站一鍵切換為 AMP 版本,極其方便 WordPress 用戶使用。官方插件地址:https://wordpress.org/plugins/amp/

AMP 如何統計

AMP 可以使用 amp-analytics 組件進行數據統計。Google Analytics 和 百度統計均可支持。實現方式是:

  • 在?<head>區域添加該代碼
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  • 添加網頁跟蹤或時間跟蹤的代碼
<amp-analytics type="baiduanalytics" id="analytics2">
    <script type="application/json">
        {
          "vars": {
            "token": "你的token"
          },
          "triggers": {
            "trackPageview": {
              "on": "visible",
              "request": "pageview"
            }
          }
        }
    </script>
</amp-analytics>

參考文檔:

  • 將 Google Analytics(分析)添加到 AMP 網頁 https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=zh-cn
  • 在 AMP 頁面中添加百度統計 https://tongji.baidu.com/web/help/article?id=268&type=0&castk=LTE%3D

AMP 如何收錄

AMP 主要依靠 PC 上 amphtml 鏈接進行收錄。也可以單獨提交 sitemap,但實測效果一般。另外需要注意的是,AMP 的收錄率是低于一般網頁的,也說明 AMP 的質量門檻較高。

AMP 能適用于百度嗎

可以的。百度已經支持了 AMP,并有 API 可以支持提交收錄和緩存更新。

百度 AMP 數據提交入口:https://ziyuan.baidu.com/mip/index?site=http%3A%2F%2Fwww.example.com/

AMP 只能在 chrome 使用?

不是的。AMP 是一個開源的前端框架,可以支持所有的瀏覽器,并可以在所有的國家訪問。

AMP 只能用在移動端?

不是的。AMP 也可以支持 PC 端頁面。

有了 PWA,還需要 AMP 嗎

AMP 和 PWA 其實是不同的應用場景,并沒有沖突,所以 AMP 和 PWA 是可以共存,并且是互補的。alibaba.com 就是 AMP 和 PWA 共同使用。

AMP 是收費的嗎 需要授權嗎

AMP 完全是免費的,只需要改造現有模版,立即就可以生效。最好的資料就是官方文檔,快速入門這一頁:https://www.ampproject.org/zh_cn/docs/getting_started/quickstart。

另外,AMP 也是不需要授權的,不像 Facebook 的 React Native。AMP 是完全開源的,沒有任何侵權的問題。我曾經當面跟 John Muller 求證過。

已有 M 站,怎么做 AMP 的改造

可以先從重點頻道開始改造,驗證效果之后再逐個頻道進行改造升級。比如 Detail 先切 AMP,之前 Detail M 站的 URL 是?/detail/{id}.html,AMP 的 URL 可以設置為?/detail/amp/{id}.html。上線后驗證了效果,再逐漸改造其他頻道。另外,建議以結果為導向,不需要先切換首頁,因為首頁只有一個頁面,流量有限。

參考文檔

  • AMP 中文官方網站:https://www.ampproject.org/zh_cn/
  • 澄清對AMP的十個誤解 https://futu.im/article/10-misconceptions-about-amp/

原文地址://www.zhidaow.com/post/google-amp

相關文章

{ganrao}