JavaScriptのSEO：Googleに読ませる作り方

GoogleはJavaScriptを使うページを、クロール、レンダリング、インデックス登録の3段階で処理し、JavaScriptを実行したあとのHTMLにある内容とリンクを読みます。JavaScriptを使うこと自体は検索の妨げになりません。読めなくなるのは、Googleがたどれない書き方や、Googleが使わない機能に頼った作りのときです。

確かめる場所は、Search ConsoleのURL検査です。Googleが描いた画面と、レンダリング後のHTMLに、本文とリンクが出ているかを見ます。

この記事は、2026年10月25日⁠にGoogleのJS SEOの基本⁠と関連する資料を開いて確かめた内容です。

GoogleはJavaScriptをどう処理する？

公式の説明を順に追うと、次のようになります。

1. robots.txt でクロールが許されているかを確かめ、HTMLを取りに行く
2. 返ってきたHTMLから、href属性にあるURLを拾ってクロールの順番待ちに入れる
3. ステータスが200のページを、レンダリングの順番待ちに入れる
4. 空きができたら、ヘッドレスのChromiumでページを描き、JavaScriptを実行する
5. 描いたあとのHTMLからリンクを拾い直し、そのHTMLでインデックスに登録する

3の順番待ちについて、Googleは数秒間、またはそれ以上待つことがあると書いています。最初のHTMLに本文が入っていない作り（公式の言葉ではApp Shellモデル）⁠で⁠は⁠、Googleが内容を知るのはこのレンダリングのあとです。

robots.txt でJavaScriptのファイルを止めていると、そのファイルは実行されません。公式の説明にも、ブロックされたファイルはレンダリングしないとあります。画像やCSSと一緒に、/js/ のようなフォルダを止めていないかを見ます。

Googleは、サーバー側で描いておく作り（サーバーサイド レンダリングやプリ レンダリング）も、検討する価値があるとしています。人にもクローラーにも速く、JavaScriptを実行できないボットもあるからです。

リンクは、href付きのa要素で書く

Googleのリンクの説明は、通常は href属性を持つa要素のリンクだけをクロールできるとしています。推奨と非推奨の例は次のとおりです。

非推奨の書き方も、Googleは解析を試みることはあると書いています。ただ、それに頼る理由はありません。

製造業のサイトでよく見るのは、製品の一覧で、カードを押すとJavaScriptで製品ページへ移る作りです。人には動いていても、カードがa要素でなければ、Googleは製品ページへの道を見つけられないことがあります。Googleはサイト構造の説明で、ナビゲーションのためにa要素以外の要素でJavaScriptのイベントを使わないよう求めています。

ページの切り替えは、#でなくHistory APIで

1枚⁠のHTMLの中で画面を切り替える作り（シングルページ アプリ）⁠で⁠は⁠、https://example.com/#/products のように、#の後ろでページを分けることがあります。Googleはこれを避け、History APIで切り替えるよう求めています。

GoogleのJSの直し方の資料には、2015年⁠にAJAXクロールの仕組みが廃止されたので、Googlebotとの連携に#を使うことはできないとあります。History APIで切り替えれば、/products のような普通のURLになり、a要素のリンクとしてたどれます。

一覧の絞り込みを#で持つのは、検索に出さない前提なら使えるやり方です。絞り込みの扱いは絞り込みとSEO⁠で分けて書きました。

Googleが使わない機能に、本文を頼らない

同じ直し方の資料には、Googleのレンダリングで使えないものが並んでいます。

• 許可を求める機能：Googlebotは、カメラなどへのアクセス許可のリクエストを拒否するものとして扱う
• 保存した状態：ローカル ストレージ、セッション ストレージ、HTTP Cookie は、ページの読み込みのたびに消える
• HTTP以外の接続：WebSocketやWebRTCには対応していない
• 古いファイル：キャッシュの指定を無視することがあるので、ファイル名に中身の印を入れる。例は main.2bb85551.js

たとえば「最初に地域を選んでください」⁠と聞いて、その答えをローカル ストレージに入れてから製品を出す作りでは、Googleには毎回何も選ばれていない画面が見えます。検索に出したい本文は、選択をしなくても表示されるようにします。

noindex・canonical・エラーは、最初のHTMLで

JavaScriptで後から書き換えると、意図どおりに伝わらないものがあります。

noindex は、最初のHTMLに書くと、Googleがレンダリングを飛ばすことがあります。公式の説明では、JavaScriptでnoindexを外したり変えたりしても、想定どおりに動作しない可能性があるとしています。検索に出したいページは、最初のHTMLにnoindexを書きません。指定の基本はnoindexとは⁠にあります。

canonical は、HTMLで書くのがいちばんよいとされています。JavaScriptで書く場合も、元のHTMLと違うURLへ変えないようにします。canonicalが2本⁠になる実装の誤りにも注意します。考え方はcanonicalとは⁠で説明しました。

存在しない製品のURLで「見つかりません」⁠と表示しながら、ステータス200を返すシングルページ アプリもあります。Googleは、サーバーが404を返すURLへ転送するか、JavaScriptでnoindexを足す方法を示しています。在庫切れや空の一覧で起きる例はソフト404にまとめています。

titleと説明文、部品の中の本文

ページの題（title要素）⁠と説明文は、JavaScriptで設定したり変えたりできると、Googleは説明しています。ページごとに中身の分かる題と説明文を付けることが前提です。

Web Components で作った部品も、Googleは対応しています。レンダリングのときに Shadow DOM と Light DOM の中身を平らにまとめ、描いたあとのHTMLに出た内容だけを認識するという説明です。部品の中に置いた本文が、レンダリング後のHTMLに出ているかを、URL検査かリッチリザルトテストで確かめます。

ダイナミック レンダリングは回避策

ボットにだけサーバーで描いたHTMLを返す作りを、ダイナミック レンダリングと呼びます。Googleの公式の説明は、これを回避策と位置づけ、推奨される解決策ではないとしています。新しく作るなら、サーバーサイド レンダリング、静的なレンダリング、ハイドレーションのどれかを選びます。

どう確かめる？

Search ConsoleのURL検査に、製品ページや記事のURLを入れます。「公開 URL をテスト」⁠を押すと、Googleが描いた画面のスクリーンショットが見られます。「テスト済みのページを表示」からは、レンダリング後のHTML、JavaScriptのコンソールの出力、読み込まれたリソースを確かめられます。

見るのは次の3点です。

1. 本文と仕様の表が、レンダリング後のHTMLに入っているか
2. 一覧から製品ページへのリンクが、href付きのa要素で出ているか
3. コンソールにエラーが出て、途中で描画が止まっていないか

もう1つ手軽なのは、ブラウザの「ページのソースを表示」⁠で⁠す⁠。ここに出るのは最初のHTMLです。本文がここにあれば、レンダリングの順番待ちに左右されません。このサイトの記事ページを curl で取ると、最初のHTMLに本文の見出しと目次がそのまま入っていました（2026年10月25日に確認）⁠。

構造化データをJavaScriptで入れるときの確かめ方はJSON-LDの書き方に、JavaScriptの重さで表示が遅いときの見方はPSIの見方にあります。サイト全体の設計はサイト設計にまとめています。

仕様・出典の確認日：2026年10月25日⁠。