OG Image Generator
Free online — 1200×630px Open Graph image — no signup, no watermark
Text
Font
Templates
Background Color
What Is an OG Image and Why Does It Matter?
An Open Graph (OG) image is the preview image displayed when a URL is shared on social media platforms, messaging apps (Slack, WhatsApp, iMessage), and search engines. It is defined by the og:image meta tag in your page's HTML head.
Without a custom OG image, platforms display a random screenshot of your page — often the header or a misaligned section. A well-designed OG image increases click-through rate on shared links by 3–5× compared to pages with no OG image. Every blog post, product page, and landing page should have one.
OG Image Size — Exact Specifications
| Platform | Display size | Notes |
|---|---|---|
| 1200×630px (recommended) | Minimum 600×315px | |
| Twitter/X | 1200×630px | summary_large_image card |
| 1200×627px | Very close to standard | |
| Slack | 1200×630px | Shown in link unfurls |
| iMessage | 1200×630px | iOS link previews |
| 1200×630px | Android and iOS |
1200×630px works everywhere — use this as your standard OG image size. This tool exports at exactly 1200×630px.
How to Add an OG Image to Your Website
- Create and download your OG image using this tool.
- Upload it to your server or CDN (e.g.,
/public/og-image.jpg). - Add meta tags to your page's
<head>:
<meta property="og:image" content="https://yoursite.com/og-image.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/og-image.jpg" />
OG Image Design Best Practices
Keep text minimal and large
OG images appear at small sizes in social feeds (around 400px wide on mobile). Use large bold text — your headline should be readable at thumbnail size without zooming.
High contrast between text and background
Light text on dark background (or vice versa) ensures readability across all social platforms and themes. Avoid mid-tone backgrounds where text gets lost.
Include your brand identity
Add your logo, site name, or domain name consistently. Users who see your OG image repeatedly build brand recognition — even before clicking.
Avoid important content at the edges
Some platforms crop OG images slightly. Keep all text and logos at least 40px from each edge. The center 90% of the image is always safe.
How to Implement OG Images in Popular Frameworks
Next.js (App Router)
// app/layout.tsx or page.tsx
export const metadata = {
openGraph: {
images: [{ url: 'https://yoursite.com/og.jpg', width: 1200, height: 630 }],
},
twitter: { card: 'summary_large_image' },
}WordPress
// Add to functions.php or use Yoast SEO plugin
add_action('wp_head', function() {
echo '<meta property="og:image" content="' . get_template_directory_uri() . '/og.jpg">';
});How to Test Your OG Image
After adding your OG meta tags, validate them using these tools before sharing your URL publicly:
- Facebook Sharing Debugger (developers.facebook.com/tools/debug) — Previews how your URL appears when shared on Facebook. Also clears Facebook's cache of old OG data.
- Twitter Card Validator (cards-dev.twitter.com/validator) — Shows the Twitter card preview including your og:image.
- LinkedIn Post Inspector (linkedin.com/post-inspector) — Validates LinkedIn's rendering of your OG image and clears LinkedIn's cache.
- OpenGraph.xyz (opengraph.xyz) — Multi-platform preview tool — shows your OG image across Facebook, Twitter, LinkedIn, Slack in one view.
Optimize Your OG Image
Keep your OG image under 300KB for fast loading. Large OG images slow down link preview rendering on Slack and iMessage. Use CompressImg.pro to compress your JPG to under 200KB without visible quality loss.