mcpField
O
og-images

og-images

github.com/richtaborデザイン・UI7351 回インストール29 週間前に更新
リポジトリ

og-images について

Next.js で `next/og` と `ImageResponse` を使い、OpenGraph 画像や Twitter 画像を生成するスキルです。ソーシャル共有カードを作る開発者向けに、ファイルベースと API ルートの方法を説明します。

主な機能

  1. 01ファイルベースと API ルートの構成
  2. 02OpenGraph と Twitter の画像サイズ
  3. 03動的タイトルとメタデータの連携
  4. 04レイアウト、フォント、任意のブランド要素
  5. 05Satori のスタイル要件

活用シーン

  1. 01静的ページの共有カード生成
  2. 02CMS コンテンツ用画像の作成
  3. 03メタデータによるソーシャル画像設定
  4. 04開発中の画像ルートのプレビュー

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/richtabor/agent-skills --skill og-images

インストール後、Claude Code で/og-imagesを入力して読み込まれたか確認します。

詳細

Next.js 向けシェア画像の作成

next/og の ImageResponse を使って、動的な OpenGraph（1200x630）画像と Twitter（1200x600）画像を生成します。

アプローチの選択

  • ファイルベースのルート（app/opengraph-image.tsx）：ビルド時にタイトルが決まっている静的ページに最適です。runtime、alt、size、contentType と、デフォルトの Image 関数をエクスポートします。
  • API ルート（app/api/og/route.tsx）：動的コンテンツ（ブログ記事、CMS）に最適です。クエリパラメーターとして slug や title を受け取ります。generateMetadata() から参照します。

どちらのアプローチでも export const runtime = "edge" を使用します。

ファイル名の規則

ファイル用途サイズ
opengraph-image.tsxFacebook、LinkedIn、iMessage1200x630
twitter-image.tsxTwitter/X カード1200x600
app/api/og/route.tsx動的 API ルート1200x630

ファイルベースのルートは、該当するルートディレクトリに配置します（例：/about の場合は app/about/opengraph-image.tsx）。

レイアウトのパターン

  • flexDirection: "column" と justifyContent: "space-between" を使って、コンテンツとブランド要素を分けます
  • タイトルとサブタイトル（例：著者名）は、左上に縦方向に並べたフレックス列として配置します
  • タイトル：大きく、太字または中程度のウェイトで、暗い色にします
  • サブタイトル：同じサイズか小さめにし、ウェイトを軽くして、控えめな色（例：#888）にします
  • textWrap: "balance" でテキストを左揃えにし、maxWidth で幅を制限します
  • 大きなサイズで引き締まったエディトリアルな印象にするには、letterSpacing: "-0.02em" を使います
  • パディング：1200x630 では、すべての辺を 48px にするとうまくいきます

アバター／ロゴ（任意）

プロジェクトにアバターやロゴがある場合は、justifyContent: "flex-end" を指定したフレックスコンテナーを使い、右下隅に配置します。画像は fetch と arrayBuffer で読み込み、base64 データ URI に変換して src に設定します。円形のアバターには borderRadius: "50%" を使います。読み込んだアセットは Map にキャッシュし、再取得を防ぎます。

カスタムフォント

public/fonts/ の .ttf ファイルを new URL("../../../public/fonts/YourFont.ttf", import.meta.url) で読み込みます。ArrayBuffer を fonts オプション経由で ImageResponse に渡します。フォントバッファーは初回読み込み後にキャッシュします。フォント設定の weight は、実際のフォントファイルのウェイトに合わせます。

タイトルケース

タイトルが CMS から取得される場合は、スマートなタイトルケースを適用します。

  • 小さな単語（a、an、the、and、but、for、in、of など）は、先頭または末尾にある場合を除き小文字にします
  • ブランド名は常に正しい表記にします（WordPress、JavaScript、GitHub、macOS など）
  • 既知の頭字語は大文字にします（AI、API、CSS、HTML、UI、UX）
  • ハイフンでつながれた単語は、それぞれの部分を個別に大文字で始めます

メタデータとの統合

generateMetadata() で OG ルートを参照します。

export function generateMetadata({ params }) {
  return {
    openGraph: {
      images: [`/api/og?slug=${params.slug}`],
    },
  };
}

静的ページでは、タイトルを直接渡します：/api/og?title=About。

Satori の規則

これらは next/og レンダリングエンジン（Satori）の必須要件です。

  1. すべての要素に display: "flex" が必要です — 使用できるレイアウトモードはこれだけです
  2. インラインスタイルのみ — CSS クラス、外部スタイルシート、CSS 変数は使用できません
  3. すべてのテキストを要素内に配置し、スタイルプロパティを明示的に指定します
  4. 16 進数カラーを使用します — rgb()、hsl()、CSS 変数は使用できません
  5. 古いバージョンでは gap を使用できません — 使用する前にテストし、代わりにマージンを使います

よくある問題

問題解決策
テキストが表示されないテキストのラッパーに display: "flex" を追加します
レイアウトが崩れるすべてのコンテナーに display: "flex" が指定されていることを確認します
色がおかしいCSS 変数ではなく、16 進数カラーを使います
フォントが読み込まれないルートファイルから public/fonts/ への相対パスを確認します
画像が表示されない相対パスは使わず、base64 データ URI に変換します

テスト

開発中は、ブラウザーでルートに直接アクセスしてプレビューします。

http://localhost:3000/api/og?title=Hello+World

ビルド後、ビルド出力でルートが動的（f 接頭辞）として登録されていることを確認します。

コメント

Markdown 対応