Twitter Cards are rich media attachments that transform simple links into engaging visual content on Twitter (now called X). When you share a URL on Twitter, these special meta tags control how your content appears, displaying images, titles, descriptions, and other rich media. Twitter Cards make your tweets stand out in crowded timelines, dramatically increasing engagement, click-through rates, and overall visibility of your shared content.
The default card type featuring a small square image (1:1 aspect ratio), title, description, and domain name. Best for general content, articles, and blog posts. The image appears on the left side with text on the right, creating a compact, informative display.
Similar to the summary card but with a large, prominent image (2:1 aspect ratio) displayed above the title and description. This format is excellent for visual content, photography, infographics, and when the image is central to understanding the content. Studies show large image cards receive up to 3x more engagement than standard summary cards.
Designed specifically for mobile app promotion, featuring app details, ratings, price, and a direct install button. Only available to websites that have been whitelisted by Twitter. Ideal for app developers and mobile-first businesses.
Enables inline playback of video and audio content directly within Twitter. Users can watch videos or listen to audio without leaving Twitter, significantly increasing consumption of media content. Requires Twitter approval to use.
Specifies the card type. Values: summary, summary_large_image, app, or player. This is the only required Twitter Card tag.
<meta name="twitter:card" content="summary_large_image">The title of your content as it should appear in the card. Maximum 70 characters. Should be concise and compelling to encourage clicks.
<meta name="twitter:title" content="Complete Guide to Twitter Cards">A description of your content. Maximum 200 characters. Make it engaging and informative to entice users to click through.
<meta name="twitter:description" content="Learn how to implement Twitter Cards to increase engagement and traffic from Twitter.">URL of the image to display in the card. For summary cards, recommended size is 300x300 pixels minimum (1:1 ratio). For summary_large_image, use 1200x628 pixels minimum (1.91:1 ratio). Images must be less than 5MB.
<meta name="twitter:image" content="https://example.com/image.jpg">Your site's Twitter handle (with @ symbol). This helps Twitter attribute the content to your brand and may display your handle in the card.
<meta name="twitter:site" content="@yourhandle">The Twitter handle of the content creator or author. Helps attribute content to individual creators while maintaining brand association.
<meta name="twitter:creator" content="@authorhandle">Use high-contrast images that stand out in Twitter's feed. Include your brand colors and logo for recognition. Avoid text-heavy images as they may be hard to read at small sizes. Test images on both mobile and desktop to ensure they display correctly. Images with faces receive 38% more engagement than those without.
Twitter Cards and Open Graph tags serve similar purposes but for different platforms. Twitter will fall back to Open Graph tags if Twitter-specific tags are not present. However, implementing both gives you maximum control over how your content appears on each platform.
If Twitter Card tags are not present, Twitter uses these Open Graph equivalents:
twitter:title → og:titletwitter:description → og:descriptiontwitter:image → og:imageImplement both Twitter Cards and Open Graph tags when you want different content for Twitter versus other platforms. For example, you might use a tall image for Twitter (summary_large_image) but a square image for Facebook/LinkedIn (Open Graph).
<head>
<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourbrand">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="Image description">
</head>
Twitter provides a Card Validator tool at cards-dev.twitter.com where you can enter your URL and see exactly how your card will appear. The validator also identifies any errors in your implementation and provides helpful suggestions.
twitter:card value is spelled correctlyFor video content, implement a player card with these additional tags:
twitter:player - URL of the video player iframetwitter:player:width - Player width in pixelstwitter:player:height - Player height in pixelstwitter:player:stream - Direct URL to video fileMobile app cards include:
Track the performance of your Twitter Cards through Twitter Analytics. Monitor impressions, engagements, and click-through rates to understand what content resonates with your audience. Tweets with cards typically receive 150% more retweets than those without.
Use summary_large_image for visual content and articles with compelling images. Use standard summary for text-heavy content or when you want the focus on the tweet text rather than the image.
High-quality, relevant images increase engagement significantly. Test different images to see what performs best with your audience. Use bright colors and high contrast to stand out in the feed.
Titles should be under 70 characters to avoid truncation. Descriptions should be compelling but brief, focusing on key benefits or interesting facts that encourage clicks.
Keep Twitter Card metadata current, especially for time-sensitive content. Update images for seasonal campaigns, new product launches, or trending topics.
Preview your cards on both mobile and desktop, as they may display differently. Most Twitter users access the platform on mobile, so mobile optimization is crucial.
twitter:image:alt for accessibility