What Is an Open Graph Image? How to Create and Fix Your Link Preview
Quick answer: An Open Graph image is the picture that shows up when a link you share gets pasted into Facebook, X, LinkedIn, Slack, or iMessage. It's set with an
og:imagemeta tag on the page, sized 1200x630px. If your link preview shows a blank box, the wrong image, or no image at all, test it with a free social preview checker and fix the tag. No code deploy required if you're using a link tool that sets it for you.
Key Takeaways
- An Open Graph image is set by the
og:imagemeta tag on a page and displayed by nearly every platform that builds a link preview. - 1200x630px is the standard size; it works across Facebook, X, LinkedIn, Slack, Discord and WhatsApp without cropping badly.
- Keep headline text and logos inside the center 1080x600px "safe zone," since every platform crops the edges differently.
- A missing or broken Open Graph image is one of the most common reasons a shared link looks unfinished or gets ignored.
What Is an Open Graph Image?
An Open Graph image is the thumbnail that appears next to a link's title and description when it's shared on social media or chat apps. It comes from the og:image meta tag in a page's HTML. Without it, most platforms either show a blank gray box or fall back to guessing an image from the page content, which often picks the wrong one.
Open Graph itself is a protocol Facebook introduced so any page could describe how it should look when shared, and most major platforms adopted the same tags rather than inventing their own. That's why one correctly tagged image shows up correctly almost everywhere.
The Right Open Graph Image Size (and Why It Matters)
1200x630px is the standard size. It's wide enough to look sharp on Facebook and LinkedIn and matches X's large summary card without Twitter cropping it into a square. Discord, Slack, and WhatsApp all inherit the same Facebook-derived spec, so one image covers nearly every platform your link might land on.
The tag itself is one line in the page <head>:
<meta property="og:image" content="https://yoursite.com/preview-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Design guidance that actually matters for click-through:
- Keep headline text and any logo inside the center 1080x600px. Every platform crops the edges slightly differently, and text near the border gets cut off on at least one of them.
- Save as JPG or PNG, ideally under 1MB (8MB hard max on most platforms).
- High contrast beats a busy photo. The image is competing with a feed full of other thumbnails, not sitting alone.
One exception: Pinterest reads og:image too, but favors a portrait 2:3 ratio (roughly 1000x1500). A landscape 1200x630 image will still show there, just smaller and less prominent than on Facebook or X.
How to Test Your Open Graph Tags Before You Share
Testing before you post catches the two most common failures: a stale cached image from an old version of the page, and a tag that's missing entirely. Paste your URL into a free social preview checker to see exactly how Facebook, X, and LinkedIn will render the link: image, title, and description together, the way your audience will see it.
The most common surprise isn't a missing tag, though. It's a cached one. Facebook and LinkedIn both cache a link's preview the first time it's shared, so if you fix the image after someone already posted the link once, the old broken preview can keep showing until you force each platform to re-scrape it. Facebook's debugger and LinkedIn's Post Inspector both have a "scrape again" button for exactly this.
If you're sharing a shortened link instead of the raw URL, check the preview on the short link itself, not just the destination page. A short link with a custom preview needs its own Open Graph tags set, since some platforms render the redirect's metadata before following it to the final page.
Common Open Graph Mistakes That Break Link Previews
No og:image tag at all. The most common cause of a blank gray box in the preview. Every shareable page needs one, not just the homepage.
A relative image path. og:image needs a full URL (https://yoursite.com/image.jpg), not a relative path (/image.jpg). Relative paths work fine in a browser but fail silently when a scraper tries to fetch the image.
An image behind a login or paywall. If the scraper can't access the image without authentication, it can't display it. The same rule applies to images blocked by robots.txt or a CDN that requires a signed URL.
Wrong aspect ratio. A square or portrait image gets cropped unpredictably in a 1200x630 slot, often cutting off a logo or headline that was fine in the original file.
Open Graph vs. Twitter Card Tags: What's the Difference?
Open Graph (og:*) is the broader protocol most platforms read by default, including X, if there's no separate Twitter Card tag present. Twitter Card tags (twitter:card, twitter:image) are X-specific and let you override the Open Graph values just for X, useful if you want a different crop or headline there than everywhere else, but not required. If you only set og:image, X will still use it; adding twitter:image on top only matters when you want X's preview to differ from the rest.
Frequently Asked Questions
What is an Open Graph image?
It's the thumbnail image that shows up when a link is shared on Facebook, X, LinkedIn, Slack, or similar platforms, set by the og:image meta tag on the page. Without it, most platforms show a blank preview or guess an image from the page, which is often wrong.
What size should my Open Graph image be?
1200x630px is the standard size that works across Facebook, X, LinkedIn, Slack, Discord, and WhatsApp. Keep key text and logos inside the center 1080x600px, since edge cropping varies by platform.
Why does my link preview show the wrong image?
Usually one of three reasons: there's no og:image tag so the platform guessed, the tag uses a relative path instead of a full URL, or the platform cached an older version of the page. Use a social preview checker to see the current tag values and force a re-scrape if the platform supports it.
How do I fix a cached (outdated) Facebook or LinkedIn preview?
Both platforms cache the first preview generated for a URL. Facebook's Sharing Debugger and LinkedIn's Post Inspector each have a button to re-scrape the page and refresh the cached image, title, and description.
Do I need separate tags for Twitter/X?
No. X reads standard og:image and og:title tags if no Twitter-specific tags are present. Twitter Card tags (twitter:card, twitter:image) are only needed if you want the X preview to look different from every other platform.
Check Your Link Preview Before You Post It
Paste any URL into UseClick's free social media preview tool to see exactly how it renders on Facebook, X, and LinkedIn before you share it, so you're not finding out the image is broken after the post is already live.
