React SEO：上位表示するReactアプリのためのレンダリング、メタデータ、リンク

クイック診断

SEOはあなたに向いている？どう始めるべき？

質問 1 / 425%

あなたの商品はGoogleで検索されていますか？

はい、そう思ういいえ、新しいか非常にニッチわからない

React SEOとは、Reactアプリを検索エンジンやAIアシスタントがクロールし、インデックスし、理解できるようにする取り組みです。React自体は中立で、問題はすべてをブラウザでレンダリングすることから生じます。GoogleはJavaScript SEOの基本で、JavaScriptアプリをクロール、レンダリング、インデックス登録の3段階で処理すると説明し、サーバーサイドレンダリングや事前レンダリングは「ユーザーにもクローラーにもサイトが速くなり、すべてのボットがJavaScriptを実行できるわけではないため、今でも優れた方法」だと述べています。

なぜReactはSEOが難しいのか？

シングルページアプリとして作られたReactアプリが返すHTMLには、空のルートdivとscriptタグくらいしか入っていません。ブラウザがJavaScriptをダウンロードして実行し、ページを組み立てます。HTMLだけを読むクローラーには、インデックスすべき見出しも本文もリンクも見えません。

GooglebotはJavaScriptを実行しますが、それは別の工程です。ページはクロールされ、レンダリング待ちのキューに入り、ヘッドレスChromiumでレンダリングされ、その後でようやくレンダリング結果のリンクと内容が使われます。工程が増えるたびに失敗の可能性（スクリプトエラー、APIのブロック、タイムアウト）が生まれ、新しいページが検索結果に出るまでの時間も延びます。この流れはJavaScript SEOのガイドで、インデックスを早める方法はGoogleのインデックス登録の記事で解説しています。

ほかのボットはそれほど待ってくれません。Vercelが2024年12月に公開した分析The rise of the AI crawlerは、「主要なAIクローラーはいずれも現在JavaScriptをレンダリングしていない」とし、GPTBot、ChatGPT-User、OAI-SearchBot、ClaudeBot、PerplexityBotを挙げています。クライアントでレンダリングされるReactのページは、GoogleにインデックスされていてもChatGPT、Claude、Perplexityには見えません。

Reactサイトにはどのレンダリング方式を選ぶべきか？

Reactチームは現在、新規アプリをフレームワークで始めることを推奨しています。2025年2月14日にCreate React Appを非推奨にした際の発表では、「サーバーレンダリングはSEOを改善できる」とし、内容が表示されるまでにダウンロードするJavaScriptを減らしてパフォーマンスも高めると述べています。検索にとって弱いものから強いものへ並べると次のとおりです。

ダイナミックレンダリングについて、Googleのドキュメントは明確で、「回避策であり、長期的な解決策ではなかった」とし、代わりにサーバーサイドレンダリング、静的レンダリング、ハイドレーションを推奨しています。フレームワークを選ぶなら、Next.js SEOガイドでレンダリング方式、Metadata API、サイトマップを詳しく解説しています。

移行が難しい場合でも、いくつかの点に気をつければGoogleはシングルページアプリをインデックスできます。条件はシングルページアプリケーションのSEOのガイドにまとめており、本記事の残りはどちらの場合にも当てはまります。

Reactでタイトルとメタタグをどう設定するか？

React 19（2024年12月5日に安定版）以降、コンポーネントはtitle、meta、linkタグを直接レンダリングでき、Reactがそれらをドキュメントのheadへ移動します。React 19のリリースノートによると、このネイティブ対応は「クライアントのみのアプリ、ストリーミングSSR、Server Components」で動作します。React 19以前はreact-helmetやreact-helmet-asyncといったライブラリがこの役割を担っており、ルートごとにデフォルト値を上書きしたい場合には今も役立ちます。

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

どの方法でも守るべきルールは3つです。

• 1ページにタイトルは1つ：固有で内容がわかるものにします。Reactのドキュメントは、複数のコンポーネントが同時にタイトルをレンダリングすると「ブラウザや検索エンジンの挙動は未定義」になると警告しています。テキストと変数を混ぜず、1つの文字列（テンプレートリテラル）を渡しましょう。
• URLごとに説明文とcanonicalを1つずつ：ページのデータから生成します。メタタグジェネレーターで文案を作り、canonicalチェッカーで公開中の状態を確認できます。
• Open Graphタグは初期HTMLに入れる：シェアされるページでは特に重要です。リンクプレビューのボットは通常、生のHTMLを読むからです。

インデックスを妨げるルーティングとリンクのミスは？

Googleは「href属性を持つHTMLのa要素でなければリンクを発見できない」と述べ、異なるコンテンツの読み込みにURLフラグメントを使わないよう勧めています。React SEOの失敗の多くはルーティングの細部から生じます。

Googleが何をレンダリングしているかは、Search ConsoleのURL検査ツールでテストしたページのHTMLを確認するか、主要なテンプレートをインデックス可能性チェッカーにかけて確認します。

Reactでサイトマップと構造化データをどう扱うか？

Reactにはサイトマップ機能が組み込まれていません。ルートとデータからビルド時にsitemap.xmlを生成し（またはフレームワークのサイトマップ機能を使い）、200を返すcanonicalのURLだけを載せ、robots.txtで参照します。小さな静的サイトならXMLサイトマップジェネレーターで十分です。

構造化データもメタデータと同じルールです。JSON-LDのscriptはページと一緒に、同じデータから、できればサーバーでレンダリングします。GoogleはJavaScriptで挿入されたJSON-LDをレンダリング後に読めますが、初期HTMLにないマークアップは、レンダリングしないクローラーにとっては存在しません。記事にはArticle、ECにはProduct、サイト全体にはOrganization、深い階層のページにはBreadcrumbListを使います。

パフォーマンスはReact SEOにどう影響するか？

大きなJavaScriptバンドルはCore Web Vitalsを悪化させます。ページが反応する前に、ブラウザはコードをダウンロード、解析、ハイドレーションしなければならず、特にモバイルでLargest Contentful PaintとInteraction to Next Paintに負担がかかります。ReactチームのCreate React Appに関する発表は、サーバーレンダリングならJavaScriptが少なく完全なHTMLドキュメントを送れるため、First Contentful Paintが速くなり、INPも下がりうると述べています。実践的な手段は、React.lazyによるルート単位のコード分割、明示的なサイズを指定した画像配信、スクロールしないと見えないコンポーネントの遅延読み込み、外部スクリプトの見直しです。

React SEOのチェックリストには何を入れるべきか？

1. インデックス対象のすべてのURLが完全なHTMLを返す（サーバーレンダリングまたは事前レンダリング）。curlで確認する。
2. URLごとに固有のタイトル、説明文、自己参照のcanonicalがある。
3. historyベースのルートを使い、ハッシュURLはなく、内部リンクはすべてhref付きのaとしてレンダリングされる。
4. 正しいステータスコード：存在しないページは404、移転したページは301または308。
5. ルートと同じデータから生成したsitemap.xmlを、robots.txtで宣言している。
6. JSON-LDをページと一緒にレンダリングし、リッチリザルトテストで検証している。
7. レンダリングに必要なスクリプト、スタイル、APIをrobots.txtで許可している。
8. ルートごとにコードを分割し、実ユーザーのCore Web Vitalsを監視している。

ReactサイトをAIの回答に表示させるには？

GEO（生成エンジン最適化）はアクセスから始まります。AIクローラーは生のHTMLを取得するため、Reactのページは本文、見出し、JSON-LDをJavaScriptなしで届けなければ、読まれ、要約され、引用されることはありません。AIクローラビリティ監査を使えば、これらのボットがあなたのページから何を受け取っているかがわかります。第二の条件は引用に値するコンテンツで、セクションごとにひとつの質問に答え、出典、数値、明確な定義を備えたページです。

このコンテンツ面を自動化するのが、私たちの製品Sorankです。SorankはautopilotでSEOとGEOを進めるソフトウェアで、ブログ記事ジェネレーターが出典、内部リンク、画像付きの記事を月20本、60本、または120本作成・公開し、webhookを通じてReactやNext.jsのような独自構成のサイトにも接続できます。SEO Chatは、サイトの検索パフォーマンスに関する質問に会話形式で答えます。

まとめると、HTMLはサーバーから返し、URLごとに固有のタイトル、説明文、canonicalを設定し、本物のリンクを使うことです。そうすればReactサイトもほかのサイトと同じように上位表示され、AIアシスタントにも読まれます。GoogleとAIに向けた記事をサイトに継続的に供給するなら、Sorankの料金プランをご覧ください。月額49ドルからで、3日間の無料トライアルがあります。