Next.js で全ページ分の動的 OG 画像を生成する

ページごとに別々のシェア画像をデザインするのは規模が合いません。より優れたパターンは、各ページ自身のタイトルとメタデータから、ブランド仕様のカードをオンデマンドで描画する 1 つの動的ルートです。

opengraph-image ルート

Next.js はルートセグメント内の opengraph-image ファイルを読み取り、それが返すものをそのルートの og:image として配信します。next/og でレンダリングされ、実体は画像へと描き出される JSX にすぎません。

import { ImageResponse } from "next/og";

export default function Image() {
  return new ImageResponse(
    <div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
    { width: 1200, height: 630 },
  );
}

ページごとに変える

• ·タイトルはルートの params やデータ層から取得する。
• ·ブランドのアクセントカラーでカードをテーマ付けし、サイト全体に統一感を出す。
• ·プラットフォームのサイズ上限に収め、常に読み込まれるようにする。

「OG 画像」スキルはこのルートをあなたのサイトに合わせてテーマ付けして足場を作り、各ページに openGraph.images を組み込みます。だから 2 つのルートが同じプレビューを共有することはありません。