Open Graph Tags Explained: Why Your Links Look Broken on Social Media

If your links show the wrong title, a blank image, or no preview at all when shared, it's almost always a missing or malformed Open Graph tag. Here's what each tag does and how to fix it.

What Open Graph tags are actually for

When someone pastes your link into Facebook, LinkedIn, Slack, or X, the preview card that appears — image, title, description — isn't pulled from your page's visible content. It's built entirely from a small set of <meta> tags in your page's <head> called the Open Graph protocol, originally created by Facebook and now used across nearly every platform that renders link previews.

If those tags are missing, incomplete, or point to a broken image, the platform falls back to guessing: it might grab a random image from the page, truncate your title oddly, or show no preview at all. That's the difference between a link that looks professional in a feed and one that looks broken or gets ignored.

What each tag actually means

og:title — the headline shown in the preview card. It can differ from your <title> tag if you want a punchier, more shareable phrasing.
og:description — the supporting text under the title. Most platforms truncate this around 155–200 characters, so front-load the important part.
og:image — the preview image. This is the single biggest factor in click-through rate from social feeds; platforms typically expect 1200×630px, and images below roughly 200×200px may be rejected entirely.
og:url — the canonical URL for the content, so shares consolidate to one link instead of splitting engagement across variants.
og:type — tells platforms what kind of content this is (website, article, product, profile, etc.), which can change how the card is rendered.
og:site_name — your brand name, shown as small text near the title on most platforms.
twitter:card — a separate tag that controls X's layout specifically: summary_large_image shows a full-width banner image, while summary shows a small square thumbnail beside the text. Without it, X falls back to Open Graph data but often renders a smaller, less prominent card.

Common Open Graph mistakes

No og:image, or an image path that 404s — the platform either shows nothing or an ugly fallback, and there's often no way to force a re-check without clearing the platform's cache
Reusing the same generic image on every page — every article, product, and landing page showing the same thumbnail makes shares blend together and look untrustworthy
Description too long or missing entirely — platforms truncate awkwardly mid-sentence, or fall back to pulling random text from the page body
Forgetting Twitter-specific tags — Open Graph alone doesn't guarantee a good X preview; twitter:card, twitter:title, and twitter:image are read separately
Editing tags but never re-scraping — Facebook and LinkedIn cache previews aggressively, so a fixed tag won't show up until you force a re-crawl through their debugging tools

How to generate tags correctly

Write a title and description sized for sharing, not just SEO — punchy and complete within the platform's truncation limits.
Use a dedicated 1200×630px image per page rather than reusing one global default.
Set og:type, og:url, and og:site_name so the card carries full context, not just a title and image.
Add Twitter-specific tags (twitter:card, twitter:site, twitter:creator) rather than assuming Open Graph tags alone are enough.
Validate and force a re-scrape with Facebook's Sharing Debugger or Twitter's Card Validator after any change — cached previews won't update on their own.

Wrapping up