← All posts
5 min read

Generate a dynamic OG image for every page in Next.js

One route can render a branded social image per page from its title and metadata — no design tool, no manual export. Here's the pattern.

Designing a separate share image for every page doesn't scale. The better pattern is one dynamic route that draws a branded card on demand from each page's own title and metadata.

The opengraph-image route

Next.js reads an opengraph-image file in a route segment and serves whatever it returns as that route's og:image. Rendered with next/og, it's just JSX drawn to an image.

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 },
  );
}

Make it per-page

  • Pull the title from the route's params or your data layer.
  • Theme the card with your brand accent so the network feels consistent.
  • Keep it under the platform size limits so it always loads.

The OG Image skill scaffolds this route themed to your site and wires openGraph.images across your pages, so no two routes share a preview.

Generate a dynamic OG image for every page in Next.js