React + Vite プロジェクトの SEO 最適化ガイド

SEO（Search Engine Optimization）は、ウェブアプリケーションの発見性を高めるために非常に重要です。しかし、React アプリケーションは、クライアントサイドレンダリング（CSR）に依存しているため、SEO に関していくつかの課題に直面します。本記事では、Vite を SSR（サーバーサイドレンダリング）や SSG（静的サイト生成）と統合することで、React プロジェクトの SEO を強化する方法を解説します。

この記事を終える頃には、以下のことができるようになります：

✅ 動的なメタタグ（タイトル、説明、ソーシャルメディア用シェア情報）の実装

✅ 最適なインデックスのためのサイトマップと robots.txt の設定

✅ SSG/SSR を活用した事前レンダリング

✅ 高速ロードページを実現するためのパフォーマンス最適化

それでは、SEO フレンドリーな React + Vite アプリケーションの構築方法について見ていきましょう。

1. 必要なパッケージのインストール

まず、SSR、SSG、動的メタタグ、サイトマップ生成を有効にするための必要なパッケージをインストールします。以下のコマンドで依存関係をインストールしてください。

npm install react-helmet-async vite-plugin-html vite-plugin-pages vite-plugin-sitemap vite-ssg

これらのプラグインは、メタタグの管理、SSGの実装、サイトマップの生成、ページパフォーマンスの向上に役立ちます。

2. vite.config.js の設定

次に、Vite の設定を更新して、SSR、SSG、そしてさまざまなパフォーマンス最適化を有効にします。

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { ViteSitemap } from 'vite-plugin-sitemap';
import { createHtmlPlugin } from 'vite-plugin-html';
import { viteSSG } from 'vite-ssg/serialized-data';

const routes = [
  { path: '/', name: 'Home' },
  { path: '/about', name: 'About' },
];

export default defineConfig({
  plugins: [
    react(),
    viteSSG({ includedRoutes: () => routes }),
    ViteSitemap({
      baseUrl: 'https://yourdomain.com',
      routes,
      generateRobotsTxt: true,
    }),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: 'Default Title',
          description: 'Default Description',
        },
      },
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom', 'react-router-dom'],
        },
      },
    },
  },
});

主な利点：

✅ SSG サポート – ビルド時にページを事前レンダリングして、ロード速度を向上させ、SEO を強化。

✅ サイトマップ & robots.txt – Google などの検索エンジンがページを適切にインデックスできるようにします。

✅ コード分割 – パフォーマンスを最適化するためにコードを小さなチャンクに分割します。

✅ SEO メタインジェクション – HTML の構造に自動的に SEO メタタグを挿入します。

3. 動的な SEO 管理（Seo.jsx）

各ページに個別のメタタグ（タイトル、説明、ソーシャルメディアプレビュー）を設定するために、react-helmet-async を使用して動的にメタ情報を更新します。これにより、ページごとに最適な SEO が適用されます。

import { Helmet } from 'react-helmet-async';

const Seo = ({ title, description, canonical, image, schemaMarkup }) => (
  <Helmet>
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />

    {/* Open Graph for Facebook, LinkedIn */}
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />

    {/* Twitter Card */}
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={image} />

    {/* Structured Data (Schema Markup) */}
    {schemaMarkup && (
      <script type="application/ld+json">
        {JSON.stringify(schemaMarkup)}
      </script>
    )}
  </Helmet>
);

export default Seo;

重要なポイント：

✅ 動的メタタグ – ページごとにタイトルや説明をカスタマイズしてSEOを最適化。

✅ ソーシャルメディア統合 – Facebook、LinkedIn、Twitter でシェアされた際に、ページが最適に表示されます。

✅ 構造化データ – JSON-LD スキーママークアップを実装して、検索エンジンがページの内容を理解しやすくします。

4. サイトマップの自動生成

siteMap.js を作成して、アプリケーションの動的・静的ルートを定義します。適切なサイトマップは、検索エンジンが必要なページのみをクロールするのに役立ちます。

export const BASE_URL = 'https://yourdomain.com';

export const dynamicRoutes = async () => {
  // 必要に応じてAPIやデータベースから動的ルートを取得
  return [];
};

export const excludeRoutes = ['/admin', '/private'];

これにより、検索エンジンが重要なページを優先してインデックスします。

5. robots.txt の設定

検索エンジンのクローラーは、robots.txt を使用してサイトのクロール範囲を理解します。public/robots.txt ファイルに以下を追加してください：

User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml

User-agent: Googlebot
Disallow: /private

重要なポイント：

✅ クロールの制御 – クローラーに特定のページをクロールするかどうかを指示できます。

✅ インデックスの最適化 – サイトマップをクローラーに指示し、サイトの可視性を向上させます。

6. ルートベースの SEO 実装

各ページに SEO を実装するために、Seo コンポーネントを追加します。以下はホームページの例です：

import Seo from '../components/Seo';

const HomePage = () => {
  return (
    <>
      <Seo
        title="Home Page Title"
        description="A detailed description of the Home page."
        canonical="https://yourdomain.com/"
        schemaMarkup={{
          '@context': 'https://schema.org',
          '@type': 'WebSite',
          name: 'Your Site',
          url: 'https://yourdomain.com/',
        }}
      />
      <h1>Welcome to My SEO-Optimized React Vite App</h1>
    </>
  );
};

7. SSG（静的サイト生成）の有効化

Vite の SSG によって生成された静的 HTML をランタイム中に水和（hydration）するため、main.jsx を変更して SSG ハイドレーションをサポートします。

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

8. バンドルサイズの分析と最適化

ビルド後にバンドルサイズを分析して、不要なコードが含まれていないか確認します。package.json に以下を追加：

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview",
    "analyze": "npx vite-bundle-visualizer"
  }
}

以下のコマンドで、使用されていないコードを特定して削除します：

npm run build && npm run analyze