Google 于 2015 年首次推出 AMP,即加速移動頁面。借助開源 AMP 框架,網頁設計師可以制作快速加載的移動網頁。該框架的創建是為了應對使用移動設備訪問互聯網的個人數量的增加。從那時起,谷歌一直在推動使用 AMP 來增強移動設備上的 SEO 和用戶體驗。我們將在這篇文章中更詳細地研究 AMP,并討論它如何影響 SEO。
什么是 Google AMP?
如前所述,AMP 是一個開源框架,允許開發人員創建快速加載的移動頁面。AMP 使用 HTML、CSS 和 JavaScript 的精簡版本來顯著縮短網頁加載時間。AMP 還會在 Google 的服務器上緩存網頁,讓用戶點擊網頁時幾乎可以立即加載網頁。使用 AMP 的網頁會顯示在移動設備搜索結果頂部的輪播界面中,從而讓用戶更容易看到這些網頁。
為什么谷歌要推送 AMP?
出于多種原因,Google 一直在推動 AMP 的采用。首先,AMP 改善了移動設備上的用戶體驗。使用 AMP 的網頁加載速度更快,從而可以更輕松地快速訪問所需的內容。更快的加載時間也會降低跳出率,這是谷歌的一個重要排名因素。其次,谷歌將AMP視為一種將用戶留在網絡上而不是在應用程序內的方式。最后,谷歌希望通過提供卓越的移動體驗來保持領先于競爭對手。
AMP 如何影響 SEO?
AMP 對 SEO 有重大影響。使用 AMP 的網頁會受到 Google 的優惠待遇。啟用了 AMP 的網頁更有可能在移動設備上的搜索結果中排名第一。如前所述,AMP 網頁會顯示在搜索結果頂部的輪播界面中。輪播界面中顯示的網頁比未界面界面中顯示的網頁獲得的點擊次數更多。
AMP對SEO的影響不僅限于移動設備。谷歌表示,AMP也是桌面搜索結果的一個排名因素。
如何在您的網站上實施 AMP
在您的網站上實施 AMP 非常簡單。第一步是創建網頁的 AMP 版本。您可以手動創建網頁的 AMP 版本,也可以使用插件或擴展程序自動創建 AMP 版本。
創建網頁的 AMP 版本后,您需要添加一些代碼,告知 Google 在哪里可以找到 AMP 版本。為此,您可以在 HTML 代碼的 head 部分添加 rel=“amphtml” 標記。此代碼會告知 Google 在何處可以找到您網頁的 AMP 版本。
為確保您的 AMP 網頁符合 AMP 規范,您必須對其進行驗證。您可以使用 AMP 驗證工具(Google 提供的一種工具)來驗證您的 AMP 網頁。AMP 驗證工具會檢查您的網頁是否存在錯誤,并提供有關如何修正這些錯誤的建議。
AMP 最佳實踐
在您的網站上實施加速移動頁面 (AMP) 時,您應該遵循一些最佳實踐,以確保您的網頁表現良好并提供良好的用戶體驗。以下是一些頂級 AMP 最佳做法。
- 使用AMP緩存 - AMP緩存是一個內容分發網絡,可將您的AMP頁面緩存在Google的服務器上。使用 AMP 緩存可以顯著提高 AMP 網頁的性能。當用戶點擊指向您的 AMP 網頁的鏈接時,AMP 緩存會提供緩存中的網頁,從而加快加載過程。以下代碼必須包含在 HTML 代碼的頭部才能使用 AMP 緩存:
<link rel="canonical" href="https://www.example.com/amp/page.html">
<link rel="amphtml" href="https://www.example.com/amp/page.html">
第一行代碼告訴 Google 您網頁的 AMP 版本是規范的,第二行代碼告訴 Google 在哪里可以找到您網頁的 AMP 版本。
- 優化圖像 - 圖像可能是頁面加載時間的重要來源。確保優化圖像的大小和格式。使用圖像壓縮工具在不犧牲質量的情況下減小圖像的文件大小。為每個圖像使用正確的圖像格式。例如,將 JPEG 用于照片,將 PNG 用于具有透明度的圖像。
- 使用 AMP Analytics - Google 提供 AMP Analytics,這是一項可讓您監控 AMP 網站上用戶活動的服務。使用 AMP 分析可以幫助您確定需要改進的領域,并優化網頁以提高性能。以下代碼必須包含在 HTML 代碼的頭部才能使用 AMP Analytics :
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
您還需要將以下代碼添加到HTML代碼的正文部分:
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{"vars": {"account": "UA-XXXXXX-Y"},"triggers": {"trackPageview": {"on": "visible","request": "pageview"}}
}
</script>
</amp-analytics>
將“UA-XXXXXX-Y”替換為您的 Google Analytics(分析)跟蹤 ID。
- 避免使用外部資源 - 外部資源(如 JavaScript 和 CSS 文件)可能會降低 AMP 網頁的速度。請盡可能避免在 AMP 網頁上使用外部資源。請改用 AMP 組件庫,該庫提供了可用于構建網頁的預構建組件。如果需要外部資源,請使用異步加載來減少對頁面加載時間的影響。
- 使用結構化數據 - 使用結構化數據可以提高網頁在搜索結果中的可見度。AMP 網頁支持結構化數據,因此請將其添加到您的網頁中。使用 AMP 版本的結構化數據標記,以確保與 AMP 兼容。您可以使用 Google 提供的結構化數據測試工具測試結構化數據。
- 測試您的網頁 - 在發布 AMP 網頁之前,請對其進行全面測試。使用 AMP 驗證工具和移動設備適合性測試等工具,確保您的網頁符合 AMP 規范并提供良好的用戶體驗。AMP 驗證工具會檢查您的網頁是否存在錯誤,并提供有關如何修正這些錯誤的建議。移動設備適合性測試會檢查您的網頁是否適合移動設備,并提供如何改進它們的建議。
通過遵循這些 AMP 最佳做法,您可以確保您的網頁提供針對移動設備進行優化的快速加載、用戶友好的體驗。這有助于提高您網站的搜索引擎排名并增加用戶參與度。
- 使用正確的 HTML 語法 ? 確保在創建 AMP 網頁時使用正確的 HTML 語法。AMP 網頁需要嚴格的 HTML 語法,因此錯誤可能會導致您的網頁無法通過驗證。使用 AMP HTML 樣板代碼確保您的網頁使用正確的語法。
- 使用 AMP 組件 - AMP 組件是預構建的 HTML 和 JavaScript 模塊,可為您的 AMP 網頁提供大量功能。這些組件針對 AMP 進行了優化,因此它們很輕巧,不會導致任何頁面速度問題。一些常用的 AMP 組件包括 amp-img、amp-carousel 和 amp-video 組件。
- 使用內聯 CSS - 內聯 CSS 有助于減少 AMP 網頁上加載的外部資源數量。您可以通過將 CSS 代碼直接包含在 HTML 文檔中來避免需要外部 CSS 文件。但是,請盡可能減少 CSS 代碼,以避免任何潛在的性能問題。
- 使用正確的廣告格式 - 如果您打算通過廣告通過 AMP 網頁獲利,請使用與 AMP 兼容的廣告格式。Google AdSense 是 AMP 網站最受歡迎的廣告網絡之一,因為它提供了多種適合 AMP 的廣告類型。
請遵循 AMP 廣告指南,確保您的廣告不會對用戶體驗產生負面影響。
結論
總之,AMP 是一個強大的工具,可以提高移動頁面的性能并提升您的 SEO。通過遵循 AMP 的最佳做法,您可以確保您的網頁提供針對移動設備優化的快速、用戶友好的體驗。AMP 可以幫助您提高網站在搜索結果中的可見度,并提高用戶參與度。如果您尚未實施 AMP,請考慮在您的網站上實施 AMP。
如果感覺這篇文章還不錯的話可以點贊收藏,對這個還有疑問可以評論回復解答的哈,需要seo學習資料或者相關的面試題可以通過文末免費獲取