JavaScript SEO：JSページをインデックスさせる

インデックス登録は2つの波で行われる

Googlebotはまず生のHTMLを取得し、その初回レスポンスにすでに存在するコンテンツはほぼ即座にインデックス登録できます。JavaScriptが実行された後にしか現れないものは、レンダリングと呼ばれる2回目のパスにキューイングされます。これは別のリソースを使用し、クロール制約のあるサイトでは初回クロールから数秒から、場合によってはそれよりはるかに長く遅れることがあります。コンテンツや内部リンクがその2回目のパスの後にしか存在しない場合、そもそもインデックス登録される確率がより低く不確実な経路に頼っていることになります。

実際にインデックス登録を壊すもの

• 初期HTMLに何も有意義な内容がないまま、クライアント側のフェッチの後にしかレンダリングされないメインコンテンツや内部リンク。
• クリック、スクロール、ホバーといった、Googlebotが行う理由のないユーザー操作の後ろにゲートされたコンテンツ。
• ページが正しくレンダリングするために必要なJSやCSSファイルがrobots.txtでブロックされている — ブロックがどう裏目に出るかについてはrobots.txt vs noindexをご覧ください。
• 実際のHTTPステータスを一切変えないクライアントサイドルーティング — 壊れたルートは200を返し続けながら空白または「見つかりません」というメッセージを表示することがあり、これはソフト404として現れます。
• ヘッドレスブラウザ環境でのみ発生し、通常の手動テストでは気づかれずに見過ごされるハイドレーションやレンダリングのエラー。

Googleが実際に見ているものを確認する方法

Search ConsoleのURL検査ツールには、生のレスポンスだけでなく、Googleのレンダラーが実行した後のレンダリング済みHTMLとスクリーンショットを表示する「テスト済みページ」ビューがあります。それをソースHTMLと比較してみてください。重要なコンテンツやリンクが生のレスポンスにはなく、レンダリング後にのみ存在する場合、あなたは高速な初回クロールではなく、完全にレンダリングキューに依存していることになります。

実際に役立つこと

• SEOにとって重要なコンテンツとナビゲーションリンクは、読み込み後にクライアントサイドで取得するのではなく、サーバーサイドレンダリング（または静的生成）してください。
• 内部リンクには、非アンカー要素へのクリックハンドラーではなく、実際の<a href>要素を使用してください — Googlebotは任意のJavaScriptイベントバインディングではなく、hrefをたどります。
• ページのレンダリングに依存しているJS/CSSバンドルをブロックしないでください — Googleがページを実際にレンダリングするには、それらを取得する必要があります。
• ページを修正したら、次のレンダリングパスをただ待つのではなく、直接再インデックスをリクエストするか、IndexNow経由でURLをプッシュして、レンダラーのキューではなくあなたのスケジュールで修正版が拾われるようにしてください。

フレームワーク別の注意点

• クライアントサイドのReactアプリ：素のシングルページアプリケーションは、ほぼ空のHTMLシェルを送信します。上位表示が必要なページには、サーバーレンダリングまたは静的生成に対応したフレームワークを使いましょう。
• Next.jsとNuxt：サーバーレンダリングと静的生成では、デフォルトでコンテンツが初期HTMLに含まれます。重要なコンテンツがクライアントサイドのエフェクトでしか読み込まれていないケースに注意してください。
• AngularとVue：Angularのサーバーサイドレンダリング、またはVueならNuxtを使い、ページがコンテンツを含んだHTMLの状態で届くようにしましょう。
• 無限スクロール：単独で読み込めるページ分割URLと組み合わせ、クローラーが最初の画面より先のアイテムにも到達できるようにしましょう。

今日すぐにできる簡単なテスト

ページを開き、（「検証」ではなく）「ページのソースを表示」を選び、メインコンテンツ内の一文といくつかの内部リンクURLを検索します。ソースに見つからなければ、それらはJavaScriptに依存しています。次に、無料のインデックス可能性チェックを実行し、ページが200を返すこと、noindexが設定されていないこと、canonicalが正しいことを確認しましょう。