Twitter Card Meta Tags Complete Guide
What Are Twitter Cards?
Twitter Cards are meta tags you add to your page's <head> that tell Twitter how to display your content when someone shares a link. Without them, Twitter shows a plain text link. With them, your tweet includes an image, title, and description — dramatically increasing click-through rates.
Twitter supports four card types, each suited to different content.
The Four Card Types
| Card Type | twitter:card Value | Visual Layout | Best For |
|---|---|---|---|
| Summary | summary | Small square thumbnail on the left, text on the right | Blog posts, articles, general pages |
| Summary Large Image | summary_large_image | Large image above the text | Feature images, hero content, visual stories |
| App | app | Direct download button for a mobile app | Mobile app promotion |
| Player | player | Embedded audio or video player | Media content, livestreams, podcasts |
Most websites only need summary or summary_large_image. Choose summary_large_image when your content has a strong visual — it converts better.
Required and Optional Tags
Summary Card
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A concise description of the content.">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="Description of the image">
| Tag | Required? | Notes |
|---|---|---|
twitter:card | Yes | Must be first in the set |
twitter:site | Recommended | Your brand's Twitter handle |
twitter:title | Yes | Max 70 characters |
twitter:description | Yes | Max 200 characters |
twitter:image | Recommended | Square, minimum 144×144px |
twitter:image:alt | Recommended | Accessibility description for the image |
Summary Large Image Card
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A concise description of the content.">
<meta name="twitter:image" content="https://example.com/large-image.jpg">
<meta name="twitter:image:alt" content="Description of the image">
The key difference: the image must be at least 300×157px and is displayed at 2:1 aspect ratio below the text area.
Image Specifications
| Property | Summary | Summary Large Image |
|---|---|---|
| Min size | 144×144px | 300×157px |
| Max size | 4096×4096px | 4096×4096px |
| Max file size | 5MB | 5MB |
| Aspect ratio | 1:1 (square) | 2:1 (landscape) |
| Formats | JPG, PNG, GIF, WEBP | JPG, PNG, GIF, WEBP |
Always provide the largest clean image you can. Twitter crops and resizes to fit the viewer's device. An image that looks fine at 300px may look blurry on a retina display — aim for at least 1200×600px for large image cards.
Relationship with Open Graph Tags
Twitter falls back to Open Graph tags when Twitter-specific tags are missing. If you already have OG tags, you only need to add twitter:card and any overrides.
| Twitter Tag | OG Fallback |
|---|---|
twitter:title | og:title |
twitter:description | og:description |
twitter:image | og:image |
If you provide both, Twitter uses its own tags. This lets you customize how your content appears on Twitter independently of Facebook and other platforms.
<!-- Shared across platforms -->
<meta property="og:title" content="Free Online JSON Formatter">
<meta property="og:description" content="Format and validate JSON instantly.">
<meta property="og:image" content="https://example.com/og-image.jpg">
<!-- Twitter-specific overrides -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/twitter-specific-image.jpg">
App and Player Cards (Brief Overview)
App Card
Promotes a mobile app directly in the tweet:
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:app:id:iphone" content="123456789">
<meta name="twitter:app:id:googleplay" content="com.example.app">
<meta name="twitter:app:url:iphone" content="example://deeplink">
Player Card
Embeds audio or video:
<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Episode 42: CSS Performance">
<meta name="twitter:player" content="https://example.com/embed/42">
<meta name="twitter:player:width" content="480">
<meta name="twitter:player:height" content="270">
Player cards require Twitter's approval before they render. Submit your domain through the Card Validator.
Debugging Twitter Cards
- Card Validator — Twitter's official tool at
cards-dev.twitter.com/validator(requires login). Paste your URL and see exactly what Twitter will display. - Cache clearing — Twitter caches card data aggressively. If you update your meta tags, use the validator to force a re-crawl. Changes can take up to a week to propagate organically.
- Common issues:
- Image not showing: check the URL is publicly accessible and uses HTTPS
- Wrong card type: ensure
twitter:cardis the first tag in the set - Description truncated: keep under 200 characters
- Image cropped oddly: use exact aspect ratios (1:1 or 2:1)
Key Takeaways
- Twitter Cards add rich previews to shared links, boosting click-through rates
- Choose
summaryfor general content orsummary_large_imagefor visual content - Provide images at 1200×600px minimum for large image cards, 400×400px for summary
- Twitter falls back to Open Graph tags — only add Twitter-specific tags when you need overrides
twitter:cardmust be the first tag in your set- Use the Card Validator to debug and force cache refreshes after updates
- App and Player cards require additional setup and Twitter approval
Related Guides
Try It Yourself
Generate Twitter Card and Open Graph meta tags in seconds with our free Meta Tag Generator. Fill in your content details and copy the complete HTML snippet — includes standard SEO tags, OG tags, and Twitter Cards.