How to Add OG Images to Next.js — Step-by-Step Guide
Add dynamic Open Graph images to your Next.js app in 5 minutes. Covers App Router metadata API, dynamic routes, and API-based generation.
Quick Answer
To add OG images in Next.js App Router, export a metadata object or generateMetadata function from your page and set the openGraph.images property to an image URL. The fastest approach is using an API like ogimg.xyz that generates images from your page title and description.
Next.js Metadata API for OG Images
Next.js App Router provides a built-in metadata API for setting Open Graph tags. Here's the simplest approach:
// app/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
openGraph: {
title: "My Page Title",
description: "A brief description",
images: [
{
url: "https://ogimg.xyz/api/og?title=My+Page+Title&template=gradient",
width: 1200,
height: 630,
alt: "My Page Title",
},
],
},
};
export default function Page() {
return <div>Your page content</div>;
}Next.js automatically renders the <meta property="og:image"> tag in the HTML <head>.
Dynamic OG Images for Blog Posts
For dynamic routes like /blog/[slug], use generateMetadata to create OG images from post data:
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
interface Props {
params: Promise<{ slug: string }>;
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
const post = await getPost(slug);
const ogImageUrl = `https://ogimg.xyz/api/og?${new URLSearchParams({
title: post.title,
description: post.excerpt,
template: "blog",
pattern: "dots",
})}`;
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
type: "article",
images: [{ url: ogImageUrl, width: 1200, height: 630 }],
},
};
}Every blog post automatically gets a unique, branded OG image based on its title and excerpt.
Using ogimg.xyz API Key for Higher Limits
For production use with more than 50 images/month, add your API key:
const ogImageUrl = `https://ogimg.xyz/api/og?${new URLSearchParams({
title: post.title,
description: post.excerpt,
template: "gradient",
key: process.env.OGIMG_API_KEY!,
})}`;Add OGIMG_API_KEY to your .env.local file and your Vercel environment variables.
Testing Your OG Images
After deployment, verify your OG images work correctly:
- View source: Check that
<meta property="og:image">is present in the HTML - Twitter Card Validator: Paste your URL at cards-dev.twitter.com
- Facebook Debugger: Use developers.facebook.com/tools/debug
- LinkedIn Inspector: Use linkedin.com/post-inspector
- OpenGraph.xyz: Preview how your link looks across platforms
Frequently Asked Questions
Does this work with Next.js Pages Router?
Yes. For Pages Router, use next/head to add meta tags manually: <Head><meta property="og:image" content="your-image-url" /></Head>.
Can I use @vercel/og instead?
Yes. @vercel/og lets you self-host OG image generation. However, it requires writing JSX templates with Satori's limited CSS subset. An API like ogimg.xyz provides pre-built templates so you can skip the template development.
Do OG images affect Next.js build time?
No. OG images are generated on-demand when social media crawlers fetch them, not during your Next.js build. There is zero impact on build time.
Related Guides
Compare with Alternatives
See how OG Image Generator stacks up against other tools.
Start Generating OG Images
Free API for developers. 50 images/month, 10 templates, no credit card required.