Share a link and the preview that appears — image, headline, description — isn't generated by the platform reading your page the way a browser does. It's built from a specific set of meta tags called Open Graph, and when they're missing, incomplete, or wrong, the result is exactly the broken-looking preview everyone's seen: a blank gray box, a random logo instead of the actual page content, or a chunk of navigation menu text where a description should be.

The tags that matter

Open Graph (originally a Facebook protocol, now the de facto standard across nearly every platform) lives in the page's <head> as a set of <meta property="og:..."> tags:

<meta property="og:title" content="Brand Identity Systems | Zelvorm">
<meta property="og:description" content="Identity systems built in 4-6 weeks, from logo to full style guide.">
<meta property="og:image" content="https://example.com/images/og-branding.jpg">
<meta property="og:url" content="https://example.com/services/branding">
<meta property="og:type" content="website">

Four fields do almost all the work: og:title and og:description (which can differ from your SEO title and meta description, though reusing them is usually fine), og:image (the single most impactful one — previews with no image or a broken one get dramatically less engagement than ones with a clear, relevant visual), and og:url, which tells the platform the canonical address to credit, important if the page is reachable through more than one URL pattern.

The image requirements people miss

Og:image has specific, unforgiving technical requirements that cause most of the visible breakage:

  • ◆Minimum dimensions. Most platforms require at least roughly 200x200px and strongly prefer 1200x630px (the same ratio as a standard article cover) for a proper large-image card instead of a small thumbnail.
  • ◆Absolute URL required. A relative path like /images/cover.jpg will fail silently on most platforms — it must be the full https://example.com/images/cover.jpg.
  • ◆File size and format limits. Extremely large files can time out during the platform's own fetch-and-cache process; standard JPEG or PNG at a reasonable file size is the safe choice.
  • ◆Must be publicly accessible. An image behind authentication, or blocked by robots rules that also happen to cover your image directory, won't be fetchable by the platform's preview-scraping bot.

Twitter Cards: mostly automatic

Twitter/X has its own tag set, but in practice you rarely need to write it in full — add <meta name="twitter:card" content="summary_large_image"> and Twitter will fall back to your Open Graph title, description and image for everything else. Only build out the full separate Twitter tag set if you specifically want different preview content on that one platform, which is uncommon.

Tip After fixing Open Graph tags on an already-shared URL, the old broken preview often persists because platforms cache aggressively. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a re-scrape — editing your page's HTML alone won't clear an existing cached preview.

Checking what's actually live

The fastest way to know whether your Open Graph setup is complete is to look at exactly what a platform would see — not the design intent, the actual rendered tags. Our free social tag reviewer parses a page's source and shows which Open Graph and Twitter fields are present, missing, or likely to cause a broken preview, alongside a live mockup of how the share card will actually look.

Open Graph tags are part of the same broader on-page foundation as meta titles and descriptions and schema markup — all worth checking together during a technical audit. If you'd like your whole site's social and search metadata reviewed properly, that's covered under our digital marketing services.