修正延遲載入內容

延緩載入次要或不可見的內容是提升效能和使用者體驗的常見最佳做法，這種做法通常稱為「延遲載入」。詳情請參閱 web.dev 延遲載入圖片和影片的資源。然而，如果未正確執行，這項技術可能會不小心對 Google 隱藏特定內容。這份文件會說明如何確認 Google 可以檢索延遲載入的內容，並為其建立索引。

當可視區域顯示內容時載入內容

為了確保 Google 能夠完整查看網頁內容，請在執行延遲載入時，確認所有相關內容在可視區域顯示時皆已載入。以下列舉幾種導入延遲載入的方法：

上述方法不會依賴使用者動作 (例如捲動或點選) 來載入內容，這點很重要，因為 Google 搜尋不會與網頁互動。

請勿在使用者開啟網頁時，在可能立即顯示的內容中採用延遲載入功能。這可能會導致內容載入和顯示在瀏覽器中所需的時間變長，使用者會明顯察覺到。

此外，請務必測試您的導入作業。

支援無限捲動網頁的分頁載入功能

無限捲動技術可讓使用者在捲動長網頁時，載入更多內容和更多不同網頁。這可能是分成多個區塊的長篇文章，或是類似分成多個區塊的一組項目。如要以可編入索引的方式實作無限捲動功能，請確認您的網站支援分頁載入這些區塊，方法如下：

  • 為每個區塊提供專屬的永久網址。
  • 請確認瀏覽器每次載入每個網址時，顯示的內容都相同。 其中一種做法是在網址中使用絕對頁碼，例如使用 ?page=12 做為查詢參數。
  • 請避免在這些網址中使用 ?date=yesterday 等相對元素。這樣一來，搜尋引擎和使用者都可以在特定網址找到相同內容，讓搜尋引擎更容易正確建立內容索引，並讓使用者分享及重新與該部分內容互動。
  • 依序連結至個別網址，讓搜尋引擎能在分頁組合中發現網址。進一步瞭解實作分頁模式的最佳做法。
  • 當系統載入新網頁區塊以回應使用者捲動動作，且該區塊成為使用者的主要可見元素時，請使用 History API 更新顯示的網址。這樣一來，使用者就能重新整理、分享及連結至瀏覽器目前顯示的網址。

測試

導入作業設定完畢後，請確保作業能夠正確執行。您可以使用 Search Console 的網址檢查工具確認所有內容是否已載入。請在網址檢查工具中查看轉譯後的 HTML，確認內容是否已轉譯完成。如果圖片或影片網址出現在轉譯後 HTML 中 <img> 或 <video> 元素的 src 屬性中，表示設定正確無誤。