【動的OGP＆個別URL】キャラクターカード個別URLと _redirects によるSNSプレビュー最適化

1. 機能概要：キャラクター個別URLとOGPプレビュー表示

Doodle Fighterでは、ユーザーが作成したキャラクターごとに固有のパーマリンク（例: https://doodle-fighter.com/characters/char_12345）を割り当てています。

このURLをSNSで共有した際、生成されたキャラクターの立ち絵画像や戦闘力ステータスが記載されたプレビューカード（summary_large_image）が自動表示されることで、ユーザーが自身の成果物をスムーズに紹介・閲覧できる仕組みを構築しています。

2. 課題：静的ホスティングにおける動的メタデータ制御

フロントエンドをCloudflare Pagesなどの静的ホスティングで提供する場合、ビルド済みのHTMLには固定の <meta property="og:image"> しか記述できません。

動的に生成されたキャラクター（数千・数万パターン）ごとにHTMLファイルを事前に用意することは不可能であるため、**個別URLへのアクセスをSPAアプリへ移送しつつ、SNSボットからのクロールに対して動的にOGP画像を返却する仕組み**が必要となります。

3. アーキテクチャと `_redirects` 設定

私たちはCloudflare Pagesの _redirects 機能とFastAPIバックエンド（AWS Lambda）を組み合わせ、一般ユーザーのブラウザアクセスとSNSクローラーの双方に対応するルーティングを設計しました。

# frontend/_redirects の設定
# 個別キャラクターURLへのアクセスをフロントエンドのSPAアプリへ移送
/characters/* /play 200

フロントエンド JavaScript (app.js) でのパラメータ解析

// frontend/static/js/app.js
function checkCharacterUrl() {
    const path = window.location.pathname;
    const match = path.match(/\/characters\/([a-zA-Z0-9_-]+)/);
    if (match) {
        const characterId = match[1];
        // APIから該当キャラクターデータを取得して対戦・表示モードを起動
        loadCharacterAndBattle(characterId);
    }
}

4. OGP画像自動生成とメタタグの適用

サーバーサイド（FastAPI）では、キャラクターの画像とステータス（必殺技名・攻撃力・性格など）を合成して 1200x630px のPNG画像を動的にレンダリングするエンドポイント（`/api/v1/ogp/{char_id}.png`）を提供しています。

これにより、SNSシェア時に自分だけの世界に一つだけのカード画像が表示され、クリック率（CTR）が大幅に向上しました。

5. まとめ

静的ホスティングとサーバーレスバックエンドを組み合わせて個別URLと動的OGPを実現することは、個人開発アプリの初期トラフィック獲得において劇的な効果をもたらします。