scalpel@labs: ~/glossary/twitter-card-tags.mdx5 sections

Twitter Card Tags

Twitter Card tags are `<meta name="twitter:*">` tags that control how a link displays when shared on X. X reads these first, then falls back to Open Graph tags for missing fields.

extension: Scalpel SEOupdated: 2026-08-14read_time: 1 min
less twitter-card-tags.mdx

Why it matters

Skip twitter:card and X guesses your preview format, often badly. You might want a big image card but get a text-only summary. That kills click-through; people skip plain-looking shares. The fix is tiny: one meta tag. Most sites can skip duplicating all the Open Graph fields. X will pull those if twitter tags are missing. But twitter:card itself matters.

How it works

X has four card types: summary (text only), summary_large_image (big image plus text), app (mobile deep links), and player (embedded video). Set twitter:card to one of these and X formats the preview accordingly.

For image and text, X checks for twitter:* tags first. If they're missing, X falls back to the Open Graph equivalents (og:image, og:title, og:description). So if you set twitter:card="summary_large_image" and omit the other twitter tags, X will use your Open Graph fields instead. Skip both and there's no image.

What does not matter

Skip twitter:creator and twitter:site unless you want shares attributed to a specific account. X shares the link fine without them. Image aspect ratios differ slightly (X prefers 1.91:1 for large cards, but most images work). And don't invent a twitter:card value; stick to the four documented types or X will ignore it and guess.

Code example

Here is a minimal Twitter Card setup that delegates to Open Graph:

<!-- Minimal: just declare the card type -->
<meta name="twitter:card" content="summary_large_image" />
<!-- X will read og:title, og:description, og:image from below -->
<meta property="og:title" content="How to Audit Your Site for SEO" />
<meta property="og:description" content="Learn the essentials of on-page and technical SEO auditing." />
<meta property="og:image" content="https://example.com/og-hero.jpg" />

Here is the same setup with explicit Twitter tags overriding Open Graph:

<!-- Explicit: all fields set via twitter:* tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to Audit Your Site for SEO" />
<meta name="twitter:description" content="A practical guide to on-page and technical SEO auditing." />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />

The first approach is simpler; the second gives you control if you want different preview text for X than for other platforms.

How Scalpel shows it

The Social tab displays detected Twitter Card tags beside the Open Graph preview. You'll see which fields use explicit twitter:* tags and which are pulling from Open Graph.