OG Image Generator
Create 1200×630 Open Graph images with template, logo, alignment, color, and sizing controls, then preview them in real social-card contexts and export a dynamic URL or code snippet.
https://yoursite.com/api/og-image/generate?template=bold&title=Your+Page+Title&subtitle=A+short+description+of+what+this+page+is+about&siteName=&primaryColor=%230f172a&accentColor=%236366f1&titleAlign=left&titleScale=100&subtitleScale=100
The preview and downloaded image now use the same renderer, so what you see is much closer to what you ship.
X / Twitter
summary_large_image
Your Page Title
A short description of what this page is about
LinkedIn / Facebook
Site
Your Page Title
A short description of what this page is about
Slack / Discord
Link unfurl
Your Page Title
A short description of what this page is about
Add to your <head>: <meta property="og:image" content="https://yoursite.com/api/og-image/generate?template=bold&title=Your+Page+Title&subtitle=A+short+description+of+what+this+page+is+about&siteName=&primaryColor=%230f172a&accentColor=%236366f1&titleAlign=left&titleScale=100&subtitleScale=100" />
Explore OG Image Use Cases
Browse focused OG image pages for Twitter cards, LinkedIn previews, blog images, Facebook sharing, and dynamic route-driven images.
Twitter Card Image Generator
Design stronger summary-large-image cards for X and Twitter-style social previews
LinkedIn OG Image Generator
Create cleaner, more professional social preview images for LinkedIn shares and company content
Blog OG Image Generator
Generate article-ready Open Graph images for posts, guides, tutorials, and editorial content
Dynamic OG Image Generator
Create reusable Open Graph image URLs for dynamic routes, content systems, and programmatic metadata workflows
Facebook OG Image Generator
Create Open Graph images designed for broader social sharing and standard link preview contexts
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 most platforms, and the important content should stay comfortably inside the safe area rather than hugging the edges.
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, but safe spacing and readable typography matter almost as much as the raw dimensions.
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/api/og-image/generate?title=${params.slug}`,
width: 1200,
height: 630,
}],
},
};
}Dynamic OG images per page
The generator URL accepts query parameters — pass your page title, subtitle, colors, alignment, and optional logo URL dynamically to generate unique OG images for every page without storing any image files manually.
What makes a strong OG image generator
Shared preview and output renderer
If the preview and generated image use different layouts, users stop trusting the tool.
Safe-area awareness
Large titles and logos need breathing room so they do not feel cropped in platform cards.
Platform context previews
Twitter, LinkedIn, and Slack cards feel different, so context previews make design choices clearer.
Usable export snippets
A dynamic URL is helpful, but code snippets for meta tags and Next.js make implementation much faster.
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, so you can use it directly as the og:image value or inside Next.js metadata.
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.
Why do some tools show a preview that does not match the download?
That usually happens when the preview is built separately from the final image renderer. This tool now uses the same renderer for both so the result is much closer.