修正延遲載入內容

延緩載入次要或不可見的內容 (通常稱為「延遲載入」) 是提升效能和使用者體驗的常見最佳做法。如需更多資訊,請參閱「網站基礎知識」的延遲載入圖片和影片指南。然而,如果未正確執行,這項技術可能會不小心對 Google 隱藏特定內容。這份文件會說明如何確認 Google 可以檢索延遲載入的內容,並為其建立索引。

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

為了確保 Googlebot 能夠完整查看網頁內容,請在執行延遲載入時,確認所有相關內容在可視區域顯示時皆已載入。舉例來說,您可以透過下列項目確認內容載入情況:

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

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

如果您正在導入無限捲動網頁體驗,請確實提供支援分頁載入的功能。分頁載入功能對使用者而言非常重要,不僅可讓使用者分享及再次與您的內容互動,也可讓 Google 顯示前往內容中特定位置的連結,而非無限捲動頁面頂端。

如要支援分頁載入,請為各區段提供不重複連結,讓使用者能夠直接分享和載入。我們建議您在內容以動態方式載入時使用 History API 來更新網址。

測試

在導入作業設定完畢後,應確保作業能夠正確執行。其中一個方法是使用 Puppeteer 指令碼在本機進行測試。Puppeteer 是用來控制無頭 Chrome 的 Node.js 資料庫。如要執行指令碼,您需要使用 Node.js。請使用以下指令來檢查並執行指令碼:

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

執行指令碼之後,請手動檢查產生的螢幕截圖,確保畫面中包含所有您預期可見並由 Googlebot 建立索引的內容。

您也可以透過 Search Console 的網址檢查工具確認所有圖片的載入情況。如要確保圖片皆已載入,請查看螢幕截圖和轉譯後的 HTML。