OG Image Best Practices: 12 Rules for Maximum Social Media Engagement

After analyzing thousands of link previews across Twitter, Facebook, LinkedIn, and Slack, these 12 rules consistently produce the best results:

1. Use 1200x630px (1.91:1 ratio). This is the universal size that works across every platform without cropping.
2. Keep text at 40px minimum. OG images are displayed at thumbnail size. Text below 40px (at 1200px width) becomes unreadable.
3. Limit to 6-8 words in the headline. Long titles get truncated or become too small. If your page title is long, write a shorter OG-specific headline.
4. Use high-contrast colors. Dark text on light backgrounds, or light text on dark backgrounds. Avoid low-contrast combinations like light gray on white.
5. Maintain a 60px safe zone. Some platforms crop a few pixels from each edge. Keep all important content at least 60px from any edge.
6. Include your brand. Add your logo, site name, or favicon so the image is recognizable even without the link text.
7. Use consistent templates. All OG images on your site should follow the same visual style for brand recognition.
8. Prefer PNG over JPEG. For text-heavy images, PNG keeps text sharp. Use JPEG only for photographic images.
9. Keep file size under 1MB. While platforms accept up to 5-8MB, smaller files load faster. Most OG images should be 100-500KB.
10. Don't use transparency. PNG transparency may render as black or white on different platforms. Always use an opaque background.
11. Avoid text in the bottom 20%. Some platforms overlay the page title and domain on the bottom of the image.
12. Test on dark and light mode. Your OG image should look good against both white (Facebook) and dark (Twitter, Slack dark mode) backgrounds.

Text is the most important element of an OG image — it communicates the value of clicking the link. Here are the specific sizing guidelines:

Element	Minimum Font Size	Recommended	Max Characters
Headline	40px	48-64px	60
Subheadline	24px	28-36px	90
Brand name	18px	20-24px	30
URL / domain	14px	16-18px	40

Typography tips:

• Use bold or semi-bold weights for headlines — regular weight fades at small preview sizes.
• Use a sans-serif font for readability at thumbnail size. Inter, system-ui, and Arial work well.
• Set line height to 1.2-1.3 for headlines — tighter than body text but still readable.
• Truncate long titles with ellipsis rather than shrinking the font size. A readable 6-word title beats an unreadable 15-word title.

Poor contrast is the most common OG image mistake. Follow these contrast guidelines:

• Minimum contrast ratio: 4.5:1 between text and background (WCAG AA standard).
• Use solid overlays on photos: If your background is a photograph, add a semi-transparent dark overlay (e.g., rgba(0, 0, 0, 0.6)) behind the text.
• Avoid gradients under text unless the entire gradient range maintains sufficient contrast.
• Test against platform backgrounds: Facebook link previews have a white border. Twitter cards appear on dark backgrounds in dark mode. Your image should have visible edges in both contexts.

Recommended color combinations:

Style	Background	Text	Accent
Dark professional	#0f172a (slate-900)	#f8fafc (slate-50)	#6366f1 (indigo-500)
Light clean	#ffffff	#0f172a (slate-900)	#2563eb (blue-600)
Brand-forward	Your brand color	#ffffff	Lighter brand shade
Gradient	#4f46e5 → #7c3aed	#ffffff	#fbbf24 (amber-400)

Different platforms crop and display OG images differently. Use this safe zone layout to ensure nothing important is cut off:

+--------------------------------------------------+
|  60px padding (safe zone)                         |
|  +--------------------------------------------+  |
|  |                                            |  |
|  |  HEADLINE TEXT (top 40%)                   |  |
|  |                                            |  |
|  |  Subheadline (middle 20%)                  |  |
|  |                                            |  |
|  |  [Logo]          [domain.com] (bottom 20%) |  |
|  |                                            |  |
|  +--------------------------------------------+  |
|  60px padding (safe zone)                         |
+--------------------------------------------------+
      1200px × 630px

Layout rules:

• 60px minimum padding on all sides — some platforms crop edges.
• Left-align text for readability (centered text works too, but avoid right-alignment).
• Place branding in the bottom-left or top-left — these areas draw the eye first.
• Avoid the bottom-right corner — some platforms overlay a play button or link icon there.
• Keep the vertical center clear for your headline — this is the area that's always visible regardless of cropping.

Manually designing OG images breaks down after 20-30 pages. Here's how to maintain quality at scale:

• Define 2-3 templates for different content types (blog posts, product pages, landing pages). Consistency builds brand recognition.
• Automate with an API. Use OG Image Generator to generate OG images from page data. One API call per page, zero manual design:

GET https://ogimg.xyz/api/og?title=Your+Title&description=Short+desc&template=gradient&pattern=dots

• Audit existing pages. Crawl your site to find pages missing OG images. Tools like Screaming Frog or a simple script can check for og:image meta tags.
• A/B test images. For high-traffic pages, try different OG image styles and compare click-through rates using UTM parameters.
• Test every new template across Facebook, Twitter, LinkedIn, and Slack before deploying to production.

With ogimg.xyz, you get 10 professionally designed templates and 10 background patterns. Images are generated in under 200ms — no headless browser, no build step, no design skills required.