Twitter Cards are a set of <meta name="twitter:..."> tags that tell X (formerly Twitter) how to render your URL when someone shares it. The result is the difference between an unstyled URL preview and a rich card with image, title, and description that earns substantially more clicks. The platform name change to X didn't change the spec; the tag names still start with twitter: and the underlying mechanics are unchanged.
This guide covers each Twitter Card type, the required tags, image specifications, common pitfalls, and how to verify before publishing.
The Card Types
Two types are used in practice today:
- summary — small thumbnail next to title and description. Used for most content.
- summary_large_image — large hero image above title and description. Used for visual content (articles, products, design pieces).
Two older types — app (mobile app downloads) and player (embedded video/audio) — still technically work but are rarely seen and have specific use cases. For 99% of content, you want summary or summary_large_image.
The Required Tags
Minimum tags for a working card:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Write Meta Descriptions That Earn Clicks">
<meta name="twitter:description" content="Length, structure, and CTR-lifting format conventions for meta descriptions.">
<meta name="twitter:image" content="https://example.com/og-image.png">Optional but recommended:
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:image:alt" content="Screenshot of meta description analysis tool">- twitter:site — the @handle of your brand's account. X may credit your account in the card.
- twitter:creator — the @handle of the article's author. Same effect at the author level.
- twitter:image:alt — alt text for accessibility. Screen readers use this; sighted users don't see it. Always include.
Image Dimensions
The dimensions you target depend on the card type:
summary_large_image
- Recommended ratio: 2:1.
- Minimum: 300×157 pixels (any smaller and X won't render the large card).
- Recommended: 1200×600 pixels (clean 2:1, looks sharp on retina displays).
- Maximum file size: 5MB.
- Formats: JPG, PNG, WebP, GIF.
summary
- Recommended ratio: 1:1 (square).
- Minimum: 144×144 pixels.
- Recommended: 800×800 pixels.
- Other limits same as above.
If the image is too wide, X crops to centre. If it's too tall (taller than 2:1), X crops the top and bottom. Plan for safe-area: keep important content in the centre 2:1 region of any image.
Twitter Cards vs Open Graph
Twitter falls back to Open Graph tags when Twitter-specific tags aren't present. So if your page has Open Graph (og:title, og:description, og:image) configured for Facebook/LinkedIn, X will use those by default — no Twitter-specific tags required.
You only need explicit Twitter Card tags when you want to:
- Override the OG image with one that's optimised for X's aspect ratio.
- Use a different title or description on X than on other platforms.
- Use the
summary_large_imagecard type explicitly (withouttwitter:card, X may default tosummary). - Credit your @handle via
twitter:site.
For most sites, the simplest approach is to set up Open Graph tags well and add only twitter:card + twitter:site. The fallback covers the rest.
Verification
Before publishing widely, validate the card:
- Run the URL through Meta Tag Checker — instant report of every Twitter and Open Graph tag.
- Use X's own Card Validator at the X developer tools site — renders a preview of how the card will appear when shared.
- Test by tweeting/posting the URL on a private account or as a draft. Real-world rendering can differ from validator predictions.
X caches card data for several days. If you fix tags after a URL has been shared, the old (broken) card may continue showing in shares for up to a week. The validator can force a refresh.
Common Mistakes
Image too small
Image is 600×300 — technically meets the minimum 300×157 but renders blurry on modern retina displays. Always use 1200×600 or larger for summary_large_image.
Image with wrong aspect ratio
Image is 1200×800 (3:2 instead of 2:1). X crops to 2:1, often cutting heads off logos or badly cropping product photos. Always design to 2:1.
Card type mismatch
twitter:card set to summary_large_image, but the image is 800×800 (1:1, intended for summary). X tries to render the large card with a square image, which produces awkward stretched/letterboxed previews. Match card type to image aspect.
Missing alt text
twitter:image:alt not set. Screen reader users hear nothing about the card image; the platform may de-prioritise the card. Always set alt.
Outdated cached card
You updated the tags last week, but the card sharing on X still shows the old version. Use X's Card Validator to refresh the cache, or wait — typically 7 days.
Images blocked by robots.txt
Your image URL is blocked from crawlers in robots.txt. X's crawler can't fetch the image, so the card has no image. Always allow image URLs through robots.txt.
Relative image URLs
content="/og-image.png" — X needs an absolute URL. Always include the protocol and domain: content="https://example.com/og-image.png".
Setting Tags Programmatically
Most modern frameworks generate these tags dynamically:
- WordPress — Yoast, Rank Math, and other SEO plugins generate Twitter Cards from post metadata.
- Next.js — the
metadataAPI in app router generates Twitter and OG tags from a single config object. - Nuxt / SvelteKit / Astro — similar metadata helpers.
- Custom CMSes — straightforward to template; the tags are static text.
The fallback question: when no per-page card data is set, what does the site use? Default to a site-wide default image, the page title, and a brand-level description. Better than no card at all.
Maintenance
- Audit your top 20 most-shared URLs annually. Check for missing card tags, outdated images, broken image URLs.
- Whenever you launch new template/theme changes, verify the card output didn't break.
- For high-stakes campaign content (product launches, major announcements), validate the card before publishing the URL anywhere.
- Keep the OG image production process documented — there should be one canonical 1200×600 hero image per major page, sized for retina, optimised under 200KB.
The card is what determines whether a shared link looks credible or amateurish. Meta Tag Checker takes the guesswork out — paste any URL, see exactly what X will render before anyone clicks share.