Twitter Card Image Guide: Sizes, Meta Tags & Best Practices (2026)
Everything you need to know about Twitter card images: recommended sizes, required meta tags, summary vs summary_large_image, and how to generate them automatically.
What Are Twitter Cards?
Twitter Cards (now X Cards) are rich media previews that appear when someone shares a URL on Twitter/X. Instead of a plain link, Twitter fetches your page's meta tags and displays a card with an image, title, and description. Cards with images get significantly more engagement — studies show 2-5x more clicks and retweets.
Twitter Card Types
Twitter supports several card types, but two matter most:
summary_large_image (Recommended)
This displays a large image above the title and description. It's what most websites and blogs should use. The image takes up most of the card, making it highly visual and clickable.
- Image size: 1200×628 pixels (minimum 300×157)
- Aspect ratio: 2:1 (images outside this get cropped)
- Max file size: 5MB
- Formats: JPG, PNG, WebP, GIF
summary
A smaller card with a square image thumbnail on the left. Useful for profile pages or when the image isn't the main focus, but summary_large_image performs better in most cases.
- Image size: 144×144 pixels (minimum 144×144)
- Aspect ratio: 1:1
Required Meta Tags
Add these meta tags to your page's <head>:
<!-- Twitter Card meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description under 200 chars" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />
<meta name="twitter:image:alt" content="Description of the image for accessibility" />
<!-- Optional but recommended -->
<meta name="twitter:site" content="@yourtwitterhandle" />
<meta name="twitter:creator" content="@authorhandle" />Important: Twitter also reads Open Graph tags as a fallback. If you have og:image set and no twitter:image, Twitter will use the OG image. This means you can often set just the OG tags and get both platforms covered.
Image Best Practices
1. Use 1200×630 for Maximum Compatibility
While Twitter technically wants 1200×628 (2:1), using 1200×630 works perfectly on Twitter AND all other platforms (Facebook, LinkedIn, Discord, Slack). The 2-pixel difference is imperceptible.
2. Keep Text in the Safe Zone
Twitter crops images slightly depending on the device. Keep all important text and logos within the center 80% of the image. Avoid text near the very edges.
3. Use Bold, Readable Text
Twitter cards are often seen on mobile at small sizes. Use large text (48px+ at 1200px width), high contrast, and bold fonts. Avoid thin fonts or small details.
4. Always Use Absolute URLs
The image URL must be absolute (starting with https://). Relative paths like /images/og.png won't work. Twitter's crawler needs the full URL.
Automating Twitter Card Images
Manually creating card images for every blog post doesn't scale. The fastest approach is using an OG image API:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://ogmagic.dev/api/og?title=My+Blog+Post&template=minimal-dark&domain=myblog.dev" />OGMagic generates 1200×630 PNG images from URL parameters. 55+ templates, free tier with no signup, works with any framework.
Testing Your Twitter Cards
Before sharing, always test your cards:
- Twitter Card Validator: cards-dev.twitter.com/validator
- opengraph.xyz: Preview across all platforms at once
- metatags.io: Edit and preview meta tags live
Common Issues
Card Not Showing
- Image URL must be absolute and publicly accessible (not behind auth)
- Image must be under 5MB
- Page must not block Twitter's crawler in robots.txt
- Use the Card Validator to force a re-fetch after changes
Wrong Image Showing
- Twitter caches cards aggressively — use the validator to clear cache
- Check for duplicate
twitter:imageorog:imagetags - Ensure no redirects on the image URL
Conclusion
Twitter card images are one of the simplest high-ROI improvements for any website. With proper meta tags and a 1200×630 image, your shared links get dramatically more clicks.
For automatic card image generation, try OGMagic — 55+ templates, no signup, $12 one-time for Pro.
Generate Twitter card images automatically
Beautiful social previews from a single URL. No signup required.
Get OG tips & product updates
Join our newsletter for Open Graph best practices, new template releases, and exclusive discounts. No spam, unsubscribe anytime.
🔒 We respect your inbox. No spam, ever.