Meta Tags, Open Graph, and Twitter Cards: What They Actually Do

"Meta tags" gets used as a catch-all term, but there are really three separate systems at play whenever a page is shared or shown in search results, each read by a different platform, each with its own property names: the standard HTML meta tags (title, description), Open Graph (used by Facebook, LinkedIn, Slack, and most link-preview generators), and Twitter Card tags (used specifically by Twitter/X).

Getting any one of them wrong doesn't break the page — it just means that platform falls back to a generic default, or shows nothing at all, which is usually how someone first notices something's off.

The <title> tag and meta description are what (usually) render as your blue link and gray summary in search results. "Usually" is doing real work in that sentence — Google frequently rewrites both based on the search query and page content, especially when the written title or description doesn't match what it thinks the searcher wants.

That's not a reason to skip writing good ones. A well-written title and description are still commonly used as-is, and they're the first thing a searcher reads before deciding to click — worth treating as real copywriting, not a formality.

• Keep titles under about 60 characters to avoid truncation
• Keep descriptions under about 160 characters
• Write for the human reading it, not just for keyword stuffing

Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) is a protocol originally built by Facebook and now used broadly by LinkedIn, Slack, Discord, iMessage, and most other platforms that generate a preview card when a link is pasted or shared.

og:image is the one that matters most visually — it's the single biggest reason a shared link either looks polished with a preview thumbnail, or shows up as a bare, unstyled text link. A missing or broken og:image URL (not a full absolute URL, or pointing to a private/inaccessible image) is the most common cause of a link sharing with no image at all.

“A missing og:image is the single most common reason a shared link shows no preview at all.”

Twitter/X reads its own twitter:* tags (twitter:card, twitter:title, twitter:description, twitter:image) instead of Open Graph directly — though if those tags are missing, it will fall back to reading the equivalent Open Graph tags instead, so it's not strictly required to duplicate everything.

The one Twitter-specific decision worth making deliberately is twitter:card — summary_large_image gives a shared link a large, prominent image; plain summary uses a small thumbnail. For most content, summary_large_image gets meaningfully more visual attention in a feed.

Open Tools Library's Meta Tag Generator builds all three systems at once from the same title, description, and image, with live previews of both the Google search snippet and the social share card — so a missing image or an oversized title is visible before the page ever goes live, not after a link's already been shared.