rendering-strategies

SEO テクニカル：レンダリング戦略

検索エンジンや AI クローラーからの可視性を高めるための、レンダリング戦略の選択と最適化を案内します。基本原則：SEO を最適化するには、JavaScript を実行しなくても、ページの読み込み時にページデータとメタデータを利用できる必要があります。

呼び出し時：初回の使用時は、このスキルの内容と重要性を1～2文で説明してから、主な出力を提示すると役立つ場合があります。2回目以降の使用時、またはユーザーから省略を求められた場合は、主な出力に直接進んでください。

対象範囲（テクニカル SEO）

• 静的 vs 動的：SSG、SSR、ISR、CSR。それぞれの使用場面
• クローラーの動作：Googlebot は（遅延を伴いながら）JS をレンダリングします。AI クローラーは実行しません
• コンポーネントレベル：初期 HTML 内のコンテンツ、タブ、カルーセル、ナビゲーション
• ダイナミックレンダリング：完全な SSR／SSG が実現できない場合に、ボット向けにプリレンダリング

レンダリング方法

方法	HTML の生成時期	SEO	最適な用途
SSG（静的サイト生成）	ビルド時	✅ 最適	ブログ、ドキュメント、マーケティングページ。コンテンツの変更頻度が低い場合
SSR（サーバーサイドレンダリング）	リクエスト時	✅ 良好	ニュース、製品ページ。動的なコンテンツやパーソナライズされたコンテンツ
ISR（インクリメンタル静的再生成）	ビルド時 + 再検証	✅ 良好	大規模なサイト。静的でありながら定期的に更新する場合
CSR（クライアントサイドレンダリング）	ブラウザー内（JS の実行後）	❌ 不良	ダッシュボード、アカウントページ。SEO が不要な場合
ダイナミックレンダリング	ボット向けにオンデマンド	✅ フォールバック	SPA。クローラーにはプリレンダリングを、ユーザーには SPA を提供

SSG（静的サイト生成）

ビルド時に HTML が生成され、すべてのリクエストに同じ HTML が返されます。SEO に最適：クローラーは完全な HTML をすぐに受け取ることができ、パフォーマンスも最適です。

• 使用する場面：ブログ、ドキュメント、マーケティングページ、頻繁に変更されないコンテンツ
• フレームワーク：Next.js getStaticProps、Astro、Gatsby

SSR（サーバーサイドレンダリング）

リクエストごとに HTML が生成されます。SEO に良好：クローラーは完全な HTML を受け取ることができ、動的なコンテンツやパーソナライズされたコンテンツに対応します。

• 使用する場面：ニュース、製品ページ、ユーザー固有のコンテンツ
• トレードオフ：サーバー負荷が高くなり、TTFB は SSG より遅くなります
• フレームワーク：Next.js getServerSideProps、Remix

ISR（インクリメンタル静的再生成）

ビルド時には静的に生成され、一定期間後にページを再検証できます。SEO に良好：静的なパフォーマンスと鮮度を両立します。

• 使用する場面：大規模なサイト（数百万ページ）。コンテンツが定期的に更新される場合
• フレームワーク：Next.js の getStaticProps にある revalidate

CSR（クライアントサイドレンダリング）

サーバーは最小限の HTML シェルを送信し、JS の読み込み後にブラウザーでコンテンツをレンダリングします。SEO には適しません：クローラーには空のコンテンツが表示される場合があり、インデックス登録が遅延または失敗する可能性があります。

• 使用する場面：ダッシュボード、アカウントページ、内部ツールなど、検索での可視性が不要な場合
• 避ける対象：公開コンテンツ、マーケティングページ、ブログ

ダイナミックレンダリング

クローラーにはプリレンダリングされた HTML を、ユーザーには SPA を提供します。完全な SSR／SSG が実現できない場合（例：レガシー SPA からの移行）のフォールバックです。

• 方法：クローラーのユーザーエージェントを検出し、プリレンダリングサービス（例：Prerender.io）またはヘッドレスレンダリングにルーティングします
• 使用する場面：JavaScript を多用するサイト、移行期間、CSR を使用する製品ページ／ドキュメント
• 注：Google はこの方法を許可しています。プリレンダリングされたコンテンツは、ユーザー向けの表示と一致させてください

クローラーの動作

クローラー	JavaScript	初期 HTML 内のコンテンツ
Googlebot	JS をレンダリングします（Chrome）。キューで数日待つ場合があります	重要度は最大。SSR／SSG を推奨
AI クローラー（GPTBot、ClaudeBot、PerplexityBot）	JS を実行しません	必須。CSR のコンテンツは見えません
Bingbot	JS をレンダリングします	Googlebot と同様

AI クローラー：クロール量は Googlebot の約 28% です。重要なコンテンツ（記事、メタデータ、ナビゲーション）は初期 HTML に含める必要があります。AI クローラーの最適化については site-crawlability を、GEO については generative-engine-optimization を参照してください。

コンポーネントレベル：初期 HTML 内のコンテンツ

Google はユーザーのクリック（タブ、カルーセル、「もっと読み込む」）をシミュレートしません。AJAX 経由で読み込まれるコンテンツや、操作時に読み込まれるコンテンツは検出できません。

コンポーネント	要件	実装
タブ／アコーディオン	読み込み時にすべてのタブコンテンツが DOM 内にある	サーバーでレンダリングする。<details>／<summary> または CSS による表示／非表示を使用する
カルーセル	初期 HTML にすべてのスライドがある	サーバーでレンダリングする。表示／非表示の切り替えにのみ CSS／JS を使用する
ヒーロー	見出し、CTA、LCP 画像が HTML 内にある	JS のみでレンダリングしない
ナビゲーション	初回描画時にすべてのナビゲーションリンクがある	重要なリンクに JS で挿入するメニューを使用しない

推奨事項：重要なコンテンツはすべてサーバーでレンダリング（SSR／SSG）し、JS は操作（表示／非表示、アニメーション）にのみ使用してください。クリック時に読み込まれるコンテンツはインデックス登録されません。

判断ガイド

コンテンツの種類	レンダリング	理由
ブログ、ドキュメント、マーケティング	SSG または ISR	SEO に最適。高速。静的
製品、ニュース、動的コンテンツ	SSR	コンテンツが新鮮。クローラーに対応
ダッシュボード、アカウント	CSR	SEO 不要。認証が必要
レガシーな SPA	動的レンダリング	SSR／SSG への移行までの橋渡し

出力形式

• 現在の設定：SSG、SSR、CSR、またはハイブリッド
• 推奨事項：ページの種類ごと
• コンポーネントの確認：タブ、カルーセル、ナビゲーションのコンテンツは初期 HTML 内にあるか？
• 参考資料：Next.js Rendering、Vercel SSR vs SSG

関連スキル

• site-crawlability：AI クローラーの最適化。重要なコンテンツには SSR。URL 管理
• generative-engine-optimization：GEO。AI クローラーは JS を実行しない
• core-web-vitals：LCP。ファーストビューのコンテンツには SSR／SSG。クライアント側の処理は LCP に悪影響を与える
• mobile-friendly：モバイルファーストインデックス。コンテンツの同等性
• tab-accordion：読み込み時にコンテンツを DOM 内に配置。タブはサーバーでレンダリング
• carousel：初期 HTML にコンテンツを配置。スライドはサーバーでレンダリング
• hero-generator：初期 HTML にヒーローを配置。JS のみでのレンダリングを避ける
• navigation-menu-generator：初回描画時にナビゲーションを表示。JS のみのメニューは使用しない