Twitter Card Requirements & Best Practices
Complete guide to implementing Twitter Cards for optimal Twitter sharing
Overview
Twitter Cards allow you to attach rich photos, videos, and media experiences to Tweets. When users share your content on Twitter, these cards display a preview with title, description, and image.
Twitter also uses Open Graph tags as a fallback, but implementing Twitter-specific tags gives you more control and ensures optimal display on the platform.
Twitter Card Types
Twitter supports four main card types:
Summary Card
<meta name="twitter:card" content="summary" /> Best for: General content, blog posts, articles
Features: Title, description, and small square thumbnail (120x120px minimum)
Image aspect ratio: 1:1 (square)
Summary Card with Large Image
<meta name="twitter:card" content="summary_large_image" /> Best for: Visual content, featured images, photography
Features: Title, description, and prominent large image
Image size: 300x157px minimum, 1200x628px recommended
Image aspect ratio: 2:1 (most common choice)
App Card
<meta name="twitter:card" content="app" /> Best for: Mobile app promotion
Features: App name, description, icon, and install buttons for iOS/Android
Player Card
<meta name="twitter:card" content="player" /> Best for: Video and audio content
Features: Embedded media player directly in the Tweet
Note: Requires approval from Twitter. Must apply via Twitter Developer Portal.
Required Twitter Card Tags
twitter:card
<meta name="twitter:card" content="summary_large_image" /> Required. Specifies the card type. Choose from: summary, summary_large_image, app, or player.
twitter:title
<meta name="twitter:title" content="Your Page Title" /> Required. Title of your content.
- Maximum 70 characters (will be truncated)
- Should be concise and descriptive
- Fallback: Uses og:title if not specified
twitter:description
<meta name="twitter:description" content="Brief description of your content" /> Required. Description of your content.
- Maximum 200 characters
- Should complement the title
- Fallback: Uses og:description if not specified
twitter:image
<meta name="twitter:image" content="https://example.com/image.jpg" /> Required. URL to image for the card.
- Max file size: 5 MB
- Supported formats: JPG, PNG, WebP, GIF
- For summary card: 120x120px minimum (1:1 ratio)
- For summary_large_image: 300x157px min, 1200x628px recommended (2:1 ratio)
- Must use absolute URL with HTTPS
- Fallback: Uses og:image if not specified
Optional but Recommended Tags
twitter:site
<meta name="twitter:site" content="@username" /> Purpose: Twitter username of the website or company. Displays as "via @username" in the Tweet. Example: @ogpreviewio
twitter:creator
<meta name="twitter:creator" content="@username" /> Purpose: Twitter username of the content creator or author. Example: @johndoe
twitter:image:alt
<meta name="twitter:image:alt" content="Description of the image" /> Purpose: Alt text for the image (accessibility).
- Maximum 420 characters
- Highly recommended for accessibility
- Used by screen readers
Complete Example
Here's a complete example combining Twitter Cards with Open Graph tags:
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@ogpreviewio" />
<meta name="twitter:creator" content="@johndoe" />
<meta name="twitter:title" content="Complete Guide to Twitter Cards" />
<meta name="twitter:description" content="Learn how to implement Twitter Cards for perfect Twitter sharing with images, titles, and descriptions." />
<meta name="twitter:image" content="https://example.com/twitter-card.jpg" />
<meta name="twitter:image:alt" content="Twitter Card implementation guide with code examples" />
<!-- Open Graph Tags (Fallback) -->
<meta property="og:title" content="Complete Guide to Twitter Cards" />
<meta property="og:description" content="Learn how to implement Twitter Cards for perfect Twitter sharing with images, titles, and descriptions." />
<meta property="og:image" content="https://example.com/twitter-card.jpg" />
<meta property="og:url" content="https://example.com/guide/twitter-cards" />
<meta property="og:type" content="article" />Testing Your Twitter Cards
Twitter Card Validator
Always test your Twitter Cards using Twitter's official validator:
Open Twitter Card Validator →What it does:
- Validates your Twitter Card tags
- Shows preview of how your card will appear
- Identifies missing or incorrect tags
- Provides debugging information
Best Practices
✓ Use summary_large_image for most content
The large image card (1200x628px) performs better than the small square thumbnail across all content types.
✓ Always include twitter:image:alt
Alt text improves accessibility and is increasingly important for SEO and user experience.
✓ Optimize images for mobile
Most Twitter users are on mobile. Ensure text in images is readable on small screens.
✓ Use both Twitter Cards and Open Graph
Twitter uses Open Graph as fallback. Implementing both ensures compatibility across all platforms.
✓ Keep file sizes small
Twitter's 5MB limit is generous, but smaller images load faster. Aim for 200-500KB for optimal performance.
Common Mistakes to Avoid
❌ Using property instead of name
Twitter Cards use name attribute, not property. Correct: <meta name="twitter:card">
Wrong: <meta property="twitter:card">
❌ Images too small or wrong aspect ratio
For summary_large_image, use 1200x628px (2:1 ratio). Images that don't match will be cropped awkwardly.
❌ Forgetting HTTPS for images
Twitter requires HTTPS URLs for images. HTTP images won't display.
❌ Not testing before publishing
Always use the Twitter Card Validator before sharing. Fixing issues after content goes viral is much harder.
Twitter Cards vs Open Graph
Key Differences
name, Open Graph uses propertytwitter:, Open Graph uses og:Related Tools
Ready to Put This Into Practice?
Now that you understand the requirements, use our tools to implement and test your Open Graph tags.