Fix Missing Twitter Card Tags: Add summary_large_image

What's happening

Twitter Cards is X's metadata protocol for link previews, separate from Open Graph. The two protocols overlap in intent but use different tags: for Twitter, for OG. X does fall back to OG tags when Twitter-specific ones are missing, but the fallback is partial — Twitter-specific tags give you the most reliable preview.

The four Twitter Card types are summary (small square image alongside text), summary_large_image (large image dominating the card), app (mobile app install card), and player (embedded video/audio). For most content pages, summary_large_image is the right choice — it matches the Open Graph large preview layout.

X validates Twitter Cards via the legacy Twitter Card Validator (cards-dev.twitter.com/validator), which is partly deprecated but still useful for debugging. The X.com posting flow itself surfaces errors when a card fails to render, so test by drafting a post with the URL.

Why it matters

X link previews degrade. Without explicit twitter:card=summary_large_image, X may render a small thumbnail variant or fall back to text-only preview. Either way, post engagement drops 30-50%.

twitter:image overrides og:image when present. If your og:image is generic but a per-post twitter:image is custom, you get the better Twitter preview without affecting other platforms. This is useful for A/B testing different preview strategies on X specifically.

twitter:site and twitter:creator surface attribution. These tags add the @brand and @author handles to the preview card on X, which helps with discovery and follower growth on the platform. Missing them costs attribution.

Common causes

• Framework's metadata API supports OG but not Twitter-specific tags.
• twitter:card type is not set, so X picks summary by default (small image).
• twitter:image is missing and X falls back to og:image with reduced quality.
• twitter:title and twitter:description are missing on a page with branded copy.
• twitter:site (@brand handle) is omitted, losing the attribution tag on preview cards.
• Tags only set client-side, missed by X's crawler that does not run JavaScript.

Detect this on your site

Run a quick scan with the OG Checker. The tool surfaces this exact issue with the records and context needed to apply the fix below.

How to fix it

1. 1

   Audit current Twitter Card coverage

   Crawl the site and check for twitter:card, twitter:title, twitter:description, twitter:image, twitter:site on every indexable URL. The OG Checker reports both OG and Twitter Card tags side by side.

2. 2

   Set twitter:card to summary_large_image

   is the format with the dominant 1200x630 preview image — matches Open Graph's large card on Facebook and LinkedIn.

3. 3

   Add twitter:title, twitter:description, twitter:image

   Mirror the OG values: twitter:title=og:title, twitter:description=og:description, twitter:image=og:image. The redundancy is not wasted — it makes the X-side rendering deterministic.

4. 4

   Add twitter:site for brand attribution

   displays the @brand handle on the preview card. For articles, also add twitter:creator with the author's handle for byline attribution.

5. 5

   Emit tags in SSR HTML

   X's crawler does not run JavaScript. Twitter Card tags must appear in the initial server-rendered HTML response. Confirm via View Source, not just DevTools Elements after hydration.

6. 6

   Validate by drafting a post

   Draft a post on X with the URL — the live preview tells you exactly what users will see. The legacy Card Validator (cards-dev.twitter.com/validator) is partially deprecated but useful for catching parsing errors.

Example

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@brewbar" />
<meta name="twitter:creator" content="@author_handle" />
<meta name="twitter:title" content="Best Espresso Machines Under $500" />
<meta name="twitter:description" content="Compare 12 espresso machines on extraction temperature, tank size, and warranty." />
<meta name="twitter:image" content="https://example.com/og/espresso-roundup.png" />

Full Twitter Card metadata with site and creator attribution

Related fixes