使用網頁開發人員工具對 Google 搜尋中的 JavaScript 問題進行偵錯

如何針對個別網頁或整個網站的搜尋引擎最佳化 (SEO) 問題進行偵錯。

Google 提供許多工具,可協助您針對 Google 搜尋中的 JavaScript 搜尋引擎最佳化 (SEO) 問題進行偵錯。本指南將概略說明可用的工具和建議,讓您瞭解各項工具的使用時機。

透過 Lighthouse 找出基本 SEO 問題

請使用 Lighthouse 首次調查。 這項服務提供多項搜尋引擎最佳化 (SEO) 稽核

Lighthouse 搜尋引擎最佳化 (SEO) 稽核的螢幕截圖。

Lighthouse SEO 稽核是基本的初步檢查,可檢查網站的單一網頁。它們會找出最常見的錯誤,讓您第一次瞭解網站在搜尋引擎曝光度上的表現。請注意,Lighthouse 會在瀏覽器中執行,這項功能無法準確呈現 Googlebot 看到的網頁。舉例來說,瀏覽器 (和 Lighthouse) 不會使用 robots.txt 判斷能否從網路擷取資源,Googlebot 則會使用。因此,當 Lighthouse 找出潛在問題時應修正問題,但可能必須改用其他工具進一步偵錯。

使用 Google 搜尋測試工具驗證網頁

Google 搜尋提供一組工具,可用來測試 Googlebot 所看到網頁內容的方式
在開發環境中進行測試時,其中部分工具特別有用:

如果搭配使用本機通道或 ngrok 等工具,您可以從本機開發環境建立臨時公開網址,並在使用 Google 的測試工具進行測試時快速疊代。

這些測試工具能為您提供多項實用的資訊,例如:

  • Googlebot 用於建立索引的轉譯 HTML
  • 已載入資源的總覽,以及無法載入資源的原因
  • 控制台記錄訊息和包含堆疊追蹤的 JavaScript 錯誤
行動裝置相容性測試的螢幕截圖。

Google Search Console 的網址檢查工具也提供網頁狀態的詳細資訊。

網址檢查工具的螢幕截圖。

您可以在這裡瞭解:

  • 如果網址已在 Google 搜尋索引中,或是日後能建立索引
  • 最近一次檢索的轉譯 HTML 呈現方式
  • 網頁重新檢索後的轉譯 HTML 程式碼
  • 網頁資源相關資訊
  • JavaScript 記錄訊息和含有堆疊追蹤的錯誤
  • 螢幕截圖
  • 行動裝置可用性問題
  • 系統在網頁上偵測到哪些結構化資料,以及該資料是否有效

您可以使用這些工具找出大多數問題並加以解決。此外,Google 搜尋也提供「修正 Google 搜尋相關的 JavaScript 問題」說明文件,讓您進一步瞭解發現問題原因後該採取哪些行動。

透過 Google Search Console 調查網站健康狀態

上一節中的工具可協助您解決網站上的單一網頁特定問題,但如果您想更全面瞭解網站的情況,請使用 Google Search Console

涵蓋範圍報表

涵蓋範圍報表會顯示網站的哪些網頁已編入索引,以及哪些網頁有問題。

涵蓋範圍報表的螢幕截圖。

網站使用體驗核心指標報告

網站體驗核心指標報告可協助您在 Core Web Vitals 中概略瞭解網站中的網頁成效。

Core Web Vitals 報表的螢幕截圖。

充分運用這些工具

在本文中,我們已介紹一系列用途,包括在發布網頁前進行測試、監控運作中網站上的網頁,讓您清楚瞭解網站在 Google 搜尋中的曝光度表現。其中有些工具可能成為您開發工具包的實用部分,其他工具則更類似可找出問題原因並修正受影響的頁面的臨時工具。如要進一步瞭解開發人員適用的 Google 搜尋或 JavaScript 搜尋引擎最佳化,請參閱官方的「搜尋開發人員」說明文件。