7 OG Image Best Practices That Increase Click-Through Rate
Getting the OG image size right is the baseline. Getting it right — in a way that actually drives clicks — requires a bit more thought.
These seven practices are the difference between a link preview that gets ignored and one that generates genuine curiosity.
1. Make the Title the Hero
Your OG image appears at roughly 300–450px wide in most social feeds. At that size, a 16px body font is completely illegible. The title needs to be the dominant visual element, at 48–72px at minimum.
A common mistake is trying to include too much: the title, a byline, the date, the author, the category, the site name — all on one image. Strip it back. If someone can read the title at a glance, the image has done its job.
Good: Large bold title, small category badge, domain name at bottom.
Bad: Title + subtitle + author + date + tags + logo + decorative elements.
2. Use High-Contrast Colour Combinations
Social media feeds are busy environments. Your link preview competes with photos, videos, and other content. Low-contrast OG images disappear.
Effective colour pairings for OG images:
- Dark navy / indigo background + white text — professional, high contrast
- Black background + yellow or cyan text — very high visibility
- White background + dark text + bold colour accent — clean, editorial feel
Avoid: grey text on light grey, dark green on dark blue, any mid-tone combination that makes text "float" without clear separation.
The Keynou OG generator uses a dark indigo-to-navy gradient with white text by default — chosen specifically because it contrasts against both the light and dark themes of every major social platform.
3. Keep the Title Under 60 Characters
Long titles in OG images create two problems:
- The font size has to shrink to fit, making it unreadable at thumbnail sizes.
- Lines wrap awkwardly, creating orphaned words on the last line.
60 characters is the sweet spot: enough to convey the page topic, short enough to render large.
If your actual title is longer, create a shorter "social title" for the OG image — either in your CMS metadata field or as the ogTitle property, separate from the on-page <title> tag.
4. Category Badges Add Context Instantly
A coloured pill badge with the category — "SEO", "Tutorial", "PDF", "Video" — helps readers immediately know what kind of content they're about to click.
This works for three reasons:
- Scannability: readers skip content that doesn't match their current interest
- Colour coding: different categories use different colours, making your brand recognizable in a feed
- Trust: labelled content looks curated, not random
In the OG Image Generator, category presets automatically assign matching accent colours — blue for PDF, green for image tools, purple for blog content, red for video.
5. Always Include Your Domain or Brand Name
OG images without branding are missed opportunities. Your domain name shown at the bottom of every preview image builds subconscious brand recognition even for people who don't click.
After seeing your branded images in their feed several times, readers start to associate your visual style with your content — making future clicks more likely.
Keep branding subtle: small domain name at bottom-left, a discreet logo mark. The title should still dominate the visual hierarchy.
6. Test on Mobile Before Publishing
Most social media consumption happens on mobile. Your OG image needs to be readable at approximately 200–250px wide on a smartphone screen.
Quick mobile test: Take a screenshot of your OG image. Scale it down to 25% of its original size. Can you still read the title? If not, increase the font size or reduce the word count.
Use OpenGraph.xyz to see a mobile-scaled preview before publishing.
7. Keep File Size Under 200KB
Slow-loading OG images hurt in two ways:
- Social crawlers have short timeouts — if the image doesn't load in ~5 seconds, they may fall back to a generic thumbnail
- Some platforms degrade image quality on large files
For dynamically generated images (via /api/og routes or services like Keynou), this is handled automatically — the Edge Function renders a compressed PNG at optimal quality.
For self-hosted static OG images, run them through an image compressor first. Keynou's Image Compressor can reduce a 500KB PNG to under 100KB with no visible quality loss.
Putting It Together: A Checklist
Before publishing any page, verify:
- Title is under 60 characters and renders at ≥ 48px
- Background-to-text contrast ratio is ≥ 4.5:1
- Category or content type is labelled
- Domain or brand name is visible
- Image is 1200 × 630 px
- File size is under 200KB
- Tested with Twitter Card Validator or OpenGraph.xyz
Generate the Perfect OG Image Instantly
The Keynou OG Image Generator applies all of these best practices by default:
- Large, bold white title on a high-contrast dark gradient
- Category badge with matching accent colour
- Domain name and logo mark at the bottom
- Exactly 1200 × 630 pixels
- Branding saved automatically between sessions
Enter your title, pick a preset, copy the URL. Done.
