レンダリング
GoogleのWebレンダリングサービスが、インデックスするページを構築するためにJavaScriptを実行する仕組みと、レンダリングオプション(CSR、SSR、SSG、ハイドレーション、ISR、エッジ、動的)とそのSEO上のトレードオフについて解説します。
言語
このページには証拠シグナルが1件あります
- 関連するライブツールRaw vs. Rendered HTML Checker
レンダリングとは、GoogleがインデックスするDOMを構築するために、常緑のヘッドレスChrome(Webレンダリングサービス)でJavaScriptを実行するステップです。これは基本的にすべてのページで発生し、通常は数秒から数分以内に行われるため、古い「2段階のインデックス」モデルはほぼ時代遅れであり、ページごとのレンダリング予算はありません。レンダラーはステートレスで、ページと対話せず、ハードにキャッシュします。レンダリングオプションによってSEOリスクが決まります。SSR、静的/プリレンダリング、ハイドレーションは安全です。完全なクライアントサイドレンダリングはリスクが高く、動的レンダリングは回避策です。
TL;DR — レンダリングとは、検索エンジンがページのコード(JavaScript を含む)をブラウザで実行して完成したページを構築し、コンテンツやリンクを認識できるようにするステップです。Google は基本的にすべてのページに対してこれを Web Rendering Service で行っており、通常は正常に機能します。サイトが HTML をどのように生成するか(サーバー、ブラウザ、ビルド時)によって、安全性が決まります。
レンダリングとは
ページを開くと、ブラウザは HTML をダウンロードし、CSS と JavaScript を実行して、実際に表示されるページを構築します。検索エンジンも同じことを行います。レンダリングとは、検索エンジンがページのコードを実行して最終版のページを構築し、あなたと同じようにコンテンツを読み取り、リンクをたどれるようにするステップです。
これは Google がページを処理する過程の中間に位置します:
- クロール — Google が URL の生の HTML をダウンロードします。
- レンダリング — Google がブラウザでページの JavaScript を実行して完成したページを構築します。
- インデックス — Google がその完成したページを読み取り、保存します。
コンテンツが JavaScript の実行後にしか表示されない場合、Google はそれを認識する前にページを正常にレンダリングする必要があります。つまり、レンダリングはページを取得することと理解することの間の橋渡しです。
Google は実際の(ただし特殊な)ブラウザでレンダリングする
Google のレンダラーは Web Rendering Service (WRS) と呼ばれます。これはヘッドレス Chrome であり、“エバーグリーン”、つまり最新の Chrome バージョンに対応し、最新のウェブ機能をサポートします。したがって、“Google は JavaScript を実行できない”という古い懸念は当てはまりません。実行できます。 Evidence for this claim Google Search runs JavaScript with an evergreen version of Chromium. Scope: Google's Web Rendering Service; browser support does not guarantee that every application-specific interaction or resource will work. Confidence: high · Verified: Google Search Central: Fix Search-related JavaScript problems
ただ、特殊なブラウザです。スクロールやクリックはせず、ページ間の情報をすべて忘れ(ログイン状態は保持されない)、ファイルを強力にキャッシュします。これらの癖がほとんどの驚きの原因であり、詳細タブで説明しています。
大きな選択:HTML がどこで構築されるか
SEO にとって最も重要な決定は、ページの HTML がどこで生成されるかです:
- ブラウザ内(クライアントサイドレンダリング) — サーバーはほぼ空のページを送信し、JavaScript がすべてを構築します。検索にとって最もリスクが高いです。
- サーバー上(サーバーサイドレンダリング) — サーバーは完全なページを送信します。安全です。
- ビルド時(静的 / プリレンダリング) — ページは事前に一度だけ構築されます。最も安全で最速です。
ほとんどの最新フレームワークはこれらを組み合わせています。経験則:重要なコンテンツが JavaScript の実行前に HTML に含まれている(またはほぼ即座に表示される)場合、良好な状態です。
より深いバージョン(Web Rendering Service が実際にどのように動作するか、“2 段階インデックス”がまだ存在するか、すべてのレンダリングオプションの完全な比較)が必要ですか?詳細タブに切り替えてください。実践的な JavaScript の問題と修正については、JavaScript SEO を参照してください。
TL;DR — Google は、エバーグリーンでヘッドレスの Chromium(Web Rendering Service)で JS をレンダリングし、インデックスする DOM を構築します。これは基本的にすべてのページで発生し、通常は数秒から数分以内に行われるため、“2 段階インデックス”はほぼ時代遅れであり、ページごとのレンダリング予算はありません。WRS はステートレスで、権限プロンプトを拒否し、ページと対話せず、積極的にキャッシュします。レンダリングオプションが SEO リスクを決定します:SSR / 静的 / プリレンダリング / ハイドレーションは低リスク、完全な CSR はリスクが高く、動的レンダリングは Google が推奨しない回避策です。これによって生じる実践的な JS の問題については、JavaScript SEO を参照してください。
レンダリングの位置づけ
Googleは、JavaScriptアプリが3つのフェーズを経ることを明確に述べています:「Googleは JavaScriptウェブアプリを3つの主要なフェーズで処理します:1. クロール 2. レンダリング 3. インデックス。」 Evidence for this claim Google documents crawling, rendering, and indexing as the three main phases for processing JavaScript web apps. Scope: Google Search processing of JavaScript web applications; the phases can overlap operationally. Confidence: high · Verified: Google Search Central: Understand the JavaScript SEO basics レンダリングは橋渡しです。クロールは生のHTMLを取得し、レンダリングはJavaScriptを実行して 完成したDOMを構築し、インデックスはそのレンダリングされたDOMを読み取り、レンダラーが見つけた新しいリンクは クロールにフィードバックされます。Googleの言葉を借りれば:「クロール中、 Googleはページをレンダリングし、見つけたJavaScriptを最新バージョンの Chromeで実行します。これは、ブラウザが訪問したページをレンダリングする方法と似ています。」
Google crawls a URL, renders its JavaScript to build the DOM, and indexes the result. Four practical failure modes branch from rendering: parity when the rendered DOM differs from expectations, interaction when content requires a scroll or click, state when content relies on cleared cookies or storage, and timing when content is deferred behind slow JavaScript.
© Patrick Stox LLC · CC BY 4.0 ·
Webレンダリングサービス
Googleは**Webレンダリングサービス(WRS)**でレンダリングします。これはヘッドレスChromeで、 エバーグリーンです:「Google検索はエバーグリーン版のChromiumでJavaScriptを実行します…」 現在のChromeに追従しているため、最新のJavaScriptおよびCSS機能が動作します。
問題は、WRSが特殊なブラウザであり、その癖が実際の問題のほとんどを引き起こすことです:
- ステートレスです。 私がJavaScript SEOガイド で述べたように、 「Googleは各ページを新しい読み込みのようにステートレスで読み込みます。」 Googleのドキュメントはその構成要素を明確にしています:「ローカルストレージとセッションストレージのデータはページ読み込み間でクリアされます」 および*「HTTP Cookieはページ読み込み間でクリアされます。」* コンテンツを提供するためにクライアント側で永続化されたものに依存しないでください。
- 権限を拒否します。 「Googlebotがユーザー権限リクエストを拒否することを期待してください。」 地理位置情報、通知、またはカメラのプロンプトの背後にあるコンテンツはレンダリングされません。
- 操作しません。 スクロール、クリック、ホバーはありません。そのため、これらのイベントのいずれかでのみ読み込まれるコンテンツは、デフォルトでは見えません。(これは、ほとんどの遅延読み込みおよび無限スクロールのバグの根本原因です。修正はJavaScript SEOページにあります。)
- 積極的にキャッシュします。 「Googlebotはネットワークリクエストとリソース使用量を減らすために積極的にキャッシュします。WRSはキャッシュヘッダーを無視する場合があります。」 つまり、Googleは古いバージョンのJSまたはCSSを実行する可能性があります。ファイルフィンガープリンティングで修正します。ファイル名をバージョン管理し(
app.4f2a9c.js)、コンテンツの変更が新しいフェッチを強制するようにします。
2026年の実験:5秒は厳格な実行の壁ではない
2026年7月に報告されたサードパーティのWRS実験では、5秒のタイムアウトを想定するのではなく、遅延したJavaScriptとネットワークアクティビティをテストしました。観察されたレンダラーは仮想クロックを使用し、実時間で約6〜12秒かかる遅延リクエストを完了しました。有用な結果は狭いものです:正確に5秒後に発生するものはすべてGoogleに自動的に見えないという一般的な監査ルールに矛盾します。すべての遅延依存関係が完了すること、Googleが無期限に待つこと、または遅いクライアント側配信が安全であることを証明するものではありません。
Googleの公式声明(レンダーキューのタイミングに公開された固定遅延はない)とともに、実験とその方法論 をサードパーティの証拠として読んでください。実際には、最終的なDOMと要求されたリソースをテストしてください。APIレスポンスの欠落、操作要件、ブロックされたスクリプト、または状態依存性は、ストップウォッチベースの「5秒ルール」が適用されない場合でも、実際のレンダリング失敗のままです。
「2波のインデックス」はまだ存在するのか?
長年、メンタルモデルは**「2波のインデックス」**でした:Googleは最初に生のHTMLをインデックスし、その後数日または数週間後に戻ってきてJavaScriptコンテンツをレンダリングしてインデックスするというものです。そのモデルは現在、ほぼ時代遅れです。Martin Splittは、2波のアイデアはますます役割を果たさなくなっており、多くのページがJavaScriptに依存していなくてもレンダーフェーズを通過し、クロール、レンダリング、インデックスは時間とともに収束していると述べています。
実際には、レンダリングはほぼすべてのページで行われ、通常は高速です。 Googleの現在のドキュメントには、“The page may stay on this queue for a few seconds, but it can take longer than that.” (翻訳) 「ページはこのキューに数秒間留まる場合がありますが、それ以上かかることもあります」とあります。公開されている固定の遅延やタイムアウトはありません。 Evidence for this claim Google says a crawled page may stay on the rendering queue for a few seconds, but it can take longer than that. Scope: Google's rendering queue for a page that returns a 200 status and is eligible for rendering. The source gives a variable duration, not a fixed timeout or service-level guarantee. Confidence: high · Verified: Google Search Central: rendering-queue duration Supports: A page may remain on the rendering queue for a few seconds or longer. 歴史的なデータポイントとして、Googleのスタッフ(Martin Splitt氏とTom Greenaway氏)はかつて、中央値で約5秒、90パーセンタイルで数分と述べています — 古い懸念が示唆していた「数週間」ではありません。私はその数値をJavaScript SEOガイド で引用していますが、現在の公開メトリクスではなく、日付のあるカンファレンスのデータポイントとして扱ってください — Googleはそれを継続的な数値として再公開しておらず、上記のキュータイミングの引用が現在の公式な枠組みです。
そして、人々が想像するようなレンダリング予算はありません。Googleは、節約する必要のあるページごとの「レンダリングにどれだけコストがかかったか」というスコアを追跡していません。レンダリングはGoogleのスケールでは安価です — 幻のレンダリング予算ではなく、ユーザーとパフォーマンスのために最適化してください。
レンダリングのオプション
「HTMLはどこで構築されるのか?」という質問が、SEOリスクを左右します。完全なメニューは次のとおりです:
Static generation produces HTML at build time. Server-side rendering produces it per request. Client-side rendering relies on browser JavaScript. Hydration attaches client behavior to server or static HTML. Dynamic rendering varies output by requester and is treated as a workaround.
© Patrick Stox LLC · CC BY 4.0 ·
- クライアントサイドレンダリング(CSR)。 サーバーはほぼ空のシェルを送信し、ブラウザ(またはWRS)がJavaScriptを実行してすべてを構築します。これは*「最も問題のあるもの…すべてのレンダリングがブラウザで行われる完全なクライアントサイドレンダリング」*です。機能する可能性はありますが、レンダリングの成功にすべてを賭けており、インデックスされるまで最も遅い方法です。
- サーバーサイドレンダリング(SSR)。 サーバーは各リクエストに対して完全なHTMLを構築します。コンテンツは生のHTMLにあるため、検索にとってリスクが低いです。
- 静的サイト生成(SSG)/プリレンダリング。 HTMLはデプロイ時に一度構築されます。最もリスクが低い — コンテンツは生のHTMLにあり、かつ高速です。
- ハイドレーション(アイソモーフィック/ユニバーサル)。 最初のペイントをSSRまたはSSGで行い、その後ブラウザでJavaScriptが「ハイドレーション」してインタラクティブ性を追加します。これはほとんどの最新フレームワークが行う方法で、コンテンツにとってリスクは低いです — コンテンツを空白にしたり置き換えたりするハイドレーションの不一致に注意してください。
- インクリメンタル静的再生成(ISR)。 スケジュールまたはオンデマンドで再生成される静的ページ。SSGと同様ですが、コンテンツがより新しい — 大規模なカタログに適しています。
- エッジレンダリング。 CDNエッジノードで実行されるSSR — SSRと同じ低リスクで、グローバルなオーディエンスに対してより高速な初回バイトまでの時間を実現します。
- ストリーミングSSR。 HTMLは準備ができ次第、チャンク単位でブラウザにストリーミングされます。低リスクですが、インデックス可能なコンテンツが遅延または後回しにされたチャンクにのみ閉じ込められていないことを確認してください。
私のJavaScript SEOガイド からの結論:「あらゆる種類のSSR、静的レンダリング、プリレンダリングの設定は、検索エンジンにとって問題ありません。Gatsby、Next、Nuxtなどはすべて素晴らしいです。」 フレームワークよりも、提供するレンダリングモードの方が重要です — 同じNext.jsアプリでも、SSR/SSGを提供するか完全なCSRを提供するかによって、安全かリスクがあるかが決まります。
動的レンダリング — 回避策であり、戦略ではない
動的レンダリングとは、ボットを検出して、彼らにプリレンダリングされたJavaScriptなしのバージョンを提供し、ユーザーにはクライアントサイドバージョンを提供することを意味します。Googleは現在、それについて率直です:「動的レンダリングは回避策であり、検索エンジンにおけるJavaScript生成コンテンツの問題に対する長期的な解決策ではありません」、そして*「動的レンダリングは回避策であり、追加の複雑さとリソース要件を生み出すため、推奨される解決策ではありません。」* Evidence for this claim Google describes dynamic rendering as a workaround and does not recommend it as a long-term solution. Scope: Google Search guidance for JavaScript-generated content; server-side rendering, static rendering, or hydration are the recommended alternatives. Confidence: high · Verified: Google Search Central: Dynamic rendering as a workaround 私も同意します。そして、私は常にそうしてきました — 正直に言うと、私はそれを推奨したことはなく、Googleも今それを推奨しないことを嬉しく思います。それはボットとユーザーに異なるコンテンツを提供することであり、クローキングに非常に近いものです。代わりにSSR、静的、またはハイドレーションを利用してください。
ひとつ注意点があります。Bingは今でも動的レンダリングを推奨しています。 Microsoftは*“bingbot is generally able to render JavaScript”* (翻訳) 「bingbotは通常JavaScriptをレンダリングできる」と述べていますが、それを大規模に行うのは難しいため、“we recommend dynamic rendering as a great alternative for websites relying heavily on JavaScript.” (翻訳) 「JavaScriptに大きく依存するウェブサイトには、ダイナミックレンダリングを優れた代替手段として推奨します」としています。実際的な結論としては、SSR/SSGは両方のエンジンを満足させ、この議論全体を回避できます。
これがあなたのコンテンツに意味すること
レンダリングは、GoogleがあなたのJavaScriptコンテンツを見るかどうかを決定します。しかし、見ることは仕事の半分にすぎません。ページがレンダリングされると、実際的な懸念は、実際の<a href>リンク、生のHTMLとレンダリングされたHTMLのフィールドごとのパリティ、robotsディレクティブのステージ順序、遅延コンテンツ、無限スクロール、ソフトエラーページです。これらはすべてJavaScript SEOページにあり、テストワークフロー(URL InspectionのレンダリングされたHTML、スクリーンショット、コンソール)もそこにあります。
これは検索パイプラインのレンダリング段階です。周囲の段階については、クロール(ページがどのように取得されるか)とインデックス(レンダリングされたページが次にどうなるか)を参照するか、全体の流れについては検索の仕組みハブを参照してください。
ここで覚えておく価値のある監査ルールが1つあります。レンダリングは状態であり、普遍的な勝者ではありません。 本文コンテンツとクロール可能なリンクについては、レンダリングされたDOMは、成功したJavaScriptが追加または削除したものを示します。タイトルと説明については、追加の入力を示しますが、Googleは他のソースからタイトルリンクやスニペットを生成する場合があります。robotsディレクティブについては、生のnoindexがレンダリングを防ぐ可能性があるため、JavaScriptによる削除は非対称です。正規化については、Googleは既存の値を変更するのではなく、1つのソースまたは1つのJavaScript設定値を使用することを推奨しています。また、JavaScriptはすでに受信したHTTPレスポンスステータスを変更できません。証拠ではこれらの列を分けておき、フィールド固有の動作についてはGoogleの現在のJavaScript SEOガイダンス を使用してください。
AIまとめ
Advancedバージョンの簡潔な見解:
- レンダリング = クロールからインデックスへの橋渡し。 GoogleはあなたのJSを、インデックスするDOMを構築するために、常緑のヘッドレスChromium(Web Rendering Service)で実行します。3つのフェーズ:クロール → レンダリング → インデックス。
- 「2波のインデックス」はほぼ時代遅れ(Splitt)。レンダリングは基本的にすべてのページで行われ、通常は高速です。Googleの現在のドキュメントには、“The page may stay on this queue for a few seconds, but it can take longer than that.” (翻訳) 「ページはこのキューに数秒間留まる場合がありますが、それ以上かかることもあります」とあり、固定された遅延は公開されていません。(約5秒の中央値/90パーセンタイルの分数という数値は存在しますが、それは古い会議のデータポイントであり、現在の指標ではありません。)ページごとのレンダリング予算はありません。
- WRSは奇妙なブラウザです: ステートレス(ロード間でlocalStorage/cookieがクリアされる)、権限プロンプトを拒否する、スクロール/クリック/ホバーしない、JS/CSSを積極的にキャッシュする(キャッシュヘッダーを無視する場合がある)→ ファイル名にフィンガープリントを付けてください。
- レンダリングオプション(SEOリスク別): SSG/プリレンダリング(最も低い)≈ SSR ≈ ハイドレーション ≈ ISR ≈ エッジ/ストリーミング(低い)≪ 完全なCSR(最も高い)。Patrick:「SSR、静的レンダリング、プリレンダリング…はすべて素晴らしい」;完全なCSRは「最も問題のあるもの」です。
- 動的レンダリングは回避策であり、Googleはそれに反対しています(クローキングに近い)。Bingは今でもそれを推奨しています — しかし、SSR/SSGは両方を満たします。
- リスクを決定するのはフレームワークではなく、レンダリングモードです。 同じアプリでも、SSR/SSGを提供するか完全なCSRを提供するかによって、安全にもリスクにもなります。
- レンダリングは仕事の半分です — 実際のJSの問題(リンク、パリティ、遅延コンテンツ、無限スクロール、ソフトエラーページ、テスト)はJavaScript SEOページでカバーされています。
公式ドキュメント
検索エンジンからの一次情報ドキュメント。
- JavaScript SEOの基礎を理解する — 3つのフェーズ(クロール → レンダリング → インデックス)と、常に最新のChromiumレンダラーについて。
- 検索関連のJavaScriptの問題を修正する — WRSの制約:ステートレスなストレージ/クッキー、拒否される権限、積極的なキャッシュ。
- 回避策としての動的レンダリング — 動的レンダリングが推奨される長期的な解決策ではなく、回避策である理由。
- Google検索の仕組みの詳細ガイド — クロール → インデックス → 配信の中でレンダリングがどこに位置するか。
Bing / Microsoft
- bingbotシリーズ:JavaScript、動的レンダリング、クローキング。あらまあ! — BingはJSをレンダリングできるが、大規模には動的レンダリングを推奨するという立場。
- 新しい常に最新のBingbot — ChromiumベースのMicrosoft EdgeでのBingbotレンダリング。
ソースからの引用
GoogleとBingからの公式声明(および私自身の執筆からのいくつか)。各検索エンジンのリンクは、ソースページの引用箇所にジャンプするディープリンクです。
Google — レンダリングパイプライン
- “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” (翻訳) 「GoogleはJavaScriptウェブアプリを3つの主要なフェーズで処理します:1. クロール 2. レンダリング 3. インデックス。」 引用にジャンプ
- “During the crawl, Google renders the page and runs any JavaScript it finds using a recent version of Chrome, similar to how your browser renders pages you visit.” (翻訳) 「クロール中、Googleはページをレンダリングし、見つけたJavaScriptを最近のバージョンのChromeで実行します。これは、ブラウザが訪問したページをレンダリングする方法と似ています。」 引用にジャンプ
- “While Google Search runs JavaScript with an evergreen version of Chromium…” (翻訳) 「Google検索が常に最新のChromiumバージョンでJavaScriptを実行する一方で…」 引用にジャンプ
- “The page may stay on this queue for a few seconds, but it can take longer than that.” (翻訳) 「ページはこのキューに数秒間留まる場合がありますが、それ以上かかることもあります」— レンダリングキューのタイミングに関する現在の公式見解。固定された遅延は公開されていません。 引用にジャンプ
Google — Webレンダリングサービス
- “Local Storage and Session Storage data are cleared across page loads.” (翻訳) 「ローカルストレージとセッションストレージのデータは、ページ読み込みのたびにクリアされます。」 引用にジャンプ
- “HTTP Cookies are cleared across page loads.” (翻訳) 「HTTPクッキーはページ読み込みのたびにクリアされます。」 引用にジャンプ
- “Expect Googlebot to decline user permission requests.” (翻訳) 「Googlebotがユーザーの権限リクエストを拒否することを想定してください。」 引用にジャンプ
- “Googlebot caches aggressively in order to reduce network requests and resource usage. WRS may ignore caching headers.” (翻訳) 「Googlebotはネットワークリクエストとリソース使用量を減らすために積極的にキャッシュします。WRSはキャッシュヘッダーを無視する場合があります。」 引用にジャンプ
Google — 動的レンダリング
- “Dynamic rendering was a workaround and not a long-term solution for problems with JavaScript-generated content in search engines.” (翻訳) 「ダイナミックレンダリングは、検索エンジンにおけるJavaScript生成コンテンツの問題に対する回避策であり、長期的な解決策ではありませんでした。」 引用にジャンプ
- “Dynamic rendering is a workaround and not a recommended solution, because it creates additional complexities and resource requirements.” (翻訳) 「ダイナミックレンダリングは回避策であり、追加の複雑さとリソース要件を生み出すため、推奨される解決策ではありません。」 引用にジャンプ
Microsoft Bing
- “bingbot is generally able to render JavaScript…” (翻訳) 「bingbotは一般的にJavaScriptをレンダリングできます…」 引用にジャンプ
- “we recommend dynamic rendering as a great alternative for websites relying heavily on JavaScript.” (翻訳) 「JavaScriptに大きく依存するウェブサイトには、ダイナミックレンダリングを優れた代替手段として推奨します。」 引用にジャンプ
Martin Splitt、Google (Onelyによる2019年Webmaster Centralハングアウトの書き起こしを経由して伝達)
- 2つの波のモデルについて:Splittは、その役割はますます小さくなっており、多くのサイトはJavaScriptなしでもレンダリングフェーズを通過し、クロール、レンダリング、インデックスが収束しつつあると述べています。 報道を読む
Patrick Stox (私自身の著作 — JavaScript SEO: 決定版ガイド)
- “Google loads each page stateless like it’s a fresh load.” (翻訳) 「Googleは各ページをステートレスに、まるで新しい読み込みのように読み込みます。」
- “pages went to the renderer at a median time of five seconds” (翻訳) 「ページは中央値で5秒でレンダラーに送られました」 (90パーセンタイルは数分) — これは古いカンファレンス時代のデータポイントであり、現在の公式メトリクスではありません。上記の現在の公式キュー待ち時間の引用を参照してください。
- “The most problematic one is going to be full client-side rendering where all of the rendering happens in the browser.” (翻訳) 「最も問題となるのは、すべてのレンダリングがブラウザで行われる完全なクライアントサイドレンダリングでしょう。」
- “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (翻訳) 「SSR、静的レンダリング、プリレンダリングの設定はどれも検索エンジンにとって問題ありません。Gatsby、Next、Nuxtなどはすべて素晴らしいです。」
メンタルモデル
1. クロール → レンダリング → インデックス。 レンダリングは橋渡しです。クロールは生のHTMLを取得し、レンダリングはJSを実行してDOMを構築し、インデックスはそのDOMを読み取ります。JSコンテンツが欠落している場合、どのステップが失敗したかを尋ねてください — 取得されましたか?レンダリングされましたか?レンダリングされたDOMにコンテンツが含まれていましたか?
2. レンダラーは記憶喪失の本物のブラウザです。 Evergreen Chromeですが、ステートレス(ページ間でCookieやストレージを忘れる)、インタラクションなし(スクロールやクリックをしない)、キャッシュを多用(古いJS/CSSを実行する可能性がある)です。毎回の訪問が新鮮で未接触の最初の読み込みであるかのように設計してください。
3. レンダリングモードがリスクを決定し、フレームワークは決定しません。 SSR、静的、プリレンダリング、ハイドレーションはすべてコンテンツをDOMに(またはすぐにDOMに)配置します — リスクは低いです。完全なCSRはすべてをレンダリングに賭けます — 最も高いリスクです。同じNext.jsアプリでも、どのモードで配信するかによって安全にも危険にもなります。
4. 「2つの波」は古い地図です。 数日後の遅延した第2のレンダリングの波に備えて計画を立てないでください。レンダリングは基本的にすべてのページで発生し、通常は数秒から数分以内です — そして配分すべきレンダリング予算はありません。
5. ダイナミックレンダリングは戦略ではなく、臭いです。 ボットにユーザーとは異なるHTMLを提供することは、Googleが推奨しない回避策であり(クローキングに近い)、実際の修正は通常SSR/SSGです。
6. コンテンツをDOMに取り込み、その後で検証する。 レンダリングされたDOMにコンテンツを素早く配置するモードを選択し、URL Inspectionのレンダリング済みHTMLで確認します。あなたのブラウザはGooglebotではありません。
レンダリングオプション — SEOのトレードオフ
| オプション | HTMLが構築される場所 | SEOリスク | 使用するケース |
|---|---|---|---|
| CSR(クライアントサイド) | ブラウザ/WRSがJSを実行。サーバーはシェルを送信 | 最も高い — レンダリングの成功に依存。インデックス化が最も遅い | アプリ的、ゲート付き、またはSEO価値の低いビュー |
| SSR(サーバーサイド) | サーバー、リクエストごと | 低い — コンテンツが生のHTMLに含まれる | 動的/パーソナライズ/頻繁に変わるコンテンツ |
| SSG / 静的 / プリレンダリング | デプロイ時 | 最も低い — 生のHTMLに含まれ、高速 | コンテンツサイト、ドキュメント、ブログ、マーケティング |
| ハイドレーション(アイソモーフィック/ユニバーサル) | SSR/SSGが描画し、その後JSがハイドレート | 低い — ハイドレーションの不一致に注意 | ほとんどのモダンフレームワーク |
| ISR(インクリメンタル静的再生成) | 静的、スケジュール/オンデマンドで再生成 | 低い — より新しいSSG | 定期的な更新が必要な大規模カタログ |
| エッジレンダリング | CDNエッジでのSSR | 低い — TTFBが速い | グローバルでレイテンシに敏感なSSR |
| ストリーミングSSR | HTMLがチャンク単位でストリーミング | 低い — インデックス可能なコンテンツを後半のチャンクに含めない | パフォーマンス重視のSSRアプリ |
| 動的レンダリング | ボットにはプリレンダリング、ユーザーにはCSR | 回避策のみ — Googleは推奨しない | レガシーCSRの最終手段 |
Web Rendering Service — クイックファクト
| 動作 | あなたへの意味 |
|---|---|
| 常緑のヘッドレスChromium | モダンなJS/CSSが動作。古いエンジン用にトランスパイルする必要なし |
| ステートレス(ストレージとクッキーがクリア) | コンテンツ配信を永続化されたクライアント状態に依存しない |
| 権限プロンプトを拒否 | 位置情報/通知/カメラの背後にあるコンテンツはレンダリングされない |
| スクロール、クリック、ホバーしない | インタラクションではなく、ビューポートでコンテンツを読み込む |
| JS/CSSを積極的にキャッシュ | ファイル名にフィンガープリント(app.4f2a9c.js)を付けて変更を反映 |
| ほぼすべてのページをレンダリング、通常は数秒から数分 | 「2つの波」も、配分するレンダリング予算もない |
レンダリング準備監査チェックリスト
重要なコンテンツが実際にレンダリングを生き残ることを確認するためのチェック:
- 主要コンテンツとメインナビゲーションリンクが生のHTMLレスポンスに存在する (DevToolsの検査済みDOMではなく、ソースを表示) — JavaScript実行後にのみ 注入されるものではない。
- 読者が辿る必要のあるすべての内部リンクが実際の
<a href="...">である —<div onclick>、ハッシュのみのルート(#/page)、またはクライアントサイドで 状態をプッシュするだけで対応するリンクがないボタンではない。 - 重要なJSまたはCSSファイルが
robots.txtでブロックされていない(ブロックされた バンドルはWRSがレンダリングに必要なページを構築できなくなる可能性がある)。 - スクロール、ホバー、クリックで読み込まれるコンテンツにも、インタラクションなしで レンダリングされるパスがある — WRSはスクロール、クリック、ホバーしない。
- 重要なものが
localStorage、sessionStorage、またはクッキーがリクエスト間で 永続化されることに依存していない — WRSはステートレスで、ページ読み込みのたびに それらをすべてクリアする。 - 重要なものが位置情報、通知、カメラの権限プロンプトの背後にない — WRSは デフォルトでそれらを拒否する。
- JS/CSSファイル名にフィンガープリント(
app.4f2a9c.js)が付いている — コンテンツの 変更でWRSの積極的なキャッシュから配信されるのではなく、新しいフェッチが強制される。 - Google Search ConsoleのURL Inspectionのレンダリング済みHTML/スクリーンショットに、 自分のブラウザで見えるのと同じコンテンツとリンクが表示される。
- サイトがCSR問題の解決策として動的レンダリングを使用していない — 修正はSSR、静的レンダリング、またはハイドレーションであり、ボットに 異なるバージョンのページを配信することではない。
実際に影響するレンダリングの間違い
ページのレンダリングに必要なJSやCSSをrobots.txtでブロックする。
WRSがページが依存するスクリプトやスタイルシートを取得できない場合、正確なレンダリング済みDOMを構築できず、意図したページではなく壊れたり空のレンダリング結果になります。代わりに:JS/CSSアセットのクロールを許可してください。robots.txtはボットを低価値の領域から遠ざけるためのものであり、自社ページが必要とするリソースを遠ざけるためのものではありません。
コンテンツが重要なページを、フォールバックなしの完全なクライアントサイドレンダリング(CSR)で配信する。 CSRは*“the most problematic one … full client-side rendering where all of the rendering happens in the browser”* (翻訳) 「最も問題となるのは、すべてのレンダリングがブラウザで行われる完全なクライアントサイドレンダリング」ため、ページ全体をレンダリングの成功に賭けることになり、インデックスされるまでに最も時間がかかる選択肢です。代わりに:SSR、静的生成/プリレンダリング、ハイドレーションを採用し、コンテンツが生のHTMLに含まれる(またはすぐに含まれる)ようにしてください。
ハッシュベースのルート(#/product/123)だけをナビゲーションとして頼る。 WRSは実際の<a href>リンクをたどります。クライアント側の状態だけを変更するハッシュフラグメントは、サーバー側でレンダリングされた同等のURLがないため、レンダラーが次にクロールする対象がありません。代わりに:クライアント中心のアプリでも、サーバーが直接応答できる実際のパス(/product/123)を使用してください。
非インタラクティブな経路なしにコンテンツを遅延読み込みする。 WRSは*“doesn’t scroll, click, or hover”*(スクロールもクリックもホバーもしない)ため、これらのイベントの後にのみ表示されるコンテンツは、デフォルトではWRSから見えません。代わりに:インタラクションを必要とせずに、ファーストビューおよびビューポートにかなり近いコンテンツを読み込み、真の遅延読み込みは、適切な非JSフォールバックがある、本当にファーストビューより下のコンテンツに限定してください。
動的レンダリングを回避策ではなく長期的な修正として扱う。 Googleは*“dynamic rendering is a workaround and not a recommended solution, because it creates additional complexities and resource requirements”* (翻訳) 「動的レンダリングは回避策であり、追加の複雑さとリソース要件を生み出すため、推奨される解決策ではありません」と明言しており、ボットにユーザーとは異なるコンテンツを配信することは、クローキングに危険なほど近いものです。代わりに:CSRの問題の周りにボット検出レイヤーを構築するのではなく、レンダリングモード自体(SSR/静的/ハイドレーション)を修正してください。
検証テスト
レンダリング修正が実際に効果を発揮したことを確認するための合格/不合格チェック — 変更をリリースした後に実行し、継続的な健全性メトリクスとしては使用しないでください。
テスト:コンテンツがレンダリング済みDOMに表示される
- 実行するテスト — Google Search ConsoleのURL InspectionツールにURLを送信し、「Test Live URL」を使用して、レンダリングされたHTMLタブを開きます(または、Render Gapツールでページを実行して、生のHTMLとレンダリングされたHTMLを直接比較します)。
- 期待される結果 — 追加または修正したコンテンツが、自分のブラウザの開発者ツールだけでなく、レンダリングされたHTML/DOMビューに表示されます。
- 失敗の解釈 — レンダリングされたHTMLにまだ表示されないが、ページを通常どおり表示したときには存在する場合、WRSはまだそれを構築できていません — 修正が機能したと想定する前に、ブロックされたJS/CSSリソース、インタラクションのみの読み込み、またはクライアントストレージへの依存を確認してください。
- 監視期間 — 即時。URL Inspectionのライブテストは、URLの現在の状態をすぐに反映します。
- ロールバックのトリガー — 修正後もレンダリングされたHTMLにコンテンツが含まれていない、またはライブテストで以前には発生しなかった新しいクロール/レンダリングエラーが発生する。
テスト:重要なリンクがレンダリング後も生き残る
- 実行するテスト — レンダリングされたHTML(URL InspectionまたはRender Gap)で、読者がたどる必要のあるすべてのリンクの周りに実際の
<a href>タグがあるかどうかを確認します。見た目がクリック可能な要素だけではありません。 - 期待される結果 — レンダリングされたDOM内の各リンクに、実際のクロール可能なURLを指す解決可能な
hrefがあります。 - 失敗の解釈 — 機能しているように見えるリンクの
hrefがない、または空である場合、通常はクライアント側のクリックハンドラーを持つ<div>/<button>であり、サーバーでレンダリング可能なパスがないことを意味します — WRSはそれをたどることができません。 - 監視期間 — 即時。
- ロールバックのトリガー — 変更前に重要だったリンクに
href属性がない、またはレンダリングされた出力でハッシュのみのフラグメントを指している。
テスト:修正が次のデプロイで静かに後退しない
- 実行するテスト — このページのテンプレートやビルドパイプラインに影響する次のデプロイ後に、レンダリング済みHTMLチェック(URL検査ライブテストまたはレンダーギャップ)を再実行します。
- 期待される結果 — 最初に修正を確認したときと同じコンテンツとリンクが、レンダリングされたDOMに引き続き存在します。
- 失敗の解釈 — 存在していたコンテンツが再び消えた場合、後からの変更がクライアントのみの依存関係を再導入したか、サーバーレンダリングのパスを壊した可能性があります。
- 監視期間 — 影響を受けるテンプレートに触れる各デプロイ後に再確認します。一度きりのチェックではありません。
- ロールバックのトリガー — 確認済みのコンテンツやリンクがレンダリングされたDOMから再び消えた場合。
時間をかける価値のあるリソース
関連する私の記事
- JavaScript SEO: 決定版ガイド — レンダリング、レンダリングモード、DOMパリティ、無限スクロール、2ページが1つになる問題についての完全ガイドです。
- 技術SEOの初心者向けガイド — クロールとインデックスの間にレンダリングがどこに位置するかを説明しています。
私の講演
- 検索の仕組み (SlideShare)— クロール、レンダリング(WRS、ステートレスロード、インタラクションなし)、インデックス、ランキングについての解説です。(私の常時の免責事項が適用されます:「これは私のシステムの理解です…100%完全または正確ではありません。」)
他の情報源
- web.dev — Web上のレンダリング — ChromeチームによるCSR / SSR / SSG / ハイドレーションのトレードオフの標準的な解説です。
- Onely — Googleの2つのインデックス波 — 2つの波のモデルがなぜ衰退しているかを説明するMartin Splittのオフィスアワーセッションのトランスクリプトに基づく記事です。記事本文で引用されています。
- Search Engine Roundtable — Google: ページごとの検索コストなし — Google担当者が、配分すべきページごとのクロール/レンダー/インデックスコストはないと明確に述べています。
- Search Engine Journal — JavaScript SEO — JS SEOのベストプラクティス、テストワークフロー、フレームワークの考慮事項に関する業界の報道です。
- Vercel — レンダリング戦略 — Next.js/エッジレンダリングのドキュメント。実際のプロジェクトでCSR、SSR、SSG、ISR、ストリーミングSSRを選ぶ際に役立ちます。
- r/TechSEO — レンダー/インデックスの問題をデバッグするためのコミュニティです。
動画
- Google Search Central(YouTube)— Martin SplittのJavaScript SEOシリーズとレンダリング解説は、WebレンダリングサービスがあなたのJSをどのように処理するかを説明する公式ビデオの最良のウォークスルーです。 チャンネル
引用に値する統計
- 現在の公式な見解:固定された遅延はない。 Googleのドキュメントによると、クロールされたページは*“may stay on this queue for a few seconds, but it can take longer than that”* (翻訳) 「このキューに数秒留まる可能性がありますが、それ以上かかることもあります」とあり、レンダリングキューの固定された遅延やタイムアウトは公開されていません。
- 過去のデータポイント(古い情報)— レンダリング遅延の中央値は約5秒。 以前のカンファレンスでの発言で、Googleのスタッフ(Martin Splitt氏とTom Greenaway氏)は、ページがレンダラーに到達するまでの中央値は約5秒で、90パーセンタイルは数分であると述べています。これは、古い「2つの波」の懸念が示唆していた「数週間」ではありません。私はこれをJavaScript SEOガイド で引用していますが、現在の公開指標ではなく、歴史的なデータポイントとして扱ってください。Googleはこれを継続的な数値として再公開していません。
- インデックスの2つの波は薄れつつある。 Martin Splitt氏によると、クロール、レンダリング、インデックスが収束するにつれて、2つの波のモデルの役割はますます小さくなっています。現在では、実質的にすべてのページでレンダリングが行われています。 カバレッジ
- ページごとのレンダリング予算はない。 Googleは、個々のページのクロール、レンダリング、インデックス、配信にかかるコストを追跡していないと示しています。そのため、クロール予算が議論されるような「レンダリング予算」を節約する必要はありません。 カバレッジ
自分でテスト:レンダリング
Googleがページをレンダリングする方法に関する5つの簡単な質問です。各質問に回答を選び、その後確認してください。
変更履歴
2026年8月20日に更新。
編集概要と記録された変更の詳細。変更の詳細
-
変更の詳細な注記は現在英語でのみ提供されています。
完全な比較は利用できません — この改訂の以前のスナップショットがアーカイブされていません。
2026年7月28日に更新。
編集概要と記録された変更の詳細。変更の詳細
-
変更の詳細な注記は現在英語でのみ提供されています。
完全な比較は利用できません — この改訂の以前のスナップショットがアーカイブされていません。
2026年7月18日に更新。
編集概要と記録された変更の詳細。変更の詳細
-
変更の詳細な注記は現在英語でのみ提供されています。
完全な比較は利用できません — この改訂の以前のスナップショットがアーカイブされていません。
2026年7月17日に更新。
編集概要と記録された変更の詳細。変更の詳細
-
変更の詳細な注記は現在英語でのみ提供されています。
完全な比較は利用できません — この改訂の以前のスナップショットがアーカイブされていません。