Ship Open Graph images that look like the rest of your site.

Three approaches, one API

Next.js example — dynamic OG per route

App router, route handler, full HTML/CSS template. Replace @vercel/og with a server fetch to /v1/render:

// app/og/[slug]/route.ts
import { NextRequest } from "next/server";

export async function GET(
  _req: NextRequest,
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  const html = `
    <div style="
      width: 1200px; height: 630px;
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 80px;
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
      color: white; font-family: 'Inter', sans-serif;
    ">
      <div style="font-size: 24px; opacity: 0.6;">${post.category}</div>
      <h1 style="font-size: 72px; line-height: 1.1; font-weight: 700;">
        ${post.title}
      </h1>
      <div style="display: flex; gap: 16px; align-items: center; font-size: 22px;">
        <span>${post.author}</span> · <span>${post.date}</span>
      </div>
    </div>`;

  const res = await fetch("https://api.codetoimage.app/v1/render", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.CODETOIMAGE_API_KEY!,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ html, width: 1200, height: 630, format: "png" }),
    next: { revalidate: 3600 },
  });

  return new Response(res.body, {
    headers: {
      "Content-Type": "image/png",
      "Cache-Control": "public, max-age=3600, s-maxage=86400",
    },
  });
}

In your page metadata, reference it: openGraph: { images: ['/og/' + slug] }. Caches at CDN edge for 24h, regenerates server-side hourly.

Build-time alternative — CLI in CI

When OG content is fixed at deploy time (blog post titles in MDX, doc page headings), generate PNGs once during build:

# .github/workflows/og.yml
name: og-images
on: { push: { branches: [main], paths: ['content/**'] } }
jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - name: Generate OG per MDX file
        run: |
          for f in content/posts/*.mdx; do
            slug=$(basename "$f" .mdx)
            title=$(grep -oP '(?<=^title: ).*' "$f")
            npx @codetoimage/cli render \
              --html "<div style='...'>${title}</div>" \
              -o "public/og/${slug}.png" \
              -w 1200 -h 630
          done
        env:
          CODETOIMAGE_API_KEY: ${{ secrets.CODETOIMAGE_API_KEY }}
      - run: git add public/og && git diff --cached --quiet || \
             (git commit -m "chore: regenerate og" && git push)

vs @vercel/og

What you get

FAQ