Twitter Card Tags — Complete Reference & Implementation Guide
Twitter Card tags are HTML meta tags that control how links look when shared on X (Twitter). They define the card type, title, description, and image — independently from your Open Graph tags.
Without them, X falls back to your Open Graph tags. With them, you get full control over exactly how your content appears in the feed.
-> Test your Twitter Card tags with TryUnfurl
What Are Twitter Cards?
Twitter Cards are X's own metadata format, introduced to give publishers control over how shared links render in the Twitter feed. They use <meta name="twitter:*"> tags in the HTML <head>.
If twitter:* tags are absent, X falls back to og:* tags. So if your Open Graph tags are already set up, Twitter Cards are optional — but they give you extra precision and can show a different image or title specifically for X.
Twitter Card Types
| Card type | twitter:card value |
What it shows |
|---|---|---|
| Summary | summary |
Small square thumbnail + title + description |
| Summary Large Image | summary_large_image |
Large hero image above title + description |
| App | app |
Mobile app with store download links |
| Player | player |
Inline video or audio player |
For most websites and articles, use summary_large_image. It produces the most prominent visual card in the feed and drives significantly higher click-through rates than the plain summary card.
All Twitter Card Tags
| Tag | Required | Purpose |
|---|---|---|
twitter:card |
Yes | Card type (see table above) |
twitter:title |
Recommended | Title on X (max 70 chars) |
twitter:description |
Recommended | Description on X (max 200 chars) |
twitter:image |
Recommended | Absolute URL to image |
twitter:image:alt |
Recommended | Alt text for accessibility |
twitter:site |
Optional | Your site's Twitter @username |
twitter:creator |
Optional | Author's Twitter @username |
HTML Implementation Example
<head>
<!-- Open Graph (used by all other platforms) -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description.">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<!-- Twitter / X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description.">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">
<meta name="twitter:image:alt" content="Descriptive alt text for the image">
<meta name="twitter:site" content="@yourusername">
</head>
Tip: In most cases your OG and Twitter Card values will be identical. The main reason to set them separately is if you want a different image crop or title specifically for X.
Image Requirements for Twitter Cards
| Card type | Minimum size | Recommended size | Aspect ratio |
|---|---|---|---|
summary |
144 × 144 px | 400 × 400 px | 1:1 (square) |
summary_large_image |
300 × 157 px | 1200 × 630 px | 2:1 |
- Image must be an absolute HTTPS URL
- Supported formats: JPG, PNG, WebP, GIF (static only for cards)
- Maximum file size: 5 MB
- Images from protected domains or behind login will not display
Twitter Card vs Open Graph — Priority on X
X reads metadata in this order:
twitter:title→ thenog:title→ then<title>twitter:description→ thenog:description→ thenmeta name="description"twitter:image→ thenog:image
This means if you only have Open Graph tags, X will still generate a card using them. But explicitly setting twitter:card is still necessary — without it, X may not show a card at all even if OG tags are present.
Common Twitter Card Mistakes
- Missing
twitter:cardtag — X won't show a card without it, even with full OG tags - Using
summaryinstead ofsummary_large_image— missed opportunity for visual impact - Image too small — for
summary_large_image, images under 300 × 157 px won't display - JavaScript-injected tags — X's crawler doesn't execute JavaScript; tags must be in the initial HTML
- Image URL not publicly accessible — test by opening the image URL in a private browser window
Test Your Twitter Card Tags
Paste your URL into TryUnfurl.com to see how your Twitter Card renders alongside all other platform previews — without needing a Twitter account or the Card Validator.