Twitter Card Images: Sizes, Meta Tags & Best Practices

What Are Twitter Cards?

Twitter Cards (now X Cards) are previews of links shared on Twitter/X. The platform reads your page's metadata to build the card. A descriptive image can help readers recognize the page; which text and image elements appear depends on the card type and how the platform displays it.

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:

// Run on your server, at build time, or when publishing content.
const response = await fetch("https://www.ogmagic.dev/api/images", {
  method: "POST",
  headers: {
    Authorization: "Bearer " + process.env.OGMAGIC_API_KEY,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ title: "My article", template: "gradient-mesh" }),
});
if (!response.ok) throw new Error("Image creation failed");
const image = await response.json();
// Save image.url with your content; use it in og:image and twitter:image.

OGMagic generates 1200×630 PNG images from JSON options. 55+ templates, free tier with email access, 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:image or og:image tags
• 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, email access, €10 / US $12 one-time for Pro.