You've probably seen them thousands of times — those rectangular preview cards that pop up when someone shares a link on Facebook, Twitter, LinkedIn, Slack, or Discord. That's an OG image. But what exactly is it, why does it matter, and why do so many websites get it subtly wrong? Here's the full picture, including a few details most guides skip.
OG Image = Open Graph Image
OG stands for Open Graph, a protocol Facebook introduced in 2010. It defines how a webpage appears when shared on social platforms. The OG image is the visual component — the thumbnail card that carries your brand when a link travels.
Technically, it's a <meta property="og:image"> tag in your page's HTML:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A short description">
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:type" content="article">Missing or malformed tags don't break your page — the link still works. What you lose is control: platforms then auto-pick whatever image they find, often a random in-body screenshot or a tiny logo, and the share looks unprofessional. That's the silent cost of skipping OG tags.
Why OG Images Matter (With the Numbers)
- Higher click-through rate — Tweets with images get roughly 150% more retweets than those without. LinkedIn posts with images see about 2x the engagement.
- Brand consistency — Every share of your content carries your visual identity, whether it's a blog post, a product page, or a press link.
- Professional look — A missing or auto-generated OG image makes your site look unfinished, which matters more than most people think when your link lands in a client's Slack channel.
One detail that surprises most people: the OG image is fetched at share time, not at publish time. If you fix your tags, an old link shared again will pick up the new image. Platforms cache aggressively though — Facebook's crawler can hold an old preview for days unless you force a re-scrape, which is why testing before you share is the real workflow.
The Correct OG Image Size
The universally recommended size is 1200 × 630 pixels (a 1.91:1 ratio). This works across every major platform:
- Facebook and LinkedIn display 1.91:1 on desktop, 1:1 on mobile in some layouts
- X (Twitter) uses its own
twitter:imagetag but falls back to og:image - Discord and Slack render 1.91:1 with a hard size limit — Discord ignores images under 32×32 and over 8MB
- WhatsApp and Telegram downscale to a square-ish thumbnail on phones
A safe rule: export at 1200×630, keep the file under 300KB, and put critical text inside the middle 600×630 safe zone — mobile crops the left and right edges.
How to Create an OG Image (3 Ways)
- Use a free generator — Type your title, pick a template, download instantly. No design skills needed, and it's repeatable for every post. (That's the tool this site is built around.)
- Use Figma or Canva — Create a 1200×630 canvas manually. Fine for one-off designs, time-consuming when you publish weekly.
- Hire a designer — Expensive and slow for blogs that publish regularly, and you still need to produce a new file every time.
Common Mistakes (And What They Cost You)
- Image too small — Under 200×200, most platforms ignore it entirely and pick something else.
- Text too close to edges — Gets cropped on mobile previews; the first word of your headline silently disappears.
- Wrong file format — PNG or JPEG work everywhere; some platforms have trouble with WebP in previews.
- Missing og:image:width and og:image:height — Facebook delays rendering while it re-scans the image dimensions.
- Using the same image for every page — Readers scrolling a feed see the same card for ten different articles and stop noticing any of them.
- Forgetting the fallback — When your CDN blocks the scraper's user-agent, the preview silently fails. Allow crawlers like facebookexternalhit and Discordbot in your CDN rules.
The 30-Second Check Before You Share
Test your page's tags with a debugger before pushing it to a group chat or newsletter: Facebook's Sharing Debugger and X's Card Validator both fetch the live URL and show exactly what they'd render. Paste your link, check that the image, title, and description all come from your own tags, and you're done. It takes under a minute and prevents the most embarrassing failure mode there is — a link that looks broken to everyone who receives it.