OG Images for Next.js
Add dynamic OG images to your Next.js app in 2 minutes
OGMagic works perfectly with Next.js App Router and Pages Router. No build-time generation, no complex setup — just a URL in your metadata.
Quick Start
Add OGMagic to your Next.js project — no packages to install, no API keys to configure.
// app/layout.tsx (App Router)
export const metadata = {
openGraph: {
images: [{
url: 'https://ogmagic.dev/api/og?template=gradient-mesh&title=My+Site&domain=mysite.com',
width: 1200,
height: 630,
}],
},
};Dynamic OG Images
Generate unique OG images per page using route data:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
const ogUrl = new URL('https://ogmagic.dev/api/og');
ogUrl.searchParams.set('template', 'gradient-mesh');
ogUrl.searchParams.set('title', post.title);
ogUrl.searchParams.set('description', post.excerpt);
ogUrl.searchParams.set('domain', 'mysite.com');
return {
openGraph: {
images: [{ url: ogUrl.toString(), width: 1200, height: 630 }],
},
};
}💡 Works with both App Router (generateMetadata) and Pages Router (next-seo or Head component). No API keys needed for free tier.
Why use OGMagic with Next.js?
No build step
Images are generated on-demand via URL. No build plugins, no CI/CD changes.
55+ templates
Professional designs out of the box. Customize with query parameters.
No API key needed
Free tier works instantly — just use the URL. No signup, no config.
Every platform
Optimized 1200×630 images that look great on Twitter/X, Facebook, LinkedIn, Discord, and Slack.
Ready to add OG images to your Next.js app?
Start with 50 free API calls/month. No signup needed.