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

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

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

最初の調査には Lighthouse を使用します。 多数の SEO 監査が実施されます。

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

Lighthouse の SEO 監査は、ウェブサイトの 1 ページを対象としたごく基本的な最初のチェックです。検索エンジンの見つけやすさという点で、ウェブサイトのパフォーマンスに関する第一印象を与え、よくある間違いを検出します。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 の詳細については、デベロッパー向け検索の公式ドキュメントをご覧ください。