Twitter Card Meta Tags: Complete Guide
Everything you need to know about Twitter Card meta tags: card types, required properties, image specs, and implementation examples for X.com.
Twitter Cards (now X Cards) are meta tags that control how your links appear when shared on X.com. A properly configured Twitter Card transforms a bare URL into a rich visual preview with an image, title, and description — dramatically increasing engagement.
Card Types
X supports four card types, each with a different layout:
summary
A compact card with a small square thumbnail:
<meta name="twitter:card" content="summary" />summary_large_image
A card with a large, wide banner image (most common for articles):
<meta name="twitter:card" content="summary_large_image" />app
For mobile app promotion with direct install buttons:
<meta name="twitter:card" content="app" />player
For embedded video or audio players:
<meta name="twitter:card" content="player" />For most websites and blog posts, summary_large_image is the recommended card type.
Required Twitter Card Tags
Every Twitter Card needs at minimum:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Twitter Card Meta Tags: Complete Guide" />
<meta name="twitter:description" content="Everything about Twitter Card meta tags." />
<meta name="twitter:image" content="https://example.com/card-image.png" />Optional Tags
<meta name="twitter:site" content="@yourbrandhandle" />
<meta name="twitter:creator" content="@authorhandle" />
<meta name="twitter:image:alt" content="Description of the card image" />| Tag | Purpose |
|---|---|
twitter:site |
The X handle of your website/brand |
twitter:creator |
The X handle of the content author |
twitter:image:alt |
Accessibility text for the card image |
Image Specifications
| Card Type | Min Size | Recommended Size | Aspect Ratio | Max File Size |
|---|---|---|---|---|
summary |
144×144 px | 800×800 px | 1:1 | 5 MB |
summary_large_image |
300×157 px | 1200×628 px | 1.91:1 | 5 MB |
For detailed image sizing across all platforms, see the Open Graph Image Size Guide.
Complete Implementation Example
<head>
<!-- Standard SEO -->
<title>Twitter Card Meta Tags: Complete Guide</title>
<meta name="description" content="Everything about Twitter Card meta tags." />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@opengraphgen" />
<meta name="twitter:creator" content="@sanjaysamanta" />
<meta name="twitter:title" content="Twitter Card Meta Tags: Complete Guide" />
<meta name="twitter:description" content="Everything about Twitter Card meta tags for X.com." />
<meta name="twitter:image" content="https://example.com/twitter-card-guide.png" />
<meta name="twitter:image:alt" content="Twitter Card implementation guide" />
<!-- Open Graph (fallback for other platforms) -->
<meta property="og:title" content="Twitter Card Meta Tags: Complete Guide" />
<meta property="og:description" content="Everything about Twitter Card meta tags." />
<meta property="og:image" content="https://example.com/twitter-card-guide.png" />
<meta property="og:url" content="https://example.com/blog/twitter-card-meta-tags-guide" />
<meta property="og:type" content="article" />
</head>Twitter Card vs Open Graph
X reads Twitter Card tags first, then falls back to Open Graph tags for any missing properties. This means you can often skip Twitter-specific tags if your OG tags are complete. For the full comparison, see Twitter Card vs Open Graph.
Testing Your Cards
Since Twitter discontinued its public Card Validator, testing options include:
- Compose a tweet — The preview card renders in the compose window before posting.
- Open Graph Inspector — Simulates X’s card rendering alongside other platforms.
- curl —
curl -A "Twitterbot/1.0" -s https://your-url | grep 'twitter:'
For a complete testing workflow, see the Twitter Card Preview Guide.