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.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Next.js app