OG Image Generator
Create beautiful 1200×630 Open Graph images for social media previews. Pick a template, customize, and download in seconds.
The dynamic URL can be used directly in your <meta> tags and updates in real time
yoursite.com
Your Page Title
A short description of what this page is about
Preview is approximate — generated image will be pixel-perfect
Add to your <head>: <meta property="og:image" content="https://yoursite.com/og-image/api/generate?title=..." />
What is an OG image?
An Open Graph (OG) image is the preview image that appears when someone shares your URL on social media — Twitter/X, LinkedIn, Facebook, Slack, WhatsApp, and iMessage all use it. Without one, platforms show a blank or generic preview. With a well-designed OG image, your links stand out and get significantly more clicks.
The image is defined in your HTML head with <meta property="og:image" content="...">. It should be 1200×630 pixels for best results across all platforms.
Recommended OG image sizes
| Platform | Recommended size | Aspect ratio |
|---|---|---|
| Twitter / X (summary large) | 1200 × 628px | 1.91:1 |
| Facebook / LinkedIn | 1200 × 630px | 1.91:1 |
| WhatsApp / iMessage | 1200 × 630px | 1.91:1 |
| Slack | 1200 × 630px | 1.91:1 |
| Discord | 1200 × 630px | 1.91:1 |
1200×630 is the universal safe size that works across all platforms.
How to add OG images in Next.js
In Next.js App Router, add OG image meta tags in your generateMetadata() function:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
return {
openGraph: {
images: [{
url: `https://yoursite.com/og-image/api/generate?title=${params.slug}`,
width: 1200,
height: 630,
}],
},
};
}Dynamic OG images per page
The generator URL accepts query parameters — pass your page title and subtitle dynamically to generate unique OG images for every page without storing any images. This is how large sites like Vercel, Linear, and GitHub generate OG images at scale.
Frequently asked questions
How do I test my OG image?
Use opengraph.xyz or cards-dev.twitter.com/validator to preview how your link will appear on each platform before publishing.
Why is my OG image not updating after I changed it?
Social platforms cache OG images aggressively. Twitter/X has a cache invalidation tool at cards-dev.twitter.com. For Facebook, use the Sharing Debugger at developers.facebook.com/tools/debug.
Can I use the dynamic URL directly in my meta tags?
Yes — the generator URL returns a PNG image. You can use it directly as the og:image content value. It will render on every request.
What is the difference between og:image and twitter:image?
They serve the same purpose but Twitter reads twitter:image if present, falling back to og:image. Set both for maximum compatibility.