Social Media Link Previews and Open Graph Metadata: How They Work

October 22, 2026
Ryan Foster
Ryan Foster
Ryan Foster
Ryan Foster
18 mins read
Titelgrafik: Social Media Link Previews and Open Graph Metadata: How They Work

A shared link on social media rarely appears as a bare URL. Most platforms fetch the page and render a card with an image, a headline and a short description. That card is built from metadata in the page's HTML, and the most widely used standard for it is Open Graph. When a preview looks broken, outdated or blank, the cause is almost always in that metadata rather than in the platform itself.

What Open Graph metadata does

Open Graph is a set of meta tags, originally introduced by Facebook and now read by most major social and messaging platforms, that describe a web page to external services. The tags sit in the <head> of the page and declare which title, description, image and canonical address should represent the page when it is shared. Without them, platforms fall back to whatever they can scrape: often the browser tab title, the first paragraph of text, or an arbitrary image. The result is unpredictable previews that vary from platform to platform.

The four tags that matter most

In practice, a small core set of properties determines how a preview looks. These are the ones worth getting right first:

  • og:title – the headline shown on the card. It does not have to match the page's SEO title.
  • og:description – a short summary, typically one or two sentences.
  • og:image – an absolute URL to the preview image. Relative paths often fail.
  • og:url – the canonical address of the page, which helps platforms consolidate shares.

Two supporting tags are also common: og:type (usually website or article) and og:site_name, which labels the card with the brand. Twitter/X additionally reads its own twitter:card tags, though it will fall back to Open Graph when those are absent.

How platforms actually build a preview

When someone pastes a link, the platform's crawler requests the page and parses the metadata, then caches the result. The cache is the source of most confusion: if you change a title or swap an image, the old preview can persist until the cache is refreshed. Facebook and LinkedIn both offer tools for re-scraping a URL, and X provides a card validator. The practical rule is simple: fix the tags, then force a refresh before assuming something is still broken.

Why your preview image is missing or cropped

Image problems are the most frequent complaint, and they usually trace back to one of three causes. First, the og:image URL is relative, blocked by a robots rule, or served over HTTP on an HTTPS page. Second, the image is too small or has an unusual aspect ratio, so the platform crops it awkwardly. Third, the image is behind authentication and the crawler cannot reach it. A landscape image with a roughly 1.91:1 ratio is the safest general choice, and it is worth checking that the file is publicly accessible without cookies or login.

Where link shorteners fit in

Short links add a layer that many people overlook. When you shorten a link, the short URL redirects to the destination, and the platform follows that redirect to read the metadata. Most platforms handle this correctly, but two things can go wrong. If the redirect chain is long or uses JavaScript-based redirects instead of HTTP redirects, some crawlers give up before reaching the page. And if the shortener serves its own interstitial or preview page, that page's metadata may be scraped instead of your content's. When previews misbehave only on shortened links, test the destination URL directly to isolate the cause.

Open Graph versus other metadata standards

Open Graph is not the only standard in play. Search engines primarily use schema.org structured data and standard HTML meta descriptions, which serve a different purpose: rich results and search snippets. Some platforms also read Twitter Card tags, and a few fall back to plain HTML title and description tags. A well-configured page often includes Open Graph, Twitter Card tags and a standard meta description together, each pointing at consistent content. Duplicating the same information across standards is normal and expected; conflicting information is what causes odd results.

Should the preview title match your SEO title?

Not necessarily, and often it should not. Search titles are written for query context and length limits in search results, while preview titles are written for people scrolling a feed. A social card can afford a more direct, conversational headline and a description that gives a reason to click. The one rule is consistency of meaning: the card should accurately represent the page, because misleading previews erode trust and can be penalised by platforms.

A practical checklist for reliable previews

Before sharing a page widely, run through these checks:

  1. Confirm all Open Graph URLs, especially the image, are absolute and publicly reachable.
  2. Keep the title under roughly 60–70 characters and the description near 100–150 so they are not truncated.
  3. Use a landscape image at a reasonable resolution and test how it crops.
  4. Set og:url to the canonical page, not a tracking or short URL.
  5. Re-scrape the URL with each platform's debugging tool after changes.
  6. Test the actual short link, not just the destination, if you use a link shortener.

None of this requires special tooling beyond a browser and the platforms' own validators. The payoff is a preview that looks intentional rather than accidental, which matters every time a link is shared.

More visibility for your business

SEO checklist, QR guide, template pack and the 30-day mini course – directly in the shop.

Zum Shop

Keep reading

More posts from our blog

Link Tracking for Sponsorship Placements at Community Events
By Ryan Foster October 15, 2026
Sponsoring a community event—a 5K run, a local festival, a charity gala—can raise your brand's profile and drive traffic. But without proper...
Read more
Short Link in Your Instagram Bio: A Complete Guide
By Ryan Foster October 11, 2026
Why Use a Short Link in Your Instagram Bio?Instagram allows only one clickable link in your bio. A long, messy URL wastes that valuable space and can...
Read more
Digital Communication for Trades Businesses: How to Use a Link Shortener and QR Codes to Win More Local Jobs
By Ryan Foster October 10, 2026
For plumbers, electricians, builders, landscapers and other trades, digital communication is no longer just a website and a phone number. Customers...
Read more