現代のWeb開発は、React、Vue、AngularなどのJavaScriptフレームワークに大きくシフトしています。これらのフレームワークは、アプリのような素晴らしいユーザーエクスペリエンスを生み出しますが、正しく構成されていない場合、検索エンジンにとって大きな障壁となる可能性があります。
核心的な問題はレンダリング（Rendering）です。Googlebotは賢いですが、人間のユーザーではありません。コンテンツがブラウザでのJavaScriptの実行に完全に依存している場合、目に見えなくなるリスクがあります。
1. 問題：クライアントサイドレンダリング（CSR）
デフォルトでは、ほとんどのシングルページアプリケーション（SPA）はクライアントサイドレンダリングを使用します。
仕組み：
サーバーはほぼ空のHTMLファイル（多くの場合、単なる<div id="root">）を送信します。その後、ブラウザは大きなJavaScriptバンドルをダウンロードして実行し、ページにコンテンツを入力します。
Googleが見るもの：
Googlebotが最初にURLをクロールするとき、空のHTMLシェルを見ます。
リスク：
GoogleはJavaScriptを実行できますが、大量の処理能力が必要です。したがって、Googleはこのプロセスを延期します。
- 第一波（クロール）： Googleは空のシェルを見ます。
- キュー： ページは数時間または数日間「レンダリングキュー」にとどまります。
- 第二波（レンダリング）： Googleは最終的にJSを実行してコンテンツを確認します。
結論： 純粋なCSRは、レンダリングがタイムアウトした場合、インデックスの遅延やコンテンツの欠落につながる可能性があります。
2. 解決策：サーバーサイドレンダリング（SSR）とSSG
Googleがコンテンツをすぐに確認できるようにするには、レンダリングプロセスをユーザーのブラウザからサーバー（またはビルド時）に移動する必要があります。
A. サーバーサイドレンダリング（SSR）
仕組み： ボット（またはユーザー）がページをリクエストすると、サーバーはJavaScriptを実行し、完全なHTML文字列を構築して、完全に入力されたページをブラウザに送信します。
- 利点： Googlebotは、最初のHTML応答で完全なコンテンツ（テキスト、リンク、メタデータ）を確認します。インデックス作成は即時です。
- フレームワーク：
- React：Next.jsまたはRemixを使用します。
- Vue：Nuxt.jsを使用します。
- Angular：Angular Universalを使用します。
B. 静的サイト生成（SSG）
仕組み： ビルド時（デプロイ前）にすべてのHTMLページを生成します。サーバーは単純な静的HTMLファイルを提供します。
- 利点： 非常に高速なパフォーマンス（Core Web Vitalsに最適）と完璧なSEO。
- ユースケース： ブログ、マーケティングサイト、およびpSEOプロジェクト（「pSEO Wizard」など）。
- フレームワーク： Next.js、Gatsby、Astro。
比較：CSR vs. SSR vs. SSG
| 機能 | CSR（クライアントサイド） | SSR（サーバーサイド） | SSG（静的） |
|---|---|---|---|
| 初期HTML | 空（読み込み中...） | 完全なコンテンツ | 完全なコンテンツ |
| SEO適合性 | 低い / リスキー | 高い | 高い |
| サーバー負荷 | 低い | 高い | 低い |
| 最適 | ダッシュボード、プライベートアプリ | 動的フィード、ソーシャルネットワーク | ブログ、ドキュメント、LP |
3. JS SEOの重要なベストプラクティス
SSRを使用しても、開発者はインデックス作成に悪影響を与える間違いを犯すことがよくあります。
A. 実際のリンクを使用する（<a href>）
Googlebotはリンクをたどって新しいページを発見します。
- 悪い：
<div onClick={goToPage}>製品</div>（Googlebotはクリックしません）。 - 良い：
<a href="/product">製品</a>（Googlebotはこれをたどります）。
注：Next.jsなどのフレームワークでは、基になる<a>タグをレンダリングする<Link>コンポーネントを使用します。
B. メタデータの管理（<head>）
シングルページアプリでは、<title>タグと<meta>タグは、すべてのページで静的なまま（「マイアプリ」など）になることがよくあります。
修正： ルートごとに動的メタデータを挿入する必要があります。
- React： react-helmetまたはNext.js Metadata APIを使用します。
- Vue： vue-metaを使用します。
確認：ページ間を移動するときに、ブラウザタブのタイトルが変わることを確認してください。
C. リソースをブロックしない
robots.txtファイルがJavaScript（.js）またはCSS（.css）ファイルをブロックしていないことを確認してください。Googleがページを正しくレンダリングするには、これらのファイルにアクセスする必要があります。
4. JSアプリをテストする方法
決して推測しないでください。常にGoogleが見ているものを確認してください。
- Google Search Console（URL検査）： URLを入力して「Test Live URL」をクリックします。「View Tested Page」>「Screenshot」をクリックします。結果：スクリーンショットが空であるか、読み込みスピナーが表示されている場合、Googleはコンテンツを見ることができません。テキストが表示されれば、安全です。
- リッチリザルトテスト： このツールは、実際のGoogleレンダリングエンジンを実行します。スキーママークアップを検出できる場合は、通常、ページが正常にレンダリングされたことを意味します。
- ChromeでJavaScriptを無効にする： ブラウザ拡張機能を使用してJSをオフにします。ページをリロードします。画面が空の場合は、完全にCSRに依存しています。
結論
現代のSEOでは、サーバーサイドレンダリング（SSR）または静的サイト生成（SSG）が標準です。Googleはクライアントサイドレンダリングされたアプリをインデックスできますが、それに依存することは、ランキングでルーレットをプレイするようなものです。Next.jsやNuxtなどのフレームワークを使用することで、検索エンジンにまさに求めているもの、つまり高速でアクセスしやすく、完全にレンダリングされたHTMLを提供できます。