Open Graph Tags: Why Your Links Look Broken When Shared
Open Graph tags explained: why your links show a blank preview or wrong image on Facebook, LinkedIn, and Slack, and how to fix it.
DidYouSEO Team··6 min read
Someone pastes your link into Slack and gets a blank gray box instead of a title, description, and image. Or worse — the preview shows an old page title, a stock logo instead of the actual content, or nothing at all. The page itself is fine. What's missing is a handful of meta tags that most page-builders don't set automatically: Open Graph tags.
Open Graph tags are the single highest-leverage fix for how your links look when shared, and they're also one of the most commonly skipped, because a broken preview doesn't show up anywhere in Google Search Console or a normal SEO audit — you only notice it when someone shares your link and it looks wrong.
What Open Graph tags actually are
Open Graph is a protocol, originally defined by Facebook and now an open standard, that lets a page specify exactly how it should appear when shared on social platforms — Facebook, LinkedIn, Slack, Discord, and most chat apps all read the same tags. Without them, platforms fall back to guessing: grabbing the first image on the page (sometimes a logo, sometimes nothing usable), the raw <title> tag, and whatever text happens to be near the top of the HTML. That guess is frequently wrong.
The core tags live in the page's <head>:
<meta property="og:title" content="Your actual page title" />
<meta property="og:description" content="A one-sentence summary" />
<meta property="og:image" content="https://example.com/preview.jpg" />
<meta property="og:url" content="https://example.com/page" />
Each one maps to a specific part of the preview card: title, description text, the image, and the canonical URL the platform should treat the share as pointing to.
Why the image tag is the one that matters most
Of the four core tags, og:image has the largest visible effect, because it's the part of a shared link that occupies the most screen space and is the first thing anyone actually looks at before reading the title or description. Neil Patel's guide to Open Graph meta tags recommends 1200×630 pixels as the standard OG image size — the same guidance DidYouSEO's own OG tags checker surfaces, since it's the dimension that displays cleanly across Facebook, LinkedIn, and most chat-app previews without awkward cropping.
A missing or wrong og:image tag doesn't just look unpolished — it changes whether people click at all. A link preview with no image, or the wrong image, reads as untrustworthy or broken before anyone's even read the headline.
Why your OG image sometimes doesn't update
This trips up more people than a missing tag entirely: you fix the og:image, share the link again, and the old image still shows up. That's not a bug in your page — social platforms cache Open Graph data aggressively so they don't have to re-fetch metadata on every share. Meta's own developer documentation on the Sharing Debugger exists specifically because of this — pasting a URL into it forces Facebook to re-scrape the page and refresh the cached preview. LinkedIn has an equivalent Post Inspector tool for the same reason.
If you've updated your OG tags and the preview still looks wrong on a platform you've already shared the link on, the fix is almost always clearing that platform's cache, not editing the tags again.
Open Graph vs. Twitter/X cards
X (formerly Twitter) has its own separate tag set (twitter:card, twitter:title, twitter:image), but if those aren't present, X falls back to reading standard Open Graph tags instead. That fallback works well enough that many sites skip Twitter-specific tags entirely — but it's still best practice to set both, since the Twitter-specific tags give finer control over card type (summary vs. large image) that pure Open Graph tags don't specify.
What happens with no Open Graph tags at all
Without any Open Graph tags, platforms fall back to scraping the raw page:
| What the platform guesses | What it often gets |
|---|---|
| Title | The <title> tag, sometimes truncated oddly or missing your brand context |
| Description | The first block of text on the page, which might be a nav menu or a cookie banner |
| Image | The first <img> in the HTML — could be a logo, an icon, or nothing at all |
That fallback is unpredictable enough that a page can look completely fine in a browser and still generate a broken or embarrassing preview the first time someone shares it — which is exactly why this issue tends to surface reactively, after a bad share, rather than being caught in a routine check.
How to check your Open Graph tags
Because the failure is invisible until someone actually shares the link, checking proactively is the only reliable approach:
- Run the URL through an OG tags checker to confirm title, description, image, and URL are all present and correctly formatted
- Use Facebook's Sharing Debugger to force a fresh scrape and see exactly what Facebook currently has cached
- Check LinkedIn's Post Inspector separately — LinkedIn caches independently of Facebook, so a fix on one platform doesn't automatically propagate to the other
Common mistakes with Open Graph tags
Using a generic site-wide image for every page. Every article, product page, or landing page sharing the same default logo image misses the entire point — a preview image should represent that specific page, not the brand generally.
Forgetting og:url. Without it, some platforms may treat a shared link as pointing to a different canonical URL than intended, which can split engagement metrics or point back to the wrong page after a redirect.
Setting OG tags on the wrong template. On dynamic sites (blogs, product catalogs, user profiles), a common bug is every page rendering the same static OG tags from a shared template instead of page-specific values — visually correct on one page, wrong on every other page using the same layout.
Not testing after a redesign. Like hreflang tags and redirects, Open Graph tags are easy to accidentally drop or duplicate during a template rewrite, and the only way to know is to actually test a share, not assume the markup carried over correctly.
FAQ
What are Open Graph tags used for? They control how a page appears when shared on social platforms and chat apps — specifying the title, description, image, and URL shown in the preview card, instead of leaving platforms to guess from the raw page content.
Why does my link preview show the wrong image?
Usually one of two causes: the og:image tag is missing or pointing to the wrong file, or the platform has cached an older version of the page's Open Graph data. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a refresh.
What size should an Open Graph image be? 1200×630 pixels is the standard recommendation — it displays cleanly across Facebook, LinkedIn, and most chat-app previews without cropping issues.
Do I need separate Twitter Card tags if I already have Open Graph tags?
X falls back to standard Open Graph tags if Twitter-specific ones are missing, so it isn't strictly required — but adding twitter:card and related tags gives more precise control over how the preview renders on X specifically.
Check what your links actually look like when shared
A broken preview costs clicks silently, since it only shows up the moment someone actually shares your link. Run the free OG tags checker to confirm your title, description, and image are set correctly before the next time someone pastes your link somewhere that matters.
See how your site scores - free
30+ SEO checks plus AI visibility. No credit card required.