OG Image Best Practices
Open Graph images are the preview images shown when you share a URL on Twitter, LinkedIn, Slack, Discord, and elsewhere. Getting them right significantly increases click-through rates.
Correct dimensions
Universal safe size: 1200×630px
This is the standard. It works on Twitter, Facebook, LinkedIn, and most Slack/Discord unfurlers.
| Platform | Recommended | Min size | Aspect ratio |
|---|---|---|---|
| Twitter/X | 1200×630 | 600×314 | 1.91:1 |
| 1200×630 | 600×315 | 1.91:1 | |
| 1200×627 | 1200×627 | ~1.91:1 | |
| Discord | 1200×630 | Any | Crops to 1.91:1 |
Stick to 1200×630 and you're safe everywhere.
Format: JPEG or PNG?
Use JPEG for photos and complex gradients. Use PNG for sharp text and UI elements.
For generated OG images (templates), PNG is usually better — crisp text, predictable rendering.
Keep file size under 1MB. Most platforms cache OG images aggressively, but large files slow the initial unfurl.
Common mistakes
1. Image behind authentication Your OG image URL must be publicly accessible. Social crawlers don't have your session cookie.
2. Wrong Content-Type header
Make sure your image URL serves Content-Type: image/jpeg or image/png. Some CDNs serve application/octet-stream by default — that breaks unfurlers.
3. Missing og:image:width and og:image:height Always include these meta tags:
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Without them, some platforms re-fetch to determine dimensions, adding latency.
4. Text too small Remember OG images are displayed at roughly 500px wide on most platforms. Use minimum 40px font size for titles.
5. Not refreshing the cache Facebook and LinkedIn cache OG images aggressively. Use their debug tools to force a refresh:
- Facebook: developers.facebook.com/tools/debug
- LinkedIn: linkedin.com/post-inspector
Generating OG images dynamically
Static OG images work for landing pages. For dynamic content (blog posts, user profiles, product pages), you need generated images.
Three options:
- @vercel/og — works well within Next.js, limited to subset of CSS
- Puppeteer/Playwright — full CSS support, complex to maintain
- SnapSharp API — one API call, templates included, hosted for you
curl -X POST "https://api.snapsharp.dev/v1/og-image" \
-H "Authorization: Bearer sk_live_..." \
-d '{"template":"blog-post","data":{"title":"My Post","author":"Jane"}}'No infrastructure to manage. The image is cached in Redis for 1 hour by default.