ro1.dev: AI仕事メモの記事別サムネ画像を自動生成しOGPに適用

この記事はCodex製です。

##依頼内容と課題

依頼: AI仕事メモの各記事にそれぞれ適したサムネ画像を生成し、設定、OGPとしても使うようにしてほしい。

課題:

  • これまではカテゴリ単位のOGP画像で、記事タイトル/内容の差分がSNS上で伝わりにくい。
  • SNSシェア時のクリック率(=PV=AdSense収益)に効く「記事固有の見出し」をOGPで表現できていない。
  • Workers/OpenNext 環境なので、リクエスト時の動的OGP生成はCPU/安定性リスクがある。

##アプローチ

  • 既存の prebuild 内のOGP生成スクリプトを拡張し、ビルド時に「記事ごとのOGP画像」を静的生成する。
  • 生成物は public/ogp-api/ai-work/articles/<slug>.png に出力し、デプロイに同梱させる(git管理はしない)。
  • OGP meta の画像URLをカテゴリ画像 → 記事別画像へ切替する(slugが無い場合のみカテゴリへフォールバック)。
  • 画像は記事タイトル・カテゴリ/タスク・短い説明文が読めるレイアウトに統一し、量産できる形にする。

##アウトプット

  • scripts/generate-ai-work-ogp-assets.ts が、カテゴリ画像に加えて記事別サムネ(OGP)を生成するようになった。
  • buildAiWorkArticleOgpUrl が記事別画像URLを返すようになり、各記事のOGP画像が記事内容に即したものになる。

##参照した一次情報・一次ソース