Open Graph Tags: How Links Become Cards on Social Media

· 2 min read

Paste a link into Slack, X, LinkedIn, iMessage, or Discord and the app fetches the page, reads a handful of meta tags, and renders a card. Those tags are the Open Graph protocol — invented at Facebook in 2010, adopted everywhere since, and by far the highest-leverage 10 lines of HTML on any shareable page.

The core tags

<meta property="og:title" content="How to Brew Café-Quality Espresso" />
<meta property="og:description" content="Grind size, temperature, and the gear that matters." />
<meta property="og:image" content="https://example.com/og/espresso.png" />
<meta property="og:url" content="https://example.com/guides/espresso" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example" />

Three details that separate working cards from broken ones:

  • og:image must be an absolute URL. Relative paths fail silently on most platforms — the single most common cause of "why is there no image".
  • og:url should be the canonical URL. Platforms aggregate share counts and cached metadata by this URL; pointing it at a parameter-free canonical merges what would otherwise be fragmented caches per UTM variant.
  • Everything is fetched by a bot at share time. If your OG tags render client-side via JavaScript, many scrapers never see them. OG tags belong in server-rendered HTML.

The image: one size that works everywhere

Every platform crops differently, but one spec survives all of them: 1200 × 630 pixels (1.91:1), under ~1MB, with the critical content centered — away from edges that get cropped and corners where play buttons and favicons get overlaid. Text on OG images should be large; cards render at a few hundred pixels wide, so 40px text on your 1200px canvas is body text on the card.

Twitter cards: the parallel universe

X reads OG tags as fallback but has its own vocabulary, and one tag is genuinely required:

<meta name="twitter:card" content="summary_large_image" />

summary_large_image gives the full-width image card; plain summary gives a small square thumbnail. Without the tag you get X's default treatment, which changes with the seasons and is never the good one. twitter:title, twitter:description, and twitter:image override OG values when present — useful only when you want different copy per platform, which you usually don't.

Why your update isn't showing

Every platform caches scraped metadata aggressively — hours to weeks. Change your OG image and reshare: you'll see the old card, and so will everyone else. Each platform ships a debugger that forces a re-scrape:

  • Facebook: Sharing Debugger
  • LinkedIn: Post Inspector
  • X: card validator (re-scrapes on preview)
  • Slack/Discord: cache-bust by appending a dummy parameter to the shared URL

The debugger tools also show you exactly what the scraper fetched — the fastest way to catch a blocked bot (check your robots.txt and WAF rules for facebookexternalhit, Twitterbot, LinkedInBot).

Design the card before you ship the page

A share card is three pieces of text and an image competing in a fast-scrolling feed. The SERP & social preview renders your title, URL, and description as a Google result, an X card, and a LinkedIn post side by side — with the truncation each platform applies — so you can see the card as strangers will, before the cache makes first impressions permanent.