InBuild
GuidesApril 9, 20266 min read

OpenGraph Images in Next.js: Dynamic OG Cards That Get Clicks

Social previews make or break link shares. Here's how to generate dynamic OpenGraph images in Next.js using ImageResponse — with code examples and design patterns.

When someone shares your URL on Twitter, Slack, or LinkedIn, the preview card is your first impression. A branded OG image gets 2–5x more clicks than a generic one. Here's how to set them up in Next.js.

The approach: ImageResponse

Next.js provides ImageResponse from next/og — an edge-runtime function that renders JSX to a PNG image. Create an opengraph-image.tsx file in any route folder and export a default function that returns an ImageResponse.

Basic pattern

At minimum, your OG image needs: your brand mark, the page title, a subtitle, and a branded footer. Use a dark gradient background, white text, and your brand's accent color for visual pop.

Dynamic per-route images

For dynamic routes like /blog/[slug], accept params in the function and fetch the page data. Render the post title, category, and reading time on the card. Each URL gets its own unique preview.

The shared renderer pattern

Extract the OG image layout into a shared function in lib/seo/og-image.tsx. Each route's opengraph-image.tsx calls the shared function with route-specific data (eyebrow, title, subtitle, footer tags). One layout, many variants.

Design tips for OG images

  • Brand mark top-left. Logo + wordmark at 32px. Establishes identity instantly.
  • Title at 76–84px. Must be readable in a small preview thumbnail. Short, bold, high-contrast.
  • Subtitle at 28px. One sentence of context. Muted color (70% opacity white on dark).
  • Footer badges. Three to four keywords or tags at the bottom. Gives context without cluttering.
  • Dark background gradient. Dark OG images stand out in light-mode feeds (which is most feeds).

Testing

Always test before shipping:

  • Facebook Debugger — scrapes the URL and shows the resolved OG image.
  • Twitter Card Validator — preview how the card renders on Twitter/X.
  • LinkedIn Post Inspector — LinkedIn caches aggressively; use the inspector to force a refresh.
  • Slack — paste the URL in a DM to yourself. Slack renders the preview inline.

Common mistakes

  • Relative URLs. OG images must be absolute. Set metadataBase in your root layout.
  • Missing on production. Edge-runtime OG images work differently in dev vs production. Always verify on the deployed URL.
  • Too much text. The image renders at ~600px wide in most feeds. If you can't read it at that size, simplify.

Frequently asked questions

What size should an OG image be?

1200×630 pixels. This is the standard across Facebook, Twitter/X, LinkedIn, and Slack. Always use absolute URLs — relative paths break on social platforms.

Do OG images affect SEO?

Not directly — Google doesn't use OG images as a ranking factor. But they massively affect click-through rate from social shares, which drives traffic, which indirectly improves ranking signals.

Can I generate different OG images per page?

Yes. In Next.js, place an opengraph-image.tsx file in any route folder. It generates a unique image for that route. Use dynamic data (page title, category) to brand each card.

Ready to build?

Turn your next idea into a production-ready app in minutes.

Keep reading

Guides

Google Search Console for Developers: Setup, Sitemap, and Monitoring

GSC is your direct line to Google. Here's how to set it up, submit your sitemap, request indexing, and monitor your site's search performance.

Guides

React Server Components Explained: What They Are and Why They Matter

React Server Components run on the server, send zero JavaScript to the browser, and are the default in Next.js App Router. Here's what that means for your app.

Guides

How to Design a Hero Section That Converts (With Examples)

The hero section gets 5 seconds. Here's how to use them: headline structure, CTA placement, social proof positioning, and the 2026 design patterns that work.