Free OG Image Generator
Create stunning social preview images in seconds
Editor
Content
Use an emoji or short text
Colors
Preview
Social Media Previews
Export
// app/opengraph-image.tsx
import { ImageResponse } from 'next/og';
export const runtime = 'edge';
export const alt = 'Build faster with Next.js';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';
export default async function Image() {
// Load font - place Inter-Bold.ttf in app/ directory
const interBold = await fetch(
new URL('./Inter-Bold.ttf', import.meta.url)
).then((res) => res.arrayBuffer());
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
fontFamily: 'Inter',
padding: 60,
}}
>
<div style={{ fontSize: 72, marginBottom: 24, display: 'flex' }}>
⚡
</div>
<div
style={{
fontSize: 60,
fontWeight: 700,
color: '#ffffff',
textAlign: 'center',
lineHeight: 1.2,
display: 'flex',
}}
>
Build faster with Next.js
</div>
<div
style={{
fontSize: 26,
color: '#ffffff',
opacity: 0.85,
marginTop: 20,
textAlign: 'center',
display: 'flex',
}}
>
The React Framework for Production
</div>
</div>
),
{
...size,
fonts: [
{
name: 'Inter',
data: interBold,
style: 'normal',
weight: 700,
},
],
}
);
}Why OG Images Matter More Than You Think
Look, here's the deal. Your brain processes images 60,000 times faster than text. That's not marketing fluff—that's neuroscience. When someone scrolls through Twitter and sees your link, you have about 0.05 seconds to grab their attention. That's faster than a blink. So what do you do? You make that preview image absolutely impossible to ignore.
According to BuzzSumo's analysis of over 100 million articles, posts with images get 2.3x more engagement than those without. That's not a marginal improvement—that's more than double. INMA's 2024 research on Facebook content shows even more dramatic results: posts with images receive 100% more engagement and 114% more impressions compared to text-only posts.
Think about it this way: every time you share a link without a proper OG image, you're essentially showing up to a party in your pajamas. Sure, you're there, but nobody's going to remember you. The OG image is your first impression, and on social media, first impressions are the only impressions that matter.
The Science Behind Social Sharing
Here's something wild: humans are visual creatures. Our ancestors didn't survive by reading warning labels—they survived by instantly recognizing patterns and colors. That same neural wiring is still running the show when someone scrolls through their feed at 3 AM.
Visual content gets processed in the brain's occipital lobe almost instantaneously, while text has to go through multiple processing stages. This is why a compelling OG image can stop someone mid-scroll, while even the most brilliant headline might get lost in the noise.
The average social media click-through rate (CTR) in Q2 2024 was 0.66%, according to Statista. That might sound low, but consider this: e-commerce advertising averages around 1.75% CTR. The difference between these numbers often comes down to visual presentation. A well-designed OG image with clear messaging can push your CTR well above average.
The key insight? People don't read on social media—they scan. Your OG image is the billboard on a highway. It needs to communicate value in the time it takes someone's thumb to swipe past it.
Platform-Specific Image Dimensions
Each social platform has its own preferred image dimensions. Using the wrong size means your carefully crafted image gets cropped, stretched, or compressed into something unrecognizable. Here's what you need to know:
| Platform | Image Size | Aspect Ratio | Notes |
|---|---|---|---|
| 1200 × 630 px | 1.91:1 | Standard for feed posts | |
| Twitter/X | 1200 × 628 px | 1.91:1 | Summary large image card |
| 1200 × 627 px | 1.91:1 | Shared link preview | |
| Discord | 1200 × 630 px | 1.91:1 | Embed preview |
| Slack | 1200 × 630 px | 1.91:1 | Unfurled links |
Source: Hootsuite Social Media Image Sizes Guide, Sprout Social 2024
Pro tip: The universal safe zone is 1200 × 630 pixels with a 1.91:1 aspect ratio. This works well across all major platforms and ensures your image displays correctly everywhere your content gets shared.
How to Use This Generator
Creating professional OG images doesn't require design skills or expensive software. Here's how to create stunning social preview images in three simple steps:
Enter Your Content
Add your title, description, and optional emoji icon. Keep your title under 60 characters for optimal display across all platforms.
Choose Your Style
Select from 8 professionally designed templates. Customize colors, fonts, and layout to match your brand identity.
Export & Implement
Download your image as PNG or copy the ready-to-use code snippets for Next.js, HTML meta tags, or Vercel OG.
OG Image Best Practices
After analyzing thousands of high-performing social posts, here are the principles that consistently drive engagement:
Keep Text Large and Readable
Your title should be readable even on mobile feeds. Most people view social media on phones with 6-inch screens. If your text looks small on your desktop preview, it'll be invisible on mobile.
Use High Contrast Colors
The WCAG recommends a minimum contrast ratio of 4.5:1 for text. Dark text on light backgrounds or light text on dark backgrounds ensures your message cuts through the visual noise of crowded feeds.
Include Your Brand
Use consistent colors, fonts, or a subtle logo. When people see your content shared multiple times, brand recognition builds trust. They start clicking because they recognize the source, not just the content.
Test Before Publishing
Use our OG Validator to preview how your image will appear on different platforms. What looks perfect in your editor might get cropped differently on each social network.
Focus on the Value Proposition
Don't just describe what the content is—tell people what they'll gain from clicking. "How to Build a Startup" is decent. "Build a Profitable Startup in 90 Days" is compelling.
Who Built This Tool
This OG image generator is an open-source project built by developers who got tired of paying for simple tools or wrestling with complex design software just to create preview images. We believe fundamental web tools should be free, fast, and respect user privacy.
The generator runs entirely in your browser using Satori and Resvg WASM. Your content never touches our servers—it's processed locally on your device. No accounts, no tracking, no hidden fees. Just paste your content and get a professional OG image.
The source code is available on GitHub. Found a bug? Want a new feature? Contributions are welcome. This is a community project, and the community decides where it goes next.
Ready to create your first OG image?
Scroll back up and start designing. It takes less than 30 seconds.
Frequently Asked Questions
What is an OG image?
An OG (Open Graph) image is the preview image that appears when you share a link on social media platforms like Facebook, Twitter, LinkedIn, and Discord. It's defined using the og:image meta tag in your HTML and helps your content stand out in feeds.
What size should my OG image be?
The recommended size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This works optimally across all major social platforms including Facebook, Twitter, LinkedIn, and Discord without cropping or distortion.
Is this tool really free?
Yes, completely free with no hidden costs. The generator runs in your browser, so there are no server costs for us to recoup. No accounts, no watermarks, no limits on how many images you create.
Do you store my content?
No. All image generation happens locally in your browser using WebAssembly. Your titles, descriptions, and generated images never leave your device. We don't have servers that could store your data even if we wanted to.