Guide

Next.js Open Graph images via API

In App Router metadata, point openGraph.images at a URL your server can generate. With OG Stamp that URL is our API — no local Satori route required.

Pattern

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  const img = new URL("https://ogstamp.com/api/og");
  img.searchParams.set("title", post.title);
  img.searchParams.set("subtitle", post.excerpt || "Blog");
  img.searchParams.set("theme", "forest");
  return {
    title: post.title,
    openGraph: { images: [{ url: img.toString(), width: 1200, height: 630 }] },
  };
}

For production volume, proxy through your own route that attaches Authorization: Bearer ogs_… so the key never ships to the browser. See API docs.

Why not only @vercel/og?

Self-hosting is fine until fonts, edge CPU, and layout regressions cost more than a $9 credit pack. Comparison: Vercel OG vs OG Stamp.