Paste a link into any chat app and a card appears: title, description, image. Nobody typed that card — the app fetched your page, read its Open Graph tags, and built the preview from them. If your tags are missing, the card is blank, broken, or embarrassingly wrong.

The four tags that matter most

  • og:title — the card headline. Keep it under ~60 characters so it survives truncation.
  • og:description — one or two sentences selling the click. Aim for 100–150 characters.
  • og:image — the card visual. 1200×630 pixels is the universal safe size; use an absolute URL, since relative image paths break on most crawlers.
  • og:url — the canonical URL of the page, which lets shares of URL variants consolidate into one card.

Beyond these, og:type (website vs article) unlocks extras like publish dates, and Twitter's twitter:card tag controls the large-image layout on X specifically.

The bigger question behind this post: How to Remain Valuable When Intelligence Becomes Cheap — which human, economic, and strategic advantages stay scarce when AI does the work. A 224-page practical book, $3.84. Read it on Gumroad →

How crawlers read them

Preview crawlers are narrow specialists: they fetch your HTML, scan the <head> for og: and twitter: meta tags, grab the image, and leave. Critically, most don't execute JavaScript — tags injected by client-side rendering are invisible to them. If your previews show your app shell instead of your content, that's why: the tags must be in the server-rendered HTML.

Crawlers also cache aggressively. Fix your tags and old shares may show stale cards for days. Each major platform offers a debugger/validator that refreshes its cache for a URL — always re-validate after changing tags or images.

Image pitfalls

Most broken previews are image problems: relative URLs, images behind authentication, files over ~8MB, or formats the crawler doesn't support (stick to JPEG/PNG/WebP). The image must also be reachable fast — a slow image server means the crawler gives up and ships a text-only card.

Build and verify

The Open Graph meta tag generator produces a correct tag block from your title, description, and image, and the meta tags analyzer audits what a page actually serves — the fastest way to catch the relative-URL and missing-tag issues above before your next share goes out looking broken.