Twitter / X Card Preview

Twitter / X Cards: make your links stand out in the feed

Twitter Cards (still configured with twitter: meta tags on X) control how a shared link appears: as a rich card with a headline, description, and image instead of a bare URL. This tool previews both card variants exactly as X renders them, so you can get the title length, image crop, and handles right before you ever hit post.

The two card types

<!-- Large hero image above the text -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Headline" />
<meta name="twitter:description" content="A one-line hook." />
<meta name="twitter:image" content="https://example.com/card.png" />
<meta name="twitter:site" content="@yourbrand" />

Switch twitter:card to summary for the compact layout with a small square thumbnail beside the text. Everything else stays the same.

Choosing summary vs summary_large_image

The single most consequential field is twitter:card. Set it to summary_large_image and X devotes a full-width banner to your image above the headline — the layout that wins for articles, launches, and anything you want to stop the scroll. Set it to summary and X collapses the image into a small square tile to the left of the text, which suits utility links and docs where the picture is secondary. The toggle in this tool flips between the two so you can judge which earns the click before you commit to the tag.

Mind the square crop

Here is the trap a generic OG image walks into on X: the summary card does not letterbox your 1.91:1 banner — it crops a centre square out of it. A headline baked into the left or right third of the image simply disappears. If you ever serve the small card, keep the logo or focal point dead centre, or supply a dedicated near-square twitter:image. The large card keeps the familiar 1200×630 frame, so one wide asset is fine there; it is only the compact layout that demands square-safe composition.

When you actually need twitter: tags

Most pages do not need a full set. X reads your existing og:title, og:description, and og:image when the matching twitter: tags are absent, so a lone twitter:card line to pick the layout is frequently all you have to add. Spell out the other twitter: tags only for a deliberate divergence — a punchier headline for the X audience, or a square image to dodge the crop above.

Refreshing a stale card on X

X holds onto the first card it scrapes for a URL, so an edit you have already deployed may still show the old version. The reliable fix is to start composing a post with the link: the compose box triggers a fresh fetch and renders the current card right there, which doubles as your confirmation that the new tags took. The legacy Card Validator was retired, so the compose preview is now the practical way to verify.

Attribution with site and creator

Two optional tags add attribution: twitter:site for the brand or publisher account, and twitter:creator for the individual author. They let X associate the card with real accounts, which looks more credible and can surface those handles in the card UI. Set twitter:site at minimum on branded content.

Pair this with

• Open Graph Preview — the tags X falls back to also drive Facebook, LinkedIn, Slack, and Discord; check those surfaces there.
• Image Cropper — export a centred square for the summary card so the centre-crop never cuts off your text.
• Meta Tag Generator — emit the twitter:card line alongside the rest of your head block in one go.
• Keyword Density Checker— tighten the headline copy before you trim it to X's 70-character card limit.