Why do my links look broken when shared on social media?

When a page is missing Open Graph tags, social platforms have to guess what the link is. They may show a bare URL, an unrelated image, or the wrong title. The Open Graph protocol fixes this with a small set of metadata properties that you declare in the document head.

Why this matters

Facebook, LinkedIn, Slack, and most messaging apps read Open Graph metadata to build link previews. Without it, each platform makes its own fallback guess from whatever it can scrape, and the result is a plain hyperlink with no card, no image, and no summary. That directly suppresses click-through: a preview with a headline and image earns far more taps than a naked URL. The protocol is explicit that the four required properties for every page are og:title, og:type, og:image, and og:url. The description property is optional but generally recommended. Adding them is a five-minute change, yet it is routinely skipped on marketing pages and documentation that are shared constantly. Search engines also read some Open Graph properties, so the same tags can shape how a result looks beyond the social platforms.

How to fix it

Add the required properties inside the head. Use absolute URLs for og:image and og:url, because the canonical URL doubles as the object's permanent identifier in the social graph.

<head>
  <meta property="og:title" content="How we cut build times by 60%">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/images/build-times.png">
  <meta property="og:url" content="https://example.com/blog/build-times">
  <meta property="og:description" content="A one- to two-sentence summary used by social platforms.">
  <meta property="og:image:alt" content="Chart showing build time dropping from ten to four minutes">
</head>

Pick an og:type that matches the content, such as website for a landing page or article for a post. For the image, supply an absolute HTTPS URL and, where possible, add og:image:alt so screen readers and platforms have a text description. If your site is part of a larger brand, og:site_name is a useful addition, but the four required properties are the non-negotiable core. Keep image dimensions explicit with og:image:width and og:image:height where you can, because several platforms prefer a wide image and will crop or reject assets that do not match. Declare the tags as static markup in the head rather than injecting them with client-side JavaScript, because many crawlers read only the initial response and never run your scripts.

How to verify the fix

Check the served HTML for the og: properties. The command below lists every Open Graph property the server returns.

curl -s https://example.com | grep -i 'property="og:'

You should then re-scrape the URL in each platform's debugger, because many social networks cache previews aggressively. The Open Graph protocol page links Facebook's Object Debugger for that purpose. If the card updates there, the markup is correct. Note that a preview can look right in one app and wrong in another, since each consumer implements its own subset of the protocol and applies its own caching window.

Related issues