SEO技術: レンダリング戦略

検索エンジンとAIクローラーの可視性を考慮したレンダリング戦略の選択と最適化をガイドします。黄金ルール: ページデータとメタデータは、最適なSEOのためにJavaScript実行なしでページ読み込み時に利用可能である必要があります。

起動時: 初回使用時は、このスキルが何をカバーしており、なぜ重要かについて1～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 を受け取る; 動的、パーソナライズされたコンテンツをサポート。

• 使用時: ニュース、商品ページ、ユーザー固有のコンテンツ
• トレードオフ: サーバー負荷が高い; SSG より TTFB が遅い
• フレームワーク: 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 show/hide を使用
カルーセル	すべてのスライドが初期 HTML にある	サーバーレンダリング; show/hide のみに CSS/JS を使用
ヒーロー	ヘッドライン、CTA、LCP 画像が HTML にある	JS のみレンダリングなし
ナビゲーション	すべてのナビゲーションリンクが最初のペイントにある	重要なリンク用の JS 注入メニューなし

推奨: すべての重要なコンテンツをサーバーレンダリング (SSR/SSG) します; インタラクション (show/hide、アニメーション) のみに 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 for above-fold; クライアント側は LCP に悪影響
• mobile-friendly: モバイルファーストインデックス; コンテンツパリティ
• tab-accordion: 読み込み時に DOM 内のコンテンツ; サーバーレンダリングタブ
• carousel: 初期 HTML 内のコンテンツ; サーバーレンダリングスライド
• hero-generator: 初期 HTML 内のヒーロー; JS のみレンダリングを回避
• navigation-menu-generator: 最初のペイント内のナビゲーション; JS のみメニューなし