AMP

將 AMP 與您的應用程式整合

重要事項:本文件不適用於您目前選取的廣告格式!

本指南適用於想要整合並連結至 AMP 頁面的行動和 Web 應用程式開發人員。例如,假設有個行動聊天應用程式會載入共用網址的 AMP 版本,以便為使用者提供更快速的體驗。

透過 AMP,可以在您的原生或行動 Web 應用程式中近乎即時地呈現外部網站。您可以比對內容中的網址及其對應的 AMP 網址 (如果有的話),並開啟 AMP 版本而非原始版本,藉此達成此目的。您可以使用 Google AMP URL API 等工具來協助您。

例如,可以轉換以下訊息以提供 AMP 版本,方法是將所有網址替換為相符的 AMP 版本 (如果有的話)。為了縮短載入時間並確保提供有效的 AMP,您應連結至 AMP 快取中的快取 AMP 頁面。

原始訊息

This is a message with links to an <a href="http://www.example.org/a">
article with AMP version</a> and an <a href="http://www.example.org/b"> article without AMP version</a>.

轉換後的訊息

This is a message with links to an <a href="https://www-example-org.cdn.ampproject.org/c/www.example.org/a">
article with AMP version</a> and an <a href="www.example.org/b"> article without AMP version</a>.

提示 – 考慮讓使用者能夠選擇檢視非 AMP 版本,而非透過應用程式中的偏好設定檢視 AMP 版本。

有三種以程式方式轉換連結的方法

  1. 寫入時伺服器端 (建議):在寫入網址時,透過 Google AMP URL API 擷取 AMP 網址,並在伺服器端儲存 AMP 網址。將網址和 AMP 網址都傳遞至用戶端,因為分享時可能需要原始網址。這是建議的做法,因為用戶端網路要求較少。採取這種做法時,務必定期 (例如,每天) 掃描連結以尋找 AMP 版本,因為越來越多網站採用 AMP 格式。
  2. 讀取時伺服器端 (部分使用):在將內容傳遞至您的用戶端之前,透過 Google AMP URL API 擷取 AMP 網址。如上所述,將網址和 AMP 網址都傳遞至用戶端,因為分享時可能需要原始網址。此方法適用於低扇出服務。
  3. 用戶端 (如果伺服器端不可行):從用戶端透過 Google AMP URL API 擷取 AMP 網址。如果伺服器端網址轉換不可行 (例如,對於使用端對端加密的訊息應用程式),請使用此方法。請務必在內容可用時立即觸發網址轉換,在任何使用者互動發生之前。

重要事項 – 絕不要因為使用者互動而透過 Google AMP API 要求 AMP 網址,因為這會引入額外的網路要求,進而降低應用程式的效能。請改用上述三種方法之一。

Google AMP URL API

Google 提供 AMP URL API,以針對指定的 URL 清單擷取相符的 AMP HTML URL (官方文件 / 示範)。網址不需要是標準版本。如果 AMP 版本存在,回應會包含原始 AMP 網址和 Google AMP 快取上快取 AMP 頁面的網址。

例如,針對指定的 URL 清單

{"urls": [
  "https://www.example.org/article-with-amp-version",
  "http://www.example.com/no-amp-version.html"
]}

回應主體包含 JSON 格式的 AMP 網址對應

{
  "ampUrls": [
    {
      "originalUrl": "https://www.example.org/article-with-amp-version",
      "ampUrl": "https://www.example.org/article-with-amp-version/amp",
      "cdnAmpUrl": "https://www-example-org.cdn.ampproject.org/c/s/www.example.org/article-with-amp-version"
    }
  ],
  "urlErrors": [
    {
      "errorCode": "NO_AMP_URL",
      "errorMessage": "AMP URL not found.",
      "originalUrl": "http://www.example.com/no-amp-version.html"
    }
  ]
}

注意 – 無法透過 AMP URL API 擷取非 Google AMP 快取上快取 AMP 頁面的網址。不過,您可以從傳回的 AMP 網址 (ampURL) 輕鬆衍生快取網址。

使用 AMP 快取

AMP 快取是以 Proxy 為基礎的內容傳遞網路 (CDN),用於傳遞有效的 AMP 文件。AMP 快取的設計宗旨是

  • 僅提供有效的 AMP 頁面。
  • 允許有效率且安全地預先載入 AMP 頁面。
  • 對內容執行額外的使用者有利效能最佳化。

目前有兩個 AMP 快取供應商

這提供兩種在應用程式中顯示 AMP 檔案的選擇,可使用:

  1. 發布商託管的版本
  2. AMP 快取中託管的版本

基於以下原因,我們建議使用 AMP 快取

  • 更佳的使用者體驗,因為載入時間更快且延遲時間更低 (載入時間快 1 秒以上)。
  • 效能和頻寬優勢,因為額外快取用戶端相依的成品,例如根據用戶端的可視區域大小快取相同圖片的不同版本。
  • 原始 AMP 檔案可能不再是有效的 AMP,這可能會導致不良的使用者體驗。在這種情況下,AMP 快取會提供 AMP 檔案的最後一個有效版本。
  • 不正直的發布商可能會向 AMP 快取檢索器和您的使用者提供兩個不同的文件。使用 AMP 快取可保證使用者始終看到與快取相同的 AMP 檔案。

重要事項 – 透過 AMP 快取提供 AMP 頁面時,請提供檢視器體驗,清楚顯示 AMP 的來源,並讓使用者可以分享標準網址 (如需更多資訊,另請參閱以下兩個章節)。

實作 AMP Viewer

AMP Runtime 提供 Viewer API,此 API 提供在 AMP Runtime 和 Viewer 之間傳送和接收訊息的協定。這使得控制 AMP 文件的預先呈現、文章間滑動和 AMP Runtime 檢測成為可能。您可以在將 AMP Viewer 與 AMP 頁面連線指南中瞭解更多關於 AMP Viewer API 的資訊。適用於 WebiOS 的 Viewer 實作可在 GitHub 上取得。Android Viewer 尚不可用,請參閱 Stack Overflow 上的此解答,瞭解如何最佳設定 WebView 以顯示 AMP 頁面。

以下是一些實作 AMP Viewer 的一般最佳做法

  • 從 AMP 快取提供 AMP 頁面 (載入時間快 1 秒以上)。
  • 顯示文章發布商的來源 (例如,在可摺疊的頁首中)。
  • 提供分享動作 (另請參閱下方的「分享 AMP 內容」章節)。
  • 在以 WebView 為基礎的檢視器中,啟用第三方 Cookie。
  • 為您的平台/應用程式設定參照網址。

分享 AMP 內容

從平台 AMP Viewer 內分享 AMP 文件時,如果技術上可行,平台應分享標準網址。例如,如果平台提供分享按鈕,則此按鈕應分享標準網址。

AMP 專案的理念是,平台應可選擇向使用者呈現哪個版本的文件。因此,在分享到不同平台時,分享標準版本 (而非 AMP 版本) 最合理,然後期望目標平台做出正確的選擇。