ページメタデータの動的生成

[oumelab]

react-helmet-async を用いたページメタデータの動的生成

背景

現在、アプリ全体で <title> は固定のままで、ページごとの <meta> description も存在しない。
そのため、ユーザー体験（ブラウザのタブタイトルやシェア時のプレビュー）や SEO/OGP対応 に課題あり。

従来よく使われていた [react-helmet](https://github.com/nfl/react-helmet) は数年間メンテナンスされていない。
代わりに [react-helmet-async](https://github.com/staylor/react-helmet-async) が活発にメンテされており、React 19 / React Router v7 / Vite 環境でも利用可能。
（将来的に React 19 標準の metadata API が安定すれば、段階的に移行できるように設計しておくのが望ましい）

目的

• ページごとに動的な <title> を設定できるようにする
• <meta name="description"> をページごとに設定
• 将来的に OGP タグ（og:title など）も追加できるようにする

タスク

• react-helmet-async を導入

  bun add react-helmet-async

• ルートを <HelmetProvider> でラップ

  import { HelmetProvider } from "react-helmet-async";
  import { RouterProvider } from "react-router-dom";
  
  export function App() {
    return (
      <HelmetProvider>
        <RouterProvider router={router} />
      </HelmetProvider>
    );
  }

• 主要なルートで <Helmet> を追加

  • ホーム / イベント一覧
  • イベント詳細（DBから取得したタイトル・説明を反映）
  • プロフィールページ
  • 認証関連ページ

• 共通のデフォルトタイトルや説明を返すユーティリティ (meta.ts) を用意

• README に設定・利用方法を追記

実装例（イベント詳細ページ）

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

function EventDetail({ event }) {
  return (
    <>
      <Helmet>
        <title>{event.title} | React Event Calendar</title>
        <meta name="description" content={event.description} />
        <meta property="og:title" content={event.title} />
        <meta property="og:description" content={event.description} />
      </Helmet>
      <h1>{event.title}</h1>
    </>
  );
}

完了条件

• 各ページで意味のあるユニークな <title> が表示されること
• イベント詳細ページでは description がイベント内容から反映されること
• デフォルト値を提供する仕組みがあること
• README に導入手順と利用方法が追記されていること

ブランチ名

feat/58-helmet-async-metadata