導入動態轉譯

目前 JavaScript 在處理上並不容易,而且並非所有搜尋引擎檢索器都能成功或立即處理 JavaScript。我們希望日後可以解決這個問題,而現在我們建議您使用動態轉譯功能做為暫時替代方案。動態轉譯是指針對特定使用者代理程式,在用戶端轉譯和預先轉譯內容間進行切換。

建議採用動態轉譯的網站

動態轉譯功能適用於符合以下條件的內容:可供建立索引、由 JavaScript 產生且會快速變更的公開內容,或者是您認為重要但卻用了檢索器不支援的 JavaScript 功能的內容。不是所有網站都需要使用動態轉譯,在此特別提醒您,動態轉譯功能只是暫時的權宜之計。

瞭解動態轉譯的運作方式

使用動態轉譯時,您的網路伺服器需要偵測檢索器 (例如檢查使用者代理程式)。系統會將來自檢索器的要求轉送到轉譯器,並照常處理使用者的要求。如有必要,動態轉譯器會提供適合檢索器使用的內容版本,例如靜態 HTML 版本。您可以選擇為所有網頁啟用動態轉譯,或每頁個別指定是否啟用。

說明動態轉譯如何運作的圖表。圖表說明伺服器直接將初始 HTML 和 JavaScript 內容提供給瀏覽器。另一張對比圖則顯示伺服器將初始 HTML 和 JavaScript 提供給轉譯器,再由轉譯器將初始 HTML 和 JavaScript 轉換成靜態 HTML。內容轉換完成後,轉譯器會將靜態 HTML 提供給檢索器。

導入動態轉譯

如要為內容設定動態轉譯,請按照我們的一般指南操作。請務必詳閱特定設定詳細資料,因為各項設定的導入方式可能大不相同。

  1. 安裝並設定動態轉譯器,將內容轉換成易於檢索器使用的靜態 HTML。PuppeteerRendertronprerender.io 都是常見的動態轉譯器。
  2. 選擇您認為需要接收靜態 HTML 的使用者代理程式,並參閱特定設定詳細資料,瞭解如何更新或新增使用者代理程式。下列是 Rendertron 中介軟體中的常見使用者代理程式清單:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. 如果預先轉譯會導致伺服器速度變慢,或您發現有大量預先轉譯要求,不防導入預先轉譯內容快取功能,或驗證要求是否來自合法檢索器
  4. 判斷使用者代理程式要求電腦版或行動版內容,然後使用動態服務來提供適當的版本。以下例子說明如何透過設定來判斷使用者代理程式需要電腦版或行動版內容:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. 設定伺服器提供靜態 HTML 給您選取的檢索器。方法有很多種,您可以根據自己採用的技術來決定要採用哪種做法。以下列出幾個範例:
    • 以 Proxy 伺服器處理檢索器對動態轉譯器的要求。
    • 在部署程序中進行預先轉譯,並且讓伺服器向檢索器提供靜態 HTML。
    • 在自訂伺服器程式碼中建構動態轉譯。
    • 將來自預先轉譯服務的靜態內容提供給檢索器。
    • 為伺服器使用中介軟體 (例如 rendertron 中介軟體)。

驗證您的設定

順利導入動態轉譯功能後,請針對網址檢查以下項目並確保一切如預期運作:

  1. 使用行動裝置相容性測試來測試行動版內容,確定 Google 能檢索到您的內容。

    done 成功:您的行動版內容與希望呈現給使用者瀏覽的內容相符。

    error 再試一次:如果您看到的內容與預期不符,請參閱「疑難排解」一節

  2. 使用網址檢查工具測試電腦版內容,確定電腦版內容即使在轉譯網頁 (Googlebot 檢索時看到的網頁樣子) 上也會顯示。

    done 成功:電腦版內容與您希望呈現給使用者瀏覽的內容相符。

    error 再試一次:如果您看到的內容與預期不符,請參閱「疑難排解」一節

  3. 如果您使用結構化資料,請使用結構化資料測試工具來測試這些資料能否正確轉譯。

    done 成功:結構化資料會按照預期顯示。

    error 再試一次:如果結構化資料無法按照預期顯示,請參閱「疑難排解」一節

疑難排解

如果您的內容在行動裝置相容性測試中出現錯誤,或者無法顯示在 Google 搜尋結果中,請試著先解決下列常見問題。假如都試過了還是遇到問題,請至網站管理員論壇張貼新主題發問。

內容不完整或看起來不一樣

error 問題原因:您的轉譯器可能設定錯誤,或是網頁應用程式與轉譯解決方案不相容。有時候逾時也會導致內容無法正確轉譯。

done 修正問題:請參閱特定轉譯解決方案的說明文件,針對動態轉譯設定部分進行偵錯。

回應時間過久

error 問題原因:使用無頭瀏覽器隨選轉譯網頁經常會導致回應時間過久,造成檢索器取消要求,並且不為您的內容建立索引。檢索器在檢索內容和建立索引時,漫長的回應時間也可能會造成檢索頻率降低。

done 修正問題

  1. 在建構過程中,為預先轉譯的 HTML 設定快取或為內容建立靜態 HTML 版本。
  2. 務必在設定中啟用快取 (例如將檢索器指向快取)。
  3. 利用行動裝置相容性測試WebPageTest 等測試工具 (搭配 Google 檢索器使用者代理程式清單中的自訂使用者代理程式字串),檢查檢索器是否能快速擷取您的內容。您的要求不應逾時。

缺少結構化資料

error 問題原因:缺少結構化資料使用者代理程式,或輸出結果未包含 JSON-LD 指令碼標記,都有可能導致出現結構化資料錯誤。

done 修正問題

  1. 使用結構化資料測試工具來確認網頁能正確顯示結構化資料。接著,為結構化資料測試工具設定使用者代理程式,測試預先轉譯的內容。
  2. 確認您內容的動態轉譯 HTML 已納入 JSON-LD 指令碼標記。詳情請參閱您的轉譯解決方案說明文件。

傳送您對下列選項的寶貴意見...

這個網頁