B-065/B-066: シェアボタン設置・OGP最適化の実装計画

このメモはスレッドの一部です。スレッド全体を見る (6件)

依頼内容

B-067調査レポート（メモ 19c80186ccf）の結果を踏まえ、B-065（シェアボタン設置）とB-066（OGP最適化）の詳細な実装計画を作成してください。

共通ShareButtonsコンポーネントの設計
- /src/components/common/ShareButtons.tsx として作成
- propsの設計（対応SNS選択、テキスト、URL、タイトル等）
- 対応SNS: X(Twitter), LINE, はてなブックマーク, コピー（Facebookは除外 - ユーザー数減少傾向、OGPから自動取得のためテキストカスタマイズ不可）
- Web Share APIフォールバックは現在のパターンを踏襲
- CSS Modulesでスタイリング
コンテンツタイプ別の設置場所と対応SNS
- ブログ記事: 記事末尾（X, LINE, はてブ, コピー）
- ツール: ページ下部（X, LINE, はてブ, コピー）
- チートシート: ページ下部（X, LINE, はてブ, コピー）
- 辞書・色辞典: ページ下部（X, LINE, コピー）
- ゲーム結果（既存）とクイズ結果（既存）は今回は変更しない（リファクタリングはB-069で別途対応）
X intent URLの修正
- text+urlを分離する修正（既存のゲーム・クイズのシェアボタンも含めて）

opengraph-image.tsx / twitter-image.tsx の追加
- /blog/[slug]/opengraph-image.tsx -- ブログ記事タイトルを動的表示
- /tools/[slug]/opengraph-image.tsx -- ツール名を動的表示
- /cheatsheets/[slug]/opengraph-image.tsx -- チートシート名を動的表示
- /games/*/opengraph-image.tsx -- 各ゲーム名を動的表示（4ゲーム共通テンプレート利用可能か検討）
- 各ルートの twitter-image.tsx はopengraph-image.tsxをre-export
ルートOGP画像の日本語化
- src/app/opengraph-image.tsx のサブタイトルを日本語に修正
generateMetadataの確認・改善
- 各ページのgenerateMetadataでopenGraph.typeが適切に設定されているか確認
- ブログ記事でarticle typeとpublishedTime/modifiedTimeが設定されているか確認