Twitter Cards: X-Specific Share Preview Control

twitter:card selects the preview layout. summary renders a compact card with a small square thumbnail alongside the title and description — appropriate for content where the image isn't the primary draw. summary_large_image renders a full-width hero image above the title and description, producing a visually prominent, higher-engagement preview that most content marketing teams prefer by default.

Additional, more specialized types exist (app for linking directly to app-store listings, player for embedded video/audio), but summary and summary_large_image cover the overwhelming majority of real-world use cases.

Open Graph, as a Facebook-originated protocol predating a formal web standard for custom meta namespaces, uses the non-standard property attribute: <meta property="og:title" content="...">. Twitter Cards, added later, deliberately use the standard HTML name attribute instead: <meta name="twitter:title" content="...">.

This distinction is easy to lose in copy-paste, especially when a developer duplicates an Open Graph tag and only swaps the og: prefix for twitter: without also changing property to name. The resulting tag is silently ignored by X's card parser — no error, just a missing or fallback preview.

X's card parser checks for twitter:title, twitter:description, and twitter:image first, but if any are absent, it automatically falls back to the equivalent og:title, og:description, and og:image values already on the page.

This means a site with a complete, correct Open Graph implementation often only needs to add a single additional tag — twitter:card — to get a good result on X, rather than duplicating the entire title/description/image trio a second time under the twitter: namespace.

Twitter/X's Own Preview Protocol. Twitter (X) predates wide Open Graph adoption with its own, similar-but-distinct meta tag namespace: twitter:card, twitter:title, twitter:image. When these are missing, X falls back to reading standard Open Graph tags — but explicit Twitter tags give finer control over how a card renders specifically on that platform.

twitter:card Chooses The Layout. The twitter:card property selects between card layouts, most commonly 'summary' (small square thumbnail, compact) and 'summary_large_image' (full-width hero image, much more visually prominent) — the latter is almost always the better choice for content marketing.

Twitter Card Types. Which twitter:card value produces a large, full-width hero image in the preview, rather than a small square thumbnail?

• →summary
• →summary_large_image
• →hero_card

Twitter Tags Use name=, Not property=. A subtle but important syntactic difference: Open Graph tags use <meta property="og:...">, while Twitter Card tags use <meta name="twitter:...">. Mixing these up is a common copy-paste mistake that silently causes tags to be ignored.

Attribute Syntax Difference. What attribute does a correctly-formed Twitter Card meta tag use to identify itself, as opposed to Open Graph's property attribute?

• →name
• →property, same as Open Graph
• →A custom data-twitter attribute

Fallback To Open Graph Reduces Duplication. If twitter:title, twitter:description, or twitter:image are omitted, X automatically falls back to the equivalent og:title, og:description, and og:image values — meaning most sites only need to set twitter:card explicitly and can skip duplicating the rest.

Twitter/OG Fallback Behavior. A page has full Open Graph tags but only sets twitter:card, with no twitter:title or twitter:image. What happens on X?

• →The card renders with no title or image at all
• →X automatically uses the equivalent og:title and og:image values
• →The share is rejected as invalid

Twitter Cards Configured. You now know how to configure Twitter/X-specific share previews, the correct name= syntax that distinguishes them from Open Graph's property= tags, and how the automatic fallback to Open Graph data minimizes duplicate work.

Add A Twitter Card Meta Tag. twitter:card controls how the page previews when shared on Twitter/X.