All posts
May 12, 20265 min read

Open Graph tags: how to control how your links look when shared

When someone shares your link in Slack, X, LinkedIn, or iMessage, the rich card that appears, the title, the description, the image, is not pulled from your page content. It comes from a small set of meta tags in your <head>. Get them right once and every share looks intentional; leave them out and you get a bare URL or, worse, whatever text the platform guesses. Generate the full set with the Open Graph Meta Generator.

The tags that do the work

The Open Graph protocol uses <meta property="og:..."> tags. The ones that matter on almost every page:

  • og:title — the headline of the card. Often your page title, but you can tune it for sharing.
  • og:description — one or two sentences under the title.
  • og:image — the preview image. This is the single biggest factor in whether a link gets clicked.
  • og:url — the canonical URL of the page.
  • og:type — usually website or article.

X (Twitter) reads its own twitter:card tags, but falls back to Open Graph for the rest, so twitter:card set to summary_large_image plus the og: tags covers it. Add twitter:title and twitter:description only if you want them to differ from the Open Graph values.

The image rules that actually matter

Most preview problems are image problems:

  • Size. Aim for 1200 by 630 pixels. That is the 1.91:1 ratio the large-image cards expect; off-ratio images get cropped or shrunk to a thumbnail.
  • Absolute URL. og:image must be a full https:// URL, not a relative path. Relative paths are the most common reason an image silently fails to appear.
  • Keep it under a megabyte or so. Crawlers give up on slow or huge images.
  • Readable small. The card is often shown at a few hundred pixels wide. Big text and high contrast survive; fine print does not.

Debugging previews

The frustrating part is caching: platforms cache the preview, so fixing a tag does not update an already-shared link until the cache clears. Each major platform has a debugger that re-fetches your page and shows what it sees, which both reveals the problem and forces a refresh. Before you ship, view the page source and confirm the tags are present and the image URL is absolute and reachable.

A clean checklist: unique og:title and og:description, an absolute og:image at 1200 by 630, og:url matching your canonical, and twitter:card set to summary_large_image. The Open Graph Meta Generator produces the whole block so you can paste it straight into your <head>. If your image itself needs to be inlined or encoded, the Image to Base64 tool helps, though for Open Graph a hosted absolute URL is what you want.