Twitter Card Image Size (2026)

What is a Twitter Card?

A Twitter Card is the link preview UI Twitter/X generates from your meta tags. When someone tweets your URL, X scrapes your page, reads Open Graph and Twitter meta tags, and then renders a preview with an image, title, and description. Your image size and aspect ratio determine whether it looks premium or looks broken.

Recommended Twitter Card image size

The most common (and most useful) card type is summary_large_image. In practice, 1200x630 is a strong universal default for your card image. Some guides recommend 1200x628 to match 1.91:1 exactly. The difference is tiny. What matters more is: do not ship odd aspect ratios and do not design edge-to-edge.

Card types (and which one you should pick)

Twitter/X supports multiple card types. For typical websites, you almost always want summary_large_image because it produces the biggest, clearest preview in the feed. Other card types exist, but they are niche.

• summary: smaller image preview, often less engaging
• summary_large_image: large image card, best default for links
• player: embedded media player cards (special cases)
• app: app install cards (special cases)

If you are trying to maximize click-through rate for a link, pick large image, keep the image simple, and ensure your tags are server-rendered.

Meta tags you actually need

If you only add one Twitter tag, add twitter:card. But in real deployments, you should set both Open Graph and Twitter tags so every platform gets what it needs.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/og.png" />

<meta property="og:title" content="Your title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://example.com/og.png" />

Want copy-paste tags without thinking about syntax? Use the Meta Tag Generator.

How X chooses the image (OG vs Twitter tags)

A common trap is assuming only Twitter tags matter on Twitter/X. In practice, scrapers often read both sets. The safest approach is to set both og:image and twitter:image to the same absolute HTTPS URL. That way you get consistent behavior across platforms and fewer weird edge cases.

If you see the wrong image, inspect your HTML for duplicates. It is easy to accidentally output two og:image tags: one from a global layout and one from the page. Different scrapers may pick different ones.

Small but useful extras (quality and attribution)

These tags will not magically fix sizing issues, but they improve consistency and clarity:

• twitter:image:alt to describe the image
• twitter:site to attribute the card to your account
• og:image:width / og:image:height to reduce ambiguity

If you want the safest setup, set Open Graph and Twitter tags to the same image URL and keep the image stable.

Minimum size, file size, and reliability

Even if your image has the right dimensions, a large file can still cause preview issues. Scrapers have timeouts and they do not always retry. Keep your image reasonably sized, host it on a fast origin, and avoid heavyweight transformations on the first request.

When choosing format:

• Use PNG when the image is mostly text, UI, or flat colors.
• Use JPG when the image is photo-heavy and you need smaller bytes.
• Avoid exotic formats for og:image unless you have tested them with real scrapers.

Design rules that prevent ugly crops

People treat Twitter like a speed-run. Your preview has to communicate in under a second. These rules prevent 90% of bad previews:

• Keep the title big. If it is not readable at a glance, it fails.
• Do not put important text in the corners. Use a safe area.
• Use high contrast. Most previews appear in a dense feed.
• Prefer one focal point. Busy backgrounds reduce clarity.

Common failure modes (and fast fixes)

If the card does not look right, it is usually one of these issues:

• Large image not showing: confirm twitter:card=summary_large_image.
• Blank image: the image URL is blocked, private, or too slow. Open it in an incognito window and confirm it returns an image.
• Wrong image: caching or duplicate tags. Check for multiple og:image tags and refresh via validation tools.
• Cropped text: text too close to edges. Redesign with a safe area and larger fonts.

Mobile vs desktop: design for the smallest viewport

Even if you design on a 27-inch monitor, most people will see your preview on a phone. That means: small fonts disappear, subtle contrast gets crushed, and busy layouts turn into noise. The best Twitter/X cards are readable at thumbnail size.

Practical guideline: if your design still communicates its value when you zoom out until it looks like a phone screenshot, you are good. If it becomes a gray rectangle, simplify.

Redirects and short links

Many teams share links through redirects (tracking links, shorteners, campaign URLs). Redirects are fine, but chained redirects or inconsistent canonical URLs can cause Twitter/X to cache confusing metadata.

• Keep redirects short (one hop if possible).
• Ensure the final HTML response has stable OG/Twitter tags.
• Keep og:url consistent with your canonical URL.

How Twitter/X caching works (the part that surprises everyone)

X caches preview data. That means you can deploy a fix and still see the old preview for a while. The fix is not to redeploy 20 times. The fix is to validate the URL through a tool that triggers a re-scrape, or to wait for caches to expire.

When debugging, separate the problems:

1. Scraper cannot fetch the HTML (robots, auth, blocked by firewall).
2. Scraper can fetch HTML, but tags are missing or wrong.
3. Tags are correct, but the image URL is blocked or too slow.
4. Everything is correct, but you are seeing cached output.

Validate the preview like a bot

The fastest way to debug is to validate the URL and see exactly what meta tags are present. Start with our OG Validator to confirm og:title, og:description, and og:image exist and look right.

If your tags look correct but the preview still looks wrong, move to the platform debugger and force a refresh. If you are stuck, read OG image not showing for a full checklist.

Debug flow (in order)

When you are under time pressure, follow this order. It prevents random thrashing:

1. Confirm the page returns OG tags in the initial HTML response.
2. Confirm twitter:card is set to summary_large_image.
3. Confirm og:image and twitter:image are absolute HTTPS URLs.
4. Open the image URL in an incognito window. It must load without login.
5. Check the image content-type is an image, not HTML.
6. Check the dimensions are close to 1200x630 and text is not at the edges.
7. Validate the URL again after deployment (do not trust local).
8. Wait or refresh caches via validation tooling if the preview is stale.