Google 検索で JavaScript の問題をデバッグするためのウェブ デベロッパー ツール

個々のページまたはサイト全体で SEO の問題をデバッグする方法。

Google 検索で JavaScript SEO の問題をデバッグするのに役立つツールが多数用意されています。このガイドでは、利用可能なツールの概要と、各ツールを使用するタイミングに関する推奨事項について説明します。

Lighthouse で基本的な SEO の問題を検出する

最初の調査には Lighthouse を使用します。さまざまなSEO 監査が用意されています。

Lighthouse の SEO 監査のスクリーンショット。

Lighthouse の SEO 監査は、ウェブサイトの単一ページに対する非常に基本的な最初のチェックです。最も一般的なミスを検出し、検索エンジンでの見つけやすさという観点からウェブサイトの状況を把握できます。Lighthouse はブラウザで実行されますが、Googlebot がウェブページをどのように認識するかを正確に反映しているわけではありません。たとえば、ブラウザ(および Lighthouse)は robots.txt を使用してネットワークからリソースを取得できるかどうかを判断しませんが、Googlebot は使用します。そのため、Lighthouse で潜在的な問題が特定された場合は、その問題を修正する必要がありますが、問題をさらにデバッグするには、他のツールを使用しなければならない場合があります。

Google 検索のテストツールでページを検証する

Google 検索には、Googlebot がウェブコンテンツをどのように認識しているかをテストするための一連のツールが用意されています。
これらのツールの中には、開発環境からテストする際に特に役立つものがあります。

local-tunnel や ngrok などのツールと組み合わせることで、ローカル開発環境から一時的な公開 URL を作成し、Google のテストツールでテストしながら迅速に反復処理できます。

これらのテストツールは、次のような役立つ情報を提供します。

  • Googlebot がインデックス登録に使用するレンダリングされた HTML
  • 読み込まれたリソースの概要と、リソースを読み込めない理由の説明
  • コンソール ログ メッセージとスタック トレースを含む JavaScript エラー
モバイル フレンドリー テストのスクリーンショット。

Google Search Console の URL 検査ツールでも、ページのステータスに関する詳細情報を確認できます。

URL 検査ツールのスクリーンショット。

以下を確認できます。

  • URL が Google 検索のインデックスに登録されているか、今後インデックスに登録される可能性があるかどうか
  • 最新のクロールからレンダリングされた HTML の例
  • ページの最新のクロール結果のレンダリングされた HTML の例
  • ページ リソースに関する情報
  • JavaScript のログ メッセージとスタック トレースが含まれるエラー
  • スクリーンショット
  • モバイル ユーザビリティに関する問題
  • ページで検出された構造化データと、その有効性

これらのツールを使用すると、ほとんどの問題を特定して解決できます。Google 検索には、Google 検索関連の JavaScript の問題を解決するためのドキュメントも用意されています。問題の原因を特定した後の対応方法について詳しく説明しています。

Google Search Console でサイトの健全性を調査する

前のセクションのツールは、ウェブサイトの 1 つのページに関する特定の問題を解決するのに適していますが、ウェブサイト全体の概要を把握するには、Google Search Console を使用する必要があります。

カバレッジ レポート

カバレッジ レポートには、ウェブサイトのどのページがインデックスに登録されているか、問題のあるページが表示されます。

カバレッジ レポートのスクリーンショット。

ウェブに関する主な指標レポート

Core Web Vitals レポートを使用すると、Core Web Vitals の観点からウェブサイトのページのパフォーマンスの概要を確認できます。

ウェブに関する主な指標レポートのスクリーンショット。

これらのツールをデベロッパー ツールに組み込む

この記事では、公開前にページをテストすることから、Google 検索での見つけやすさに関するウェブサイトのパフォーマンスを可視化するライブ ウェブサイト上のページのモニタリングまで、さまざまな目的のための一連のツールについて説明しました。これらのツールの中には、開発ツールキットの有用な部分になるものもあれば、問題の原因を特定して影響を受けるページを修正するためのアドホック ツールに近いものもあります。Google 検索デベロッパー向けまたは JavaScript SEO の詳細については、デベロッパー向け検索の公式ドキュメントをご覧ください。