Twitter/X Card Preview
How to use the Twitter Card Generator
Twitter cards are how your URL appears when shared on X (Twitter). The right card type plus a 1200 × 630 image = a preview that stops the scroll. The wrong card or no image = your link is invisible in the feed.
Pick the card type
summary_large_image is the right choice for almost all content — large image above title and description. summary is for compact cards with a small thumbnail. player is for video. app is for mobile app install cards.
Set twitter:title and twitter:description
Title up to 70 characters, description up to 200. X truncates earlier than Facebook so write tighter. These can differ from your og:title and meta description if you want platform-specific copy.
Set twitter:image
1200 × 630 for summary_large_image, 144 × 144 minimum for summary. Absolute URL, JPG/PNG/WebP/GIF, under 5 MB.
Add twitter:site and validate
twitter:site is your @handle (e.g., @autorank_so) — gives the card attribution in some contexts. Test with the X Card Validator before deploying.
Why Twitter cards matter
X (Twitter) is the highest-velocity surface for link sharing in tech, news, and creator audiences. A well-configured Twitter card is the difference between a tweet that earns clicks and one that gets ignored as text noise.
The four card types
- summary_large_image — large image, title, description. Default for most content.
- summary — small square thumbnail with title and description. Better for citation-style links.
- player — embedded video or audio player. Used by media sites.
- app — mobile app install card. Used by app developers.
Why summary_large_image wins
The large-image format takes up roughly 4× more vertical space in the X feed than a text tweet. Studies of 100k+ tweets consistently show 30–60% higher engagement on summary_large_image cards versus summary cards. Unless you have a specific reason to use the small format (e.g., text-heavy reference content), default to summary_large_image.
Twitter card vs Open Graph
X reads twitter:* tags first, falling back to og:* tags when Twitter-specific tags are missing. You can ship Open Graph alone and X will render a card. The reason to add explicit twitter:* tags: full control over card type, the ability to use a different image on X than Facebook, and twitter:site for handle attribution.
Frequently asked questions
What is a Twitter card?
A Twitter card is the rich preview that appears when your URL is shared on X (Twitter). It's controlled by twitter:* meta tags in your page's <head>. Cards range from compact (summary) to large (summary_large_image) to embedded media (player).
Which Twitter card type should I use?
summary_large_image for almost all content — it's the highest-engagement format. Use summary only for citation-style links or text-heavy reference pages. Use player for embedded video. Use app for mobile app install promos.
What size should twitter:image be?
1200 × 630 for summary_large_image (1.91:1 ratio). 144 × 144 minimum for summary (1:1 ratio). Stay under 5 MB. JPG, PNG, WebP, and GIF all work. PNG is preferred when the image contains text.
Do I need Twitter cards if I have Open Graph?
No — X falls back to Open Graph when twitter:* tags are missing. The reasons to add Twitter-specific tags: full control over card type (summary vs summary_large_image), platform-specific images, and twitter:site handle attribution. For most sites, Open Graph alone is sufficient.
Why doesn't my Twitter card appear?
Common causes: (1) twitter:image URL is relative not absolute; (2) image is below the minimum size; (3) X has cached the URL — use the X Card Validator to force re-scrape; (4) the page returns 404 or 5xx to X's crawler (Twitterbot user agent). Validate with cards-dev.twitter.com/validator.