発行:2026-01-02

SEO対策とメタデータ管理

Reactで構築するSPA（シングルページアプリケーション）には、SEO（検索エンジン最適化）に関する特有の課題があります。ここでは、その課題を最小限に抑えるための手法を学びます。

SPAが抱えるSEOの課題

なぜ「React単体」のアプリはSEOが難しいと言われるのでしょうか。

初期HTMLが「空」である問題

SPAでは、サーバーから返される index.html はほぼ空の状態です。JavaScriptが読み込まれて初めて中身が構築されます。
最近のGoogleクローラーはJavaScriptを実行してくれますが、他の検索エンジンやSNS、Webツールの中には、JavaScriptを解釈せず空のページとして認識してしまうものがあります。

メタデータの動的変更が不可欠

全てのページが同じタイトル（例：「My Router App」）では、検索エンジンはどのページがどんな内容か判別できません。ページ遷移に合わせて <title> や <link rel="canonical"> を書き換える必要があります。

React Helmet Async の導入

これを解決する標準的なライブラリが react-helmet-async です。

インストール

npm install react-helmet-async

セットアップと利用

最上位で HelmetProvider を配置し、各ページで <Helmet> コンポーネントを使用します。

src/pages/About.jsximport { Helmet } from 'react-helmet-async';

const AboutPage = () => {
  return (
    <>
      <Helmet>
        <title>当サイトについて | DevFront</title>
        <meta name="description" content="React Routerの学習を進めるための技術解説ページです。" />
      </Helmet>

      <div className="p-8">
        <h1 className="text-2xl font-bold">About Us</h1>
      </div>
    </>
  );
};

本格的なSEOが必要な場合の判断基準

メタタグの書き換えだけでは不十分なケースもあります。

SSR (Server Side Rendering) への移行判断

もしあなたのプロジェクトが以下の要件を含む場合、React Router単体ではなく Next.js や、React Routerの Framework Mode (Remix) への移行を強くお勧めします。

ニュースサイトやブログなど、検索順位がビジネスに直結する。
Twitter (X) や Facebook 等でリンクを貼った際、記事ごとに画像（OGP）を確実に出したい。
ページの読み込み初期速度を極限まで高めたい。

これらはサーバー側で「中身が入ったHTML」を生成してからブラウザに送るため、SEOにおいては圧倒的に有利です。

まとめ

SPA構成であっても、 react-helmet-async を導入してタイトルやディスクリプションを正しく設定することは、SEOのみならず「ブラウザのタブ名」を整理するというユーザビリティの面でも非常に重要です。