確認 Google 可以查看延遲載入的內容

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

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

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

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

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

如果您正在導入無限捲動網頁體驗,請務必支援分頁載入功能。分頁載入功能對使用者而言非常重要,可讓使用者能共用和重新參與您的內容。也可讓 Google 顯示內容中前往特定點的連結,而非無限捲動頁面頂端。

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

測試

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

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

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

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

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

這個網頁