X/Twitter Card tags

Meta tags that control the title, description, and image shown when someone shares your page on X, still using the twitter: prefix.

make my link show a big image on XTwitter link preview tagswhy does my tweet show the wrong picturemy link posts as a tiny thumbnail instead of a big picturethe preview when I paste a link into XTwitter CardsX card meta tagstwiter card tags

See it

Live demo coming soon

What it is

X/Twitter Card tags are <meta> elements that describe how a URL should look when shared on X. The key property is twitter:card, commonly set to summary or summary_large_image, with twitter:title, twitter:description, twitter:image, and twitter:image:alt supplying the card content. The old Twitter name remains in every property.

Use them when the generic Open Graph preview is not enough or you want an explicit large-image card on X. Put the tags in the server-rendered HTML head, use an absolute HTTPS image URL, and make sure Twitterbot can fetch both the page and the image without signing in or running JavaScript.

The gotcha is caching. X may keep an old title or image after the page changes, and adding a query string to the shared URL creates another URL rather than repairing the original card. Open Graph tags can provide fallback values, but explicit twitter:* tags make the intended card unambiguous.

Ask AI for it

Add X/Twitter Card metadata to every shareable page. Set twitter:card to "summary_large_image" and provide twitter:title, twitter:description, twitter:image with an absolute HTTPS URL, and twitter:image:alt. Put the tags in the server-rendered <head>, keep their values aligned with og:title, og:description, and og:image, and confirm with curl using the Twitterbot user agent that the page and image return 200 without cookies, JavaScript, or authentication.

You might have meant

open graph tagsopen graph imageunfurlmeta description