极速飞艇秘诀
當前位置:
首頁 > SEO網站優化 > 上海seo分享谷歌 AMP教程與其優勢與技術技巧

上海seo分享谷歌 AMP教程與其優勢與技術技巧

  在文章開始之前,我想有些朋友對這個詞,一定有些陌生吧!那么在正式開始之前,我們給大家簡要的介紹一下吧!AMP,全稱是 Accelerated Mobile Pages, 是 Google 推出的開源前端框架。AMP 最明顯的特征就是 性能,被稱為目前 WEB 屆最快的框架毫不夸張。基于這一點對于我們seo網站優化來講那是非常重要的一點。 Google 對 AMP 的性能進行了極致的優化,比如 JS 和網頁數據放在緩存( 具體可看這篇文章:AMP 如何提升性能)。

上海seo分享谷歌 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 緩存,而無需請求網站服務器。

 

上海seo分享谷歌 AMP教程與其優勢與技術技巧

  舉個例子:Alibaba List 頁面 - Power Bank

  AMP 地址:https://m.alibaba.com/amp/showroom/power-bank.html

  CDN 緩存地址: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 數據等。

上海seo分享谷歌 AMP教程與其優勢與技術技巧

上圖是內部一個統計的 case。

 

 

  AMP 如何適配

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

  •   PC + AMP

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

上海seo分享谷歌 AMP教程與其優勢與技術技巧

  •   PC + M 站 + AMP

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

上海seo分享谷歌 AMP教程與其優勢與技術技巧

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

上海seo分享谷歌 AMP教程與其優勢與技術技巧

 

  AMP 實戰心得

  從實戰效果來看,AMP 是不可錯過的一項新技術,不管是在網頁性能,還是對 SEO 流量的幫助。

  首先,AMP 應該是 WEB 端性能最強的一個框架了,Google 對性能的優化做到了極致。阿里的前端甚至也在參考 AMP 的思路對性能做提升。

  其次,雖然 Google 說過 AMP 不會有排名的優先,但從實戰效果來看,AMP 的流量還是會提高。AMP 算是近幾年來難得的技術紅利了。

 

  AMP 常見問題

  AMP 如何驗證

  本地開發完成,需要對 AMP 頁面進行驗證。驗證未通過是無法被 Google 收錄的(上線時就會發現有很多問題)。可以通過以下幾種工具來驗證:

  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://#baidu.com/web/help/article?id=268&type=0&castk=LTE%3D

 

  AMP 如何收錄

  AMP 主要依靠 PC 上 amphtml 鏈接進行收錄。

  也可以單獨提交 sitemap,但實測效果一般。

  另外需要注意的是,AMP 的收錄率是低于一般網頁的,也說明 AMP 的質量門檻較高。

 

  AMP 能適用于百度嗎

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

上海seo分享谷歌 AMP教程與其優勢與技術技巧

 

  AMP 只能在 chrome 使用?

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

  AMP 只能用在移動端?

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

  有了 PWA,還需要 AMP 嗎

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

  alibaba.com 就是 AMP 和 PWA 共同使用。

 

  上述文章由雨中漫步網絡提供如需轉載請注明出處!謝謝。

  雨中漫步網絡上海seo服務商-專注于seo網站優化、網站建設、軟文推廣、口碑建設等服務!因為專注所以更專業,做專業的服務我們是認真的。業務聯系方式(QQ:595753982,微信;zhaohuisen123)

极速飞艇秘诀 重庆时时龙虎计划软件 通比牛牛游戏网站 天津时时现场开奖直播 重庆时时开奖结果龙虎 福彩3d图迷汇总大全 休息娱乐的形式博客 pk10官网直播 时时彩计划稳赚方法 注册体验金最新的网站 重庆时时彩新规律公式