你需要了解的關於 Google AMP 和 SEO 的一切

---

Google 於 2015 年首次推出 AMP（加速移動頁面）。藉助開源 AMP 框架，網頁設計師可以建立載入速度快的移動頁面。該框架的建立是為了應對越來越多的人使用移動裝置訪問網際網路的趨勢。從那時起，Google 一直大力推廣使用 AMP 來提升 SEO 和移動裝置上的使用者體驗。在這篇文章中，我們將更詳細地瞭解 AMP，並討論它如何影響 SEO。

什麼是 Google AMP？

如前所述，AMP 是一個開源框架，允許開發者建立載入速度快的移動頁面。AMP 使用精簡版的 HTML、CSS 和 JavaScript 來大幅減少頁面載入時間。AMP 還將頁面快取到 Google 的伺服器上，使使用者點選頁面時幾乎可以立即載入。使用 AMP 的頁面會顯示在移動裝置搜尋結果頂部的輪播圖中，使其更容易被使用者看到。

為什麼 Google 大力推廣 AMP？

Google 推廣 AMP 的原因有很多。首先，AMP 改善了移動裝置上的使用者體驗。使用 AMP 的頁面載入速度更快，使使用者更容易快速訪問所需內容。更快的載入時間還可以降低跳出率，這是 Google 的一個重要排名因素。其次，Google 將 AMP 看作是讓使用者留在網路上而不是在應用內的一種方式。最後，Google 希望透過提供卓越的移動體驗來保持其競爭優勢。

AMP 如何影響 SEO？

AMP 對 SEO 有重大影響。使用 AMP 的頁面會受到 Google 的優先對待。啟用 AMP 的頁面更有可能在移動裝置搜尋結果中排名第一。如前所述，AMP 頁面會顯示在搜尋結果頂部的輪播圖中。出現在輪播圖中的頁面比沒有出現在輪播圖中的頁面獲得更多點選。

AMP 對 SEO 的影響不僅限於移動裝置。Google 已表示，AMP 也是桌上型電腦搜尋結果的排名因素。

如何在你的網站上實現 AMP

在你的網站上實現 AMP 非常簡單。第一步是建立你頁面的 AMP 版本。你可以手動建立 AMP 版本，也可以使用外掛或擴充套件程式來自動建立 AMP 版本。

建立頁面 AMP 版本後，你需要新增一些程式碼來告訴 Google 在哪裡可以找到 AMP 版本。你可以透過在 HTML 程式碼的 head 部分新增 rel="amphtml" 標籤來實現此目的。此標籤告訴 Google 在哪裡可以找到你頁面的 AMP 版本。

為確保你的 AMP 頁面符合 AMP 規範，你必須對其進行驗證。你可以使用 Google 提供的 AMP 驗證器工具來驗證你的 AMP 頁面。AMP 驗證器會檢查你的頁面是否存在錯誤，並提供修復方法的建議。

AMP 最佳實踐

在你的網站上實施加速移動頁面 (AMP) 時，你應該遵循一些最佳實踐，以確保你的頁面效能良好並提供良好的使用者體驗。以下是一些主要的 AMP 最佳實踐：

• 使用 AMP 快取 - AMP 快取是一個內容分發網路，它將你的 AMP 頁面快取到 Google 的伺服器上。使用 AMP 快取可以顯著提高 AMP 頁面的效能。當用戶點選指向你的 AMP 頁面的連結時，AMP 快取會從快取中提供頁面，從而加快載入過程。為了使用 AMP 快取，必須在 HTML 程式碼的 head 部分包含以下程式碼：

<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 Analytics 可以幫助你找出需要改進的地方，並最佳化頁面以獲得更好的效能。為了使用 AMP Analytics，必須在 HTML 程式碼的 head 部分包含以下程式碼：

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

你還需要在 HTML 程式碼的 body 部分新增以下程式碼：

<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 頁面上載入的外部資源數量。你可以透過直接在 HTML 文件中包含 CSS 程式碼來避免需要外部 CSS 檔案。但是，請儘可能保持 CSS 程式碼的簡潔，以避免任何潛在的效能問題。

• 使用正確的廣告格式 - 如果你計劃使用廣告來獲利你的 AMP 頁面，請使用與 AMP 相容的廣告格式。Google AdSense 是 AMP 網站最受歡迎的廣告網路之一，因為它提供各種適合 AMP 的廣告型別。

請遵循 AMP 廣告指南，以確保你的廣告不會對使用者體驗產生負面影響。

結論

總而言之，AMP 是一個強大的工具，可以提高移動頁面的效能並提升你的 SEO。透過遵循 AMP 的最佳實踐，你可以確保你的頁面提供快速、使用者友好的體驗，並針對移動裝置進行了最佳化。AMP 可以幫助提高你網站在搜尋結果中的可見性並提高使用者參與度。如果你還沒有，請考慮在你的網站上實現 AMP。