How to Add Custom OG Images to Your Next.js App
Next.js makes it easy to set Open Graph meta tags, but creating the actual image is a different story. You can generate with `next/og`, hire a designer, or use an AI tool that gives you the image and the metadata snippet together. Here's how each approach works.
App Router: use generateMetadata
In the App Router, export a `generateMetadata` function from your `page.tsx`. Pass the image URL to `openGraph.images` and `twitter.images`. OGImagen gives you this snippet pre-filled with your generated image URL.
Pages Router: use next/head
In the Pages Router, use the `<Head>` component from `next/head` to set `og:image` and `twitter:image` meta tags. The snippet from OGImagen works out of the box.
Set metadataBase in your root layout
For App Router projects, set `metadataBase: new URL("https://your-domain.com")` in your root layout metadata. This ensures relative image URLs resolve correctly in social previews.
Test with the Twitter Card Validator
After deployment, paste your URL into the Twitter Card Validator and Facebook Sharing Debugger to verify the OG image is being picked up correctly. Clear the cache if needed.
Skip the runtime route entirely
Instead of maintaining an opengraph-image route, generate the card once over MCP or the REST API and paste the returned URL into generateMetadata. The image is a permanent CDN asset, so nothing is rendered on request and nothing breaks on deploy.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform. Try the AI generator free, no signup, or start from a free template.