在 Next.js 中為每個頁面產生動態 OG 圖片

為每個頁面各自設計一張分享圖片是行不通的做法。更好的模式是用一條動態路由，依每個頁面自己的標題和中繼資料，按需繪製一張品牌化的卡片。

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 Image 技能會依你的網站主題搭建這條路由，並在你所有頁面上串接 openGraph.images，讓沒有任何兩條路由共用同一張預覽。