JavaScript SEOとは？Googleの処理と確認手順

この記事の要点：

JavaScript SEOとは、JavaScriptで表示するページを、検索エンジンが正しくクロール・レンダリング・インデックス登録できるようにする取り組みです。JavaScriptを使うこと自体が不利になるわけではありません。
Googleはページを取得したあと、順番待ちを経てJavaScriptを実行します。ステータスコードが200以外のページや、最初のHTMLにnoindexがあるページは、レンダリングされない場合があります。
title・robotsのメタタグ・canonical・本文・リンクは、できるだけ最初のHTMLに入れておくのが安全です。表示方式はSSRや静的生成を基本に考えます。
Googleの見え方は、Search Consoleの「URL検査」で、取得したHTMLとレンダリング後の状態を比べて確かめます。

JavaScript SEOとは：JavaScriptはSEOに不利なのか

JavaScript SEOとは、JavaScriptで本文やリンクを表示するサイトを、検索エンジンが正しくクロール・レンダリング・インデックス登録できるようにするための取り組みです。レンダリングとは、HTML・CSS・JavaScriptを実行して、ブラウザで見えるページの状態を作ることを指します。

結論から言うと、JavaScriptを使うこと自体は検索で不利になりません。Googleは最新のChromiumをもとにJavaScriptを実行し、レンダリング後の内容をインデックス登録に使うと説明しています（Google 検索セントラル：JavaScript SEO の基本を理解する）。

問題になるのは、Googleが内容を受け取る前に何かが途切れる場合です。例えば、レンダリングされなかった、必要なファイルを読み込めなかった、リンクとして認識されなかった、といったことです。JavaScript SEOの作業は、こうした「途切れる場所」を一つずつなくすことだと考えると整理しやすくなります。

よくある心配	実際のところ
JavaScriptのページはインデックスされない	Googleはレンダリングして読み取ります。ただし、レンダリングまでの間に失敗する箇所があると読まれません
ReactやVueを使うと順位が下がる	使う道具ではなく、Googleに届くHTMLの中身で決まります。表示方式と実装の確認が必要です
Google以外も同じように読める	JavaScriptをどこまで実行するかは、検索エンジンやサービスごとに異なります（後の節で説明します）

GoogleはJavaScriptのページをどう処理するか

Googleの説明では、JavaScriptを使うページは「クロール」「レンダリング」「インデックス登録」の3段階で処理されます。どの段階で何が起きるかを知っておくと、問題の場所を絞り込めます。

クロール：GooglebotがURLを取得します。先にrobots.txtを確認し、ブロックされたURLは取得しません。取得したHTMLの中のリンクも、この段階で見つけます。
レンダリング：ステータスコード200のページは、robotsのメタタグなどでインデックス登録しないよう指定されていない限り、レンダリングの順番待ちに入ります。順番待ちは数秒で終わることもあれば、それより長くかかることもあると説明されています。
インデックス登録：レンダリング後のHTMLをもとに内容を理解します。レンダリング後に現れたリンクも、クロールの対象になります。

処理の流れに関して、2025年12月にGoogleの説明が補われています。ステータスコードが200以外のページ（例：404のエラーページ）は、レンダリングが省かれる場合があります。また、最初のHTMLにnoindexがあると、レンダリングやJavaScriptの実行が省かれる場合があり、この動きは明確に定まっておらず変わる可能性があるとされています（Google 検索セントラル：ドキュメントの更新履歴）。

もう一つ知っておきたいのが、取得するファイルの大きさです。Googlebotは、Google検索のためのクロールでは、対応するファイルの最初の2MBまでを取得すると説明されています。圧縮前の大きさで数え、上限を超えた部分はインデックス登録の対象になりません。CSSやJavaScriptのファイルは、それぞれ別に数えられます（Google 検索セントラル：Googlebot）。HTMLの中に大きなスクリプトやデータを直接埋め込む作りでは、本文が後ろに押し出されていないかを確かめます。

CSR・SSR・SSGのどれを選ぶか

表示方式は、検索への影響が大きい選択です。最初のHTMLに本文やリンクが入っていれば、レンダリングが遅れたり失敗したりしても、内容の大部分はGoogleに届きます。ヘッドレスCMSを選ぶときに、表示方式とあわせて確かめる機能は「CMSとSEO」で説明しています。

方式	仕組み	最初のHTMLの中身	向いているページ
CSR（クライアントサイドレンダリング）	ブラウザでJavaScriptを実行してページを作る	本文がほとんど入っていないことが多い	ログイン後の管理画面など、検索に出す必要のないページ
SSR（サーバーサイドレンダリング）	アクセスのたびにサーバーでHTMLを作る	本文が入っている	在庫や価格がよく変わる商品ページ、検索結果の一覧
SSG（静的サイト生成）	公開前にHTMLを作っておく	本文が入っている	記事、会社案内、ヘルプなど更新が少ないページ
ISR（一定時間ごとの再生成）	静的なHTMLを、決めた間隔や更新時に作り直す	本文が入っている	記事数が多く、一部だけがよく更新されるサイト
ハイドレーション	SSRやSSGのHTMLに、ブラウザ側でJavaScriptの動きを付ける	本文が入っている	表示は静的に、操作は動的にしたいページ

ISRは主にフレームワークの機能の名前で、呼び方や細かな動きは製品によって異なります。採用する場合は、使っているフレームワークの公式ドキュメントで確かめてください。

選ぶときの判断は、次の順で考えると迷いにくくなります。

そのページは検索結果に出す必要があるか。出す必要がなければCSRでも構いません。
内容はアクセスのたびに変わるか。変わるならSSR、変わらないならSSGを考えます。
操作が多い画面か。多い場合も、本文と主なリンクはサーバー側で出し、操作の部分だけをJavaScriptで加えます。

ダイナミックレンダリングは使うべきか

ダイナミックレンダリングとは、クローラーにはサーバーで作ったHTMLを、利用者には通常のJavaScriptのページを返し分ける方法です。Googleはこれを「回避策」と位置づけ、推奨していません。仕組みが複雑になり、サーバーの負担も増えるためです。代わりにSSR、静的レンダリング、ハイドレーションを勧めています（Google 検索セントラル：回避策としてのダイナミックレンダリング）。すでに使っている場合は、表示方式を見直す機会に置き換えを検討します。

最初のHTMLに入れておくべきもの

上位の解説記事ではあまり触れられていませんが、検索に関わる指定を「最初のHTML」と「JavaScriptで変えたあと」のどちらに置くかは、結果を大きく左右します。2025年12月の更新で、noindexとcanonicalについてGoogleの説明がはっきりしました。

要素	おすすめの置き方	理由・注意
robotsのメタタグ（noindex）	インデックスしてほしいページでは、最初のHTMLにnoindexを入れない	最初のHTMLにnoindexがあると、レンダリングが省かれる場合があります。JavaScriptで外しても効かないことがあります
canonical	最初のHTMLとレンダリング後で同じURLにする。そろえられない場合は、最初のHTMLには書かない	正規化はレンダリングの前と後の両方で行われるため、食い違うと意図しないURLが選ばれることがあります
title・メタディスクリプション	最初のHTMLに入れる。JavaScriptで設定・変更することもできる	Googleは、JavaScriptで設定・変更したtitleやメタディスクリプションも扱えると説明しています。ただし、メタタグの説明ではJavaScriptでの追加・変更はできるだけ避け、使う場合は十分にテストするよう勧めています
本文・主な見出し	最初のHTMLに入れる	レンダリングの遅れや失敗の影響を受けにくくなります
サイト内リンク	href属性にURLを持つaタグで、最初のHTMLに入れる	クロールの段階で見つかり、レンダリングを待たずにたどれます
構造化データ（JSON-LD）	最初のHTMLに入れるのが確実。JavaScriptで追加する場合はテストで確かめる	JavaScriptで生成して追加する方法もGoogleは認めています

よくある問題と直し方

JavaScriptを使うサイトで起きやすい問題を、症状・原因・直し方の順にまとめます。多くは「Googleはページを操作しない」「Googleはページ間で状態を持ち越さない」という2つの性質から生まれます。

リンクがたどられない

Googleがたどるのは、href属性にURLがあるaタグのリンクです。クリック時の処理だけで移動する要素は、リンクとして扱われない場合があります（Google 検索セントラル：リンクに関するベストプラクティス）。

例：たどれるリンク
<a href="/blog/hreflang/">hreflangとは</a>

例：たどれない可能性があるリンク
<span onclick="goTo('/blog/hreflang/')">hreflangとは</span>
<a href="javascript:goTo('hreflang')">hreflangとは</a>

リンクの置き方の考え方は内部リンクの貼り方と設計で整理しています。

「#」で画面を切り替えている

URLの「#」以降（フラグメント）の違いで別の内容を出す作りは、Googlebotでは機能しません。Googleは、フラグメントの違いを同じページとして扱います。画面ごとに別の内容を出すシングルページアプリケーションでは、History APIを使って、画面ごとに通常のURLを持たせます。

存在しないページが200を返す

シングルページアプリケーションでは、存在しないURLでも「ページが見つかりません」という画面を200で返しがちです。これはソフト404と呼ばれます。Googleは、404を返すURLへリダイレクトするか、robotsのメタタグをnoindexにする方法を示しています。

操作やスクロールで初めて読み込まれる内容

Googleは、クリック・入力・スクロールなどの操作をしません。「もっと見る」を押して初めて読み込まれる本文は、見えない可能性があります。画像や本文の遅延読み込みは、画面に入ったときに読み込む方法など、利用者の操作に頼らない形にします。無限スクロールでは、区切りごとに固有のURLを用意します（Google 検索セントラル：遅延読み込みされたコンテンツの修正）。

ページ間の状態に頼っている

Googleのレンダリングの仕組みは、ページを読み込むたびにCookie・ローカルストレージ・セッションストレージの内容を消します。「前のページで選んだ地域を保存して、次のページで表示する」といった作りでは、Googleには内容が見えないことがあります。カメラや位置情報などの許可を求める処理も、Googleは許可しません。許可がなくても本文が表示されるようにします。

必要なファイルを読めない、古いファイルを読む

JavaScript・CSS・データを返すAPIをrobots.txtのDisallowでブロックすると、正しくレンダリングできません。
Googleはファイルを積極的にキャッシュし、キャッシュの指定を無視する場合があります。ファイル名に内容から作った識別子を付けると、古いファイルが使われるのを防げます。
WebSocketやWebRTCによる通信には対応していません。本文の取得には、通常のHTTPの通信も用意します。

この節の内容は、Googleの「検索関連の JavaScript の問題を修正する」というページにまとまっています（Google 検索セントラル：検索関連の JavaScript の問題を修正する）。

SPA（シングルページアプリケーション）のSEOで確かめること

SPAのSEOでは、画面ごとに通常のURLがあり、そのURLで本文・title・メタディスクリプションが読め、存在しない画面が404として扱われるかを確かめます。SPA（シングルページアプリケーション）とは、最初に1つのページを読み込み、その後の画面の切り替えをJavaScriptで行うウェブアプリの作り方です。衣料品の製造小売を指す「SPA」とは別の言葉です。

確かめること	Googleの説明	確かめ方
画面ごとのURL	フラグメント（#）ではなくHistory APIで画面ごとのURLを作る。リンクはhref属性のあるa要素にする	画面を切り替えたとき、「#」を使わずにURLが変わるか
title・メタディスクリプション	JavaScriptで設定・変更できる。ページごとに内容が伝わる独自のものにする	URL検査のレンダリング後のHTMLで、画面ごとに違う値か
canonical	JavaScriptで設定するなら、元のHTMLと同じ値にする	最初のHTMLとレンダリング後で値が同じか
存在しない画面	404を返すURLへ転送するか、noindexを付けてソフト404を避ける	存在しないURLを開き、転送先のステータスかnoindexを見る

出典はJavaScript SEO の基本を理解するです（2026年10月に確認）。同じ文書は、JavaScriptを実行できないボットもあるとして、サーバー側でのレンダリング（プリレンダリング）も有効な方法に挙げています。フレームワークでの設定は、使っている製品の公式ドキュメントで確かめます。

Googleにどう見えているかを確かめる手順

JavaScriptの問題は、ブラウザで見ているだけでは気づけません。Googleが受け取ったHTMLとレンダリング後の状態を、次の順に確かめます。

最初のHTMLを見る：ブラウザの「ページのソースを表示」で、title・robotsのメタタグ・canonical・本文・リンクが入っているかを見ます。コマンドで確かめる場合は、例：curl -s https://example.com/page/ | grep -i -E "canonical|robots|<title" のようにします。
レンダリング後の状態を見る：ブラウザのデベロッパーツールの要素表示は、JavaScript実行後の状態です。1と比べると、JavaScriptで追加・変更された部分が分かります。canonicalやnoindexが変わっていれば要注意です。
URL検査で確かめる：Search Consoleの「URL検査」にURLを入れ、「公開URLをテスト」を実行します。「テスト済みのページを表示」で、レンダリング後のHTML、スクリーンショット、読み込めなかったリソース、JavaScriptのメッセージを確認します（Search Console ヘルプ：URL 検査ツール）。
ステータスコードを確かめる：存在しないURLを試しに開き、404が返るかを見ます。200が返る場合はソフト404の対処が必要です。
インデックスの状況を見る：「ページのインデックス登録」レポートで、除外の理由を確かめます。

レンダリング後のHTMLに本文が無い場合、その本文はインデックス登録されません。

確かめ方で分かったこと	考えられる原因	次にすること
最初のHTMLにもレンダリング後にも本文が無い	APIの取得に失敗している、操作が必要な作り	読み込めなかったリソースとJavaScriptのメッセージを確認する
レンダリング後には本文があるが、インデックスされない	重複・品質の判断、noindex、canonicalの食い違い	URL検査で「Google が選択した正規 URL」とインデックスの状態を見る
スクリーンショットが崩れている	CSSやJavaScriptがブロックされている	robots.txtと、読み込めなかったリソースの一覧を確認する

Google以外の検索エンジンやAIのクローラーはどうか

この記事のJavaScriptの処理についての説明は、Googleの公式の説明にもとづくものです。ほかの検索エンジンや、AIのサービスが使うクローラーが、JavaScriptをどこまで実行するかは、サービスごとに異なります。公式に説明されていない場合、外から正確に確かめることはできません。

そのため、Google以外からも内容を読んでほしいページは、JavaScriptを実行しなくても本文とリンクが読める状態にしておくのが安全です。これは、SSRや静的生成を選ぶ理由の一つにもなります。AIの検索の仕組みは「AI検索とは」で説明しています。

各サービスのクローラーがJavaScriptを実行するかどうかは、それぞれの公式ドキュメントで確かめてください。説明が見つからない場合は「実行しない」前提で設計すると、見落としを防げます。

よくある質問

Next.jsやNuxtを使えばSEOの対策は不要ですか？

不要にはなりません。これらのフレームワークではSSRや静的生成を選べますが、ページごとの設定しだいでCSRにもなります。最初のHTMLに本文やcanonicalが入っているかを、ページの種類ごとに確かめてください。

レンダリングの順番待ちはどれくらいかかりますか？

Googleは、数秒で終わることもあれば、それより長くかかることもあると説明しており、具体的な時間は公表されていません。最初のHTMLに本文を入れておけば、待ち時間の影響を受けにくくなります。

JavaScriptで出した構造化データは使われますか？

Googleは、JavaScriptでJSON-LDを生成してページに追加する方法を認めています。ただし、レンダリングされなければ読まれないため、リッチリザルトテストやURL検査で、レンダリング後のHTMLに入っているかを確かめてください。

JavaScriptで出すリンクはSEOの効果がありませんか？

href属性にURLがあるaタグであれば、レンダリング後に現れたリンクもGoogleはたどれます。ただし、最初のHTMLにあるほうが早く見つかります。クリック時の処理だけで移動する要素は、リンクとして扱われない場合があります。

SEOAGENTでできること

SEOAGENTでは、robots.txtを1日1回読み、検索の表示に使われるクローラーと学習に使われるクローラーを分けて確認できます。表示速度は、実際の利用者のデータの判定と計測ツールの点数を分けて表示します。設定を自動で変更する機能ではなく、サイト側の対応を判断する材料として使います。

JavaScript SEOと関わるテクニカルSEOの記事は「テクニカルSEOの記事一覧」にまとめています。

JavaScript SEOとは？Googleの処理の流れと表示方式の選び方・確認手順