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

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

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

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

警告：請(qǐng)勿使用緩存鏈接調(diào)試網(wǎng)頁(yè)。建議改用網(wǎng)址檢查工具，因?yàn)樵摴ぞ邥?huì)檢查網(wǎng)頁(yè)的最新版本。

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

顯示示例

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

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

顯示示例

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

顯示示例

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

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

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

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

了解更多信息：SPA 可能會(huì)使用片段網(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 會(huì)加載每個(gè)網(wǎng)址（請(qǐng)參閱編入索引簡(jiǎn)介，簡(jiǎn)要了解 Google 如何發(fā)現(xiàn)內(nèi)容），并遵從服務(wù)器和客戶端重定向。不過，在網(wǎng)頁(yè)加載過程中，WRS 不會(huì)保留狀態(tài)：

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

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

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

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

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

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

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

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

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

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

10、修正此核對(duì)清單中的內(nèi)容后，請(qǐng)?jiān)俅问褂?Search Console 中的移動(dòng)設(shè)備適合性測(cè)試或網(wǎng)址檢查工具測(cè)試您的網(wǎng)頁(yè)。

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