本文介紹如何識別和解決一些 Javascript 問題，這些問題可能會導(dǎo)致您的網(wǎng)頁（或 JavaScript 網(wǎng)頁上的特定內(nèi)容）無法顯示在 Google 搜索結(jié)果中。雖然 Googlebot 可以運行 JavaScript，但您在設(shè)計網(wǎng)頁和應(yīng)用時需要考慮一些差異和限制，以順應(yīng)抓取工具訪問和呈現(xiàn)您的內(nèi)容的方式。我們的 JavaScript SEO 基礎(chǔ)知識指南詳細(xì)介紹了如何針對 Google 搜索優(yōu)化 JavaScript 網(wǎng)站。

Googlebot 經(jīng)過精心設(shè)計，是一名優(yōu)秀的網(wǎng)上公民。它的主要任務(wù)是抓取網(wǎng)站，同時確保其抓取操作不會導(dǎo)致網(wǎng)站的用戶體驗下降。Googlebot 及其網(wǎng)頁呈現(xiàn)服務(wù) (WRS) 組件會不斷分析和識別對基本網(wǎng)頁內(nèi)容沒有貢獻(xiàn)的資源，并且可能不會抓取此類資源。例如，對基本網(wǎng)頁內(nèi)容沒有貢獻(xiàn)的報告和錯誤請求，以及在提取基本網(wǎng)頁內(nèi)容時不使用或沒必要使用的其他類似類型的請求。客戶端分析可能無法完整或準(zhǔn)確地體現(xiàn)您網(wǎng)站上的 Googlebot 和 WRS 活動。使用 Search Console 可以監(jiān)控您網(wǎng)站上的 Googlebot 和 WRS 活動及反饋。

如果您懷疑 JavaScript 問題可能會導(dǎo)致您的網(wǎng)頁或 JavaScript 網(wǎng)頁上的特定內(nèi)容無法顯示在 Google 搜索結(jié)果中，請按以下步驟操作。如果您不確定 JavaScript 是否是主要原因，請按照我們的一般調(diào)試指南確定具體問題。

1、如需測試 Google 抓取和呈現(xiàn)網(wǎng)址的效果，請使用 Search Console 中的移動設(shè)備適合性測試或網(wǎng)址檢查工具。您可以查看已加載的資源、JavaScript 控制臺輸出和異常、呈現(xiàn)的 DOM 以及更多信息。

警告：請勿使用緩存鏈接調(diào)試網(wǎng)頁。建議改用網(wǎng)址檢查工具，因為該工具會檢查網(wǎng)頁的最新版本。

此外，我們還建議您收集和審核用戶（包括 Googlebot）在您網(wǎng)站上遇到的 JavaScript 錯誤，確定可能會影響內(nèi)容呈現(xiàn)效果的潛在問題。

顯示示例

2、請務(wù)必防范軟 404 錯誤。在單頁應(yīng)用 (SPA) 中，這可能會非常困難。為防止將錯誤網(wǎng)頁編入索引，您可以使用以下一種或兩種策略：

a、重定向至服務(wù)器響應(yīng) 404 狀態(tài)代碼的網(wǎng)址。

顯示示例

b、添加漫游器元標(biāo)記 noindex 或?qū)⒙纹髟獦?biāo)記更改為 noindex。

顯示示例

了解更多信息：SPA 使用客戶端 JavaScript 處理錯誤時，通常會報告 HTTP 狀態(tài)代碼 200，而不是相應(yīng)的狀態(tài)代碼。這會導(dǎo)致錯誤網(wǎng)頁被編入索引并可能會顯示在搜索結(jié)果中。

3、Googlebot 可能會拒絕用戶權(quán)限請求。

了解更多信息：需要用戶權(quán)限的功能不適用于 Googlebot 或所有用戶。例如，如果您需要 Camera API，而 Googlebot 無法向您提供相機(jī)。在這種情況下，應(yīng)為用戶提供一種方式，使其無需授予相機(jī)訪問權(quán)限便能訪問您的內(nèi)容。

4、請勿使用片段網(wǎng)址加載不同的內(nèi)容。

了解更多信息：SPA 可能會使用片段網(wǎng)址（例如 https://example.com/#/products）加載不同的視圖。 自 2015 年起，我們已棄用 AJAX 抓取方案，因此您不能提供片段網(wǎng)址讓 Googlebot 抓取。 我們建議您使用 History API 根據(jù) SPA 中的網(wǎng)址加載不同的內(nèi)容。

5、不要依賴數(shù)據(jù)持久性來提供內(nèi)容。

了解更多信息：和常規(guī)瀏覽器一樣，WRS 會加載每個網(wǎng)址（請參閱編入索引簡介，簡要了解 Google 如何發(fā)現(xiàn)內(nèi)容），并遵從服務(wù)器和客戶端重定向。不過，在網(wǎng)頁加載過程中，WRS 不會保留狀態(tài)：

在網(wǎng)頁加載過程中，系統(tǒng)會清除本地存儲空間和會話存儲空間中的數(shù)據(jù)。

在網(wǎng)頁加載過程中，系統(tǒng)會清除 HTTP Cookie。

6、使用內(nèi)容指紋避免 Googlebot 緩存問題。

了解更多信息：Googlebot 會主動緩存內(nèi)容，以減少網(wǎng)絡(luò)請求和資源使用量。WRS 可能會忽略緩存標(biāo)頭。這可能會導(dǎo)致 WRS 使用過時的 JavaScript 或 CSS 資源。為了避免這個問題，您可以創(chuàng)建內(nèi)容指紋，使其成為文件名的一部分（如 main.2bb85551.js）。 指紋取決于文件的內(nèi)容，因此每次更新都會生成不同的文件名。如需了解詳情，請參閱 web.dev 長效緩存策略指南。

7、確保您的應(yīng)用針對其所需的所有關(guān)鍵 API 使用功能檢測，并在適用情況下提供后備行為或 Polyfill。

了解更多信息：某些網(wǎng)頁功能可能不會被所有用戶代理采用，而一些用戶代理可能會刻意停用特定功能。例如，如果您在瀏覽器中使用 WebGL 呈現(xiàn)照片效果，功能檢測會顯示 Googlebot 不支持 WebGL。若要修復(fù)此問題，您可以跳過照片效果呈現(xiàn)步驟或使用服務(wù)器端呈現(xiàn)來預(yù)呈現(xiàn)照片效果，這樣一來，所有用戶（包括 Googlebot）都可訪問您的內(nèi)容。

8、確保您的內(nèi)容適用于 HTTP 連接。

了解更多信息：Googlebot 會使用 HTTP 請求從您的服務(wù)器檢索內(nèi)容。它不支持其他類型的連接，例如 WebSockets 或 WebRTC 連接。為避免此類連接出現(xiàn)問題，請務(wù)必提供用于檢索內(nèi)容的 HTTP 回退機(jī)制，并使用強(qiáng)大的錯誤處理和功能檢測機(jī)制。

9、確保網(wǎng)絡(luò)組件能按預(yù)期呈現(xiàn)。使用移動設(shè)備適合性測試或網(wǎng)址檢查工具檢查呈現(xiàn)的 Html 是否包含您期望的所有內(nèi)容。

了解更多信息：WRS 會扁平化 light DOM 和 shadow DOM。 如果您使用的網(wǎng)絡(luò)組件沒有針對 light DOM 內(nèi)容使用 <slot> 機(jī)制，請參閱相應(yīng)網(wǎng)絡(luò)組件的文檔以了解詳情，或使用其他網(wǎng)絡(luò)組件。如需了解詳情，請參閱網(wǎng)絡(luò)組件最佳做法。

10、修正此核對清單中的內(nèi)容后，請再次使用 Search Console 中的移動設(shè)備適合性測試或網(wǎng)址檢查工具測試您的網(wǎng)頁。

如果問題已解決，系統(tǒng)會顯示一個綠色對勾標(biāo)記，并且不會顯示任何錯誤。如果仍看到錯誤，請在 JavaScript Sites in Search Working Group 中發(fā)帖咨詢。