OG Image Guide: Triple Your Blog Click Rate
The big image shown when you share a link on Slack, Facebook, X. Design quality of this OG image can swing CTR by 2โ3ร. How to ship one in 1 minute.
- What OG images are and why they matter
- The 1200ร630 universal standard
- 1-minute PXLTool workflow
๐ What is an OG image?
Open Graph (OG) is a Facebook-created standard from 2010 that defines preview-card information (title, description, image) when URLs are shared. Today, virtually every platform: Slack, Discord, X, LinkedIn, even WhatsApp: follows it.
If your OG image isn't compelling? Even great articles don't get clicked. Global data: posts with OG images get 38% higher CTR than without; well-designed OG images double that.
๐ Size standard
1200ร630 (1.91:1) is the universal standard. This ratio renders perfectly on Facebook, Slack, X, Discord, LinkedIn: anywhere.
- Minimum: 600ร315 (blurry on mobile)
- Recommended: 1200ร630 (universal)
- Maximum: 2400ร1260 (retina, < 8 MB)
๐จ 3 design principles
Principle 1 ยท Title fills 50%
On mobile, OG images render 100โ200 px wide. For readability at that size, title text must occupy 50%+ of the image. Photo + tiny caption combos = invisible.
Principle 2 ยท Brand consistency
Use the same font, colors, logo position across every OG image. Frequent sharers will recognize "ah, this blog again" instantly. That's branding.
Principle 3 ยท Legibility over beauty
Beauty is nothing without readability. 4.5:1 contrast ratio per WCAG. White-on-yellow = never. Dark background + bright text = safest.
๐ 1-minute workflow
Method A ยท LinkedIn post tool
The LinkedIn Post Image tool outputs 1200ร627: works as an OG image directly. Type title, subtitle, author, company, download PNG. 30 seconds.
Method B ยท Email header banner
The Email Header tool has a 1200ร300 wide option. Good for more compact OG images.
Method C ยท Gradient blur background + text
For premium Apple / Vercel vibes: use the Gradient Blur tool for the background and the Gradient Text tool for the title. Composite in Canva's free tier.
๐ง HTML meta tags
Once you have the image, add this to your HTML <head>:
<meta property="og:title" content="Post title"> <meta property="og:description" content="Description, max 160 chars"> <meta property="og:image" content="https://yoursite.com/og.png"> <meta property="og:url" content="https://yoursite.com/post"> <meta property="og:type" content="article"> <!-- Twitter Cards (X) --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Post title"> <meta name="twitter:image" content="https://yoursite.com/og.png">
๐ก Pro tip: after editing, refresh cache at developers.facebook.com/tools/debug. X / Discord update automatically but can take hours.
๐ฏ Platform variations
- Facebook: 1200ร630 recommended
- X (Twitter): 1200ร675 (1.78:1) preferred
- LinkedIn: 1200ร627
- Slack / Discord: OG standard works as-is
Practically, one 1200ร630 covers 99%. Don't over-engineer.