Twitter Card Meta Tags Guide
When someone shares your URL on Twitter (now X), the platform reads specific meta tags to decide whether to show a plain text link or a rich card with an image, title, and description. These Twitter Card meta tags are separate from Open Graph tags, though Twitter falls back to OG tags when Card-specific ones are missing. Getting them right means your links stand out in feeds and attract more clicks.
The Four Card Types
Twitter defines four card types, each with its own visual layout:
| Card Type | Layout | Best For |
|---|---|---|
summary | Small square thumbnail on the left, text on the right | Blog posts, articles, generic pages |
summary_large_image | Large banner image above text | Product pages, feature announcements, visual content |
app | Direct download button for mobile apps | Mobile app promotion |
player | Embedded audio/video player | Video content, audio podcasts, live streams |
The summary and summary_large_image types cover 95% of use cases. The app card is niche, and the player card requires approval from Twitter before it will render.
Required Meta Tags for Summary Cards
The minimal set of tags for a summary card:
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JSON Formatter Online - Free Formatting Tool">
<meta name="twitter:description" content="Format and validate JSON data instantly in your browser. No sign-up required.">
<meta name="twitter:image" content="https://example.com/images/json-formatter-card.png">
For summary_large_image, change only the card type:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Markdown Preview Tool - Live Rendering">
<meta name="twitter:description" content="Preview Markdown with math, tables, and syntax highlighting in real time.">
<meta name="twitter:image" content="https://example.com/images/markdown-preview-banner.png">
The optional but recommended tags:
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:creator" content="@authorhandle">
<meta name="twitter:image:alt" content="Screenshot of the JSON formatter interface">
The twitter:site tag associates the card with your brand account. The twitter:creator tag credits the individual author. The image:alt tag provides accessibility text for the card image.
Image Specifications
Image sizing is where most card implementations fail. Twitter caches images aggressively and rejects cards with undersized images silently — you get a plain text link instead.
| Card Type | Minimum Size | Maximum Size | Max File Size | Aspect Ratio |
|---|---|---|---|---|
summary | 144×144 px | 4096×4096 px | 5 MB | 1:1 |
summary_large_image | 300×157 px | 4096×4096 px | 5 MB | 2:1 |
player | 128×128 px card, 640×360 px player | — | 5 MB | Varies |
For summary_large_image, design your image at 1200×600 pixels for sharp rendering on high-DPI displays. Use PNG for screenshots and JPG for photographs. Avoid animated GIFs — Twitter converts them to static images in cards.
Player Card Implementation
The player card embeds an iframe-based media player directly in the tweet. It requires additional tags:
<meta name="twitter:card" content="player">
<meta name="twitter:title" content="Live Coding Session">
<meta name="twitter:description" content="Watch the team build a REST API from scratch.">
<meta name="twitter:image" content="https://example.com/video-thumbnail.jpg">
<meta name="twitter:player" content="https://example.com/embed/video-123">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="270">
<meta name="twitter:player:stream" content="https://example.com/video-123.mp4">
Important restrictions on player cards: the player URL must serve HTTPS, the iframe must be responsive, and Twitter must whitelist your domain before player cards will render. Submit your domain through the Twitter Card Validator for approval.
Debugging and Validation
Twitter's Card Validator tool was removed in 2023, but you can still debug cards effectively:
- Use the URL debugger at cards-dev.twitter.com/validator (when available) or the newer Twitter developer tools.
- Check your tags with a meta tag inspector that parses both Twitter and Open Graph tags.
- Force cache refresh by appending a query parameter to your URL when sharing:
?v=2tells Twitter to re-fetch the page metadata. - Verify HTTPS — Twitter will not render cards for pages served over HTTP.
- Test the fallback chain — remove your Twitter tags temporarily and confirm that your Open Graph tags produce acceptable results.
The most common failure is forgetting that Twitter caches card data aggressively. If you update your meta tags, the old card may persist for days. Increment your URL version or use the cache-busting query parameter trick to push updates live.
Twitter Card tags work best when combined with comprehensive Open Graph and structured data markup. Build all three at once using the meta tag generator at /tools/meta-tag-generator to ensure consistent previews across every platform.