7 common Open Graph mistakes that break link previews
Most broken previews aren't missing tags — they're tags that are present but subtly wrong in a way that only shows up when a platform actually tries to render them. These are the mistakes that come up over and over.
Why it matters
A broken preview doesn't throw an error anywhere — the page still loads fine, nothing in your build fails, and you'd only notice by actually sharing the link somewhere. That's exactly why these mistakes survive in production for months: nothing forces you to catch them.
How to fix it
- Relative og:image URL (/images/og.png instead of https://yoursite.com/images/og.png) — most crawlers require an absolute URL and silently drop relative ones.
- og:image pointing at a page that requires auth or returns a redirect — platforms generally won't follow a login wall or more than one redirect hop to fetch the image.
- Tags injected client-side only (React/Vue rendering them after page load) — most social crawlers don't execute JavaScript, so they see an empty <head> and fall back to nothing.
- Missing og:image:width / og:image:height on a non-standard-size image — some platforms use these to decide whether to render it at all, and skip images they can't pre-size.
- Multiple conflicting og:title tags (e.g. one from a layout, one from a partial) — crawlers generally take the first one found, which may not be the one you meant to set.
- og:type left as the default 'website' on content that has a more specific type (article, product) — not broken, but a missed chance at richer platform-specific rendering.
- Testing only in your own browser instead of an actual scraper — browser dev tools show the final DOM including client-side changes; Facebook's crawler sees raw server-rendered HTML, and the two can disagree.
Is this happening on your page?
Paste your URL and we'll show you exactly what's set, missing, or broken.
Check my page