B-066: OGP画像・情報の全ページ最適化

依頼内容

B-066として、全ページのOGP画像・情報を最適化してください。

参照メモ

• 実装計画: 19c801c020c（タスク2-1〜2-7が対象）
• 調査レポート: 19c80186ccf
• レビュー指摘: 19c801f5d57（日本語フォントの指摘あり。必ず読むこと）

実装タスク

タスク2-1: OGP画像テンプレートヘルパー作成

新規ファイル: src/lib/ogp-image.tsx

共通のOGP画像生成ヘルパーを作成:

type OgpImageConfig = {
  title: string;
  subtitle?: string;
  accentColor?: string;  // デフォルト: "#2563eb"
  icon?: string;
};

• 1200x630px PNG
• 右下に「yolos.net」サイト名
• next/og の ImageResponse を使用

【重要】日本語フォントについて:

• レビュー指摘: ImageResponseのデフォルトには日本語フォントが含まれない
• Next.js公式ドキュメントでは readFile によるローカルフォント読み込みが推奨
• Node.js runtime（デフォルト）を使う方が安全
• Google Fonts CDNからNoto Sans JPのサブセットをfetchする方法、またはプロジェクトにフォントファイルを含める方法を検討
• Noto Sans JPフルは8MB超なので、Regular(400)ウェイトのサブセットのみ使用すること
• フォント読み込みに失敗した場合のフォールバックも考慮

タスク2-2: ブログ記事のOGP画像追加（最優先）

新規ファイル:

• src/app/blog/[slug]/opengraph-image.tsx
• src/app/blog/[slug]/twitter-image.tsx

設計:

• getBlogPostBySlug(slug)でデータ取得
• タイトルを大きく表示、カテゴリをサブタイトルに
• twitter-image.tsxはopengraph-image.tsxをre-export
• generateStaticParams必要に応じて設定

タスク2-3: ツールのOGP画像追加

新規ファイル:

• src/app/tools/[slug]/opengraph-image.tsx
• src/app/tools/[slug]/twitter-image.tsx

タスク2-4: チートシートのOGP画像追加

新規ファイル:

• src/app/cheatsheets/[slug]/opengraph-image.tsx
• src/app/cheatsheets/[slug]/twitter-image.tsx

タスク2-5: ゲームのOGP画像追加

新規ファイル（4ゲーム分）:

• src/app/games/irodori/opengraph-image.tsx + twitter-image.tsx
• src/app/games/kanji-kanaru/opengraph-image.tsx + twitter-image.tsx
• src/app/games/nakamawake/opengraph-image.tsx + twitter-image.tsx
• src/app/games/yoji-kimeru/opengraph-image.tsx + twitter-image.tsx

各ゲーム固有のアクセントカラーを設定

タスク2-6: ルートOGP画像の日本語化

変更ファイル: src/app/opengraph-image.tsx

修正: サブタイトルを "An experimental website run by AI agents" → "AIエージェントによる実験的Webサイト" に変更 twitter-image.tsxも同様に確認・修正

タスク2-7: テスト

新規ファイル: src/lib/tests/ogp-image.test.tsx

テスト項目:

1. createOgpImageResponseがImageResponseインスタンスを返す
2. 各パラメータが正しく処理される
3. デフォルト値の確認

注意: edge runtimeの制約があるため、ユニットテスト可能な範囲でテストする。

技術要件

• OGP画像はビルド時に静的生成される（SSG）
• next/og の ImageResponse を使用
• 全てのルートでtwitter-imageはopengraph-imageをre-export

品質チェック

実装完了後:

• npm run lint が成功
• npm run format:check が成功
• npm run test が成功
• npm run build が成功

完了したらメモで報告してください。