How to Add OG Images to Next.js in 30 Seconds

Every time someone shares a link to your Next.js site, the social platform shows a preview card. That card is powered by Open Graph (OG) images. Without one, your link looks like a plain text snippet — easy to scroll past.

Here's how to add dynamic OG images to your Next.js app in under a minute.

The problem

Most developers skip OG images because generating them is a pain:

• Designing 1200x630 images in Figma for every page
• Managing static image files that go stale
• Building custom image generation with Satori or Puppeteer

What if you could generate them with a single API call?

The solution: one curl command

curl "https://snap-og.com/api/og?title=My+Blog+Post&template=gradient" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -o og-image.png

That returns a pixel-perfect 1200x630 PNG. Use it as your page's OG image.

Adding it to Next.js

In your page's metadata, point the OG image URL directly to the API:

export const metadata = {
  openGraph: {
    images: [
      {
        url: "https://snap-og.com/api/og?title=My+Page+Title&template=gradient",
        width: 1200,
        height: 630,
      },
    ],
  },
};

For dynamic pages, generate the URL from your page data:

export function generateMetadata({ params }) {
  const post = getPost(params.slug);
  const ogUrl = new URL("https://snap-og.com/api/og");
  ogUrl.searchParams.set("title", post.title);
  ogUrl.searchParams.set("description", post.description);
  ogUrl.searchParams.set("template", "gradient");

  return {
    openGraph: {
      images: [{ url: ogUrl.toString(), width: 1200, height: 630 }],
    },
  };
}

Available templates

SnapOG ships with 4 templates:

• basic — Clean white layout with title and description
• gradient — Rich purple-blue gradient with centered text
• minimal — Bottom-aligned text with subtle accent line
• bold — Dark background with large uppercase text

Each supports light and dark themes.

Try it now

You can generate OG images for free at snap-og.com/try — no signup required. When you're ready for API access, the free plan includes 50 images per month.