Twitter Card Types Explained: summary vs summary_large_image

By Ines Duarte ·

Twitter Card Types: summary vs summary_large_image (Which to Pick)

Two meta tags decide how your link looks the moment someone shares it on X. Get the wrong one of the twitter card types on your page, and a genuinely good image still shows up as a tiny square thumbnail nobody notices in a busy timeline. I've watched this happen to clients who spent real money on a banner image, only to have it render at postage-stamp size because one line of code was missing from the page head.

Quick note before we get into it: yes, the platform is called X now, and yes, the meta tags still say "twitter." That's not an oversight. The tag names (twitter:card, twitter:title, and so on) haven't changed since the rebrand, and "Twitter Card" is still what nearly everyone types into a search bar when their link looks wrong. So that's the term I'll use throughout.

What Is a Twitter Card, Exactly?

A Twitter card is the preview box X builds when someone posts a link: a headline, a short description, and (if you've set things up right) an image. Think of it as a business card your page hands over automatically whenever it gets shared. You don't control the handoff directly. You control it through a small set of meta tags sitting in your page's <head>, the invisible section of HTML that holds instructions for browsers and crawlers rather than content for human readers.

These tags are a separate system from Open Graph tags, the ones that start with og: and that Facebook, LinkedIn, Discord, and most other platforms read. X reads its own twitter:* tags first and only falls back to Open Graph when a specific twitter tag is missing. That distinction matters more than it sounds like it should, and it's the whole reason this article exists.

The Twitter card types

There are four documented values for the twitter:card tag: summary, summary_large_image, app, and player. If you're picturing X's own documentation page open in another tab to double-check this, close it. The official Cards documentation has effectively disappeared: the old developer.twitter.com page for summary cards now redirects to a bare, contentless landing page on docs.x.com, and the newer developer.x.com markup page returns a payment-required error.

I checked both directly while researching this piece. Neither one loads anything useful anymore, which is a strange gap for a feature that still runs on every link shared across the platform. We cover what actually replaced X's own validator in a separate rundown of testing options, if you want the full story on that gap.

app cards link to a downloadable app, and player cards embed audio or video. Both require X to approve and whitelist your account first, which puts them out of reach for the vast majority of site owners, bloggers, and small businesses reading this. If that's you, you'll only ever use summary or summary_large_image, so that's where the rest of this article stays focused.

summary vs summary_large_image, side by side

Here's the visual difference, described before you see any code: summary shows a small, roughly square thumbnail on the left with your title and description stacked to the right of it, similar to a search result with a tiny icon attached. summary_large_image shows a wide banner image (close to a 2:1 rectangle) stretched across the full width, with the title and description sitting below it. One is a footnote. The other is the headline act.

Most blog posts, product pages, and anything with a strong visual benefit from summary_large_image. It's the format you scroll past and actually stop for. Reserve summary for pages where the image is genuinely secondary, like a documentation page or a profile-style listing where the text carries the weight.

Here's what summary_large_image looks like in code:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A short, useful description of the page.">
<meta name="twitter:image" content="https://example.com/social-image.jpg">

And here's the same page set up for a small summary card instead:

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A short, useful description of the page.">
<meta name="twitter:image" content="https://example.com/small-image.jpg">

Only the first line changes. That's genuinely it. The value inside content="" has to be exactly summary or summary_large_image, spelled and spaced correctly, or X won't recognize it at all and will quietly treat your page as if the tag weren't there. I've seen people type large_image_summary by accident, reversing the word order, and then spend twenty minutes convinced their image was broken when the real problem was three transposed words.

Twitter card dimensions and size

For summary_large_image, aim for 1200x630 pixels, or 1200x628 if you're matching a strict 2:1 ratio (other social image size guides land on nearly the same number for X link previews). That size doubles nicely as your Open Graph image too, so you're not maintaining two separate files for the same job. X crops any image outside the 2:1 ratio to fit, trimming from the edges rather than squishing the whole picture, so keep whatever matters most (a face, a product, a headline you baked into the image) centered in roughly the middle 80% of the frame.

On minimum sizes, I want to be straight with you: there isn't a single reliable official number anymore. Different sources cite different floors, some as low as 280x150 pixels, and those figures trace back to guidance that predates the current documentation gap. Rather than repeat a number I can't verify against a live official source, my practical advice is to stay well clear of any of those floors: 600x315 pixels or larger is a safe working minimum, and 1200x630 remains the recommendation worth actually building your workflow around. Our deeper look at image size requirements across platforms has the full breakdown if summary_large_image is only one of the previews you're checking.

A narrow or near-square image paired with summary_large_image is one of the most common ways a card looks wrong even though every tag is technically present. X still forces it into the 2:1 shape, which means visible, sometimes awkward cropping on a portrait photo. If you're not sure your image file is even the right shape to begin with, running it through an image dimension checker before you set the meta tag saves you a round of "why does this look cut off" later, and compressing the file before you upload it keeps the crawler from timing out.

Do you need twitter:card if you already have Open Graph tags?

This is the question that trips up the most people, and it's worth answering precisely rather than in general terms. X does build in a fallback chain for some fields: if twitter:title is missing, X uses og:title instead. Same for twitter:description falling back to og:description, and twitter:image falling back to og:image. So far, that sounds like you could skip the twitter tags entirely and let Open Graph carry everything.

You can't, and here's the part that has no fallback: the card type. There is no Open Graph equivalent for twitter:card, so if that one tag is absent, X doesn't guess your intent from a big og:image sitting right there in the head. It defaults to the small summary layout, square thumbnail and all, even when your og:image is a perfectly sized wide banner.

This is the exact behavior our own checker flags when it scans a page: no twitter:card present means X falls back to a small summary card with a square thumbnail, regardless of how good the underlying image is. It's a one-line fix with an outsized effect on how a link performs in the feed.

The practical takeaway: if you already have solid Open Graph tags set up (through a plugin, a site builder, or by hand), you still need to add one extra line, <meta name="twitter:card" content="summary_large_image">, to actually get the large format on X. Everything else can ride on your existing og: tags if you'd rather not duplicate title, description, and image separately. Our Open Graph guide covers those base tags in more depth if you haven't set them up yet.

Two mistakes that quietly break a card

Most twitter:card problems come down to one of two things, and both are quick to spot once you know where to look.

The first is the missing twitter:card tag itself, covered above. It's an easy line to forget because nothing on the page looks broken, no error appears, and the page still works fine for every human visitor reading it in a browser. The only symptom is a link that looks smaller than it should when shared.

The second is a mismatch between card type and image shape: summary_large_image declared, but the actual image file is square or portrait. The tag is correct, the image exists, and it still looks wrong, because X is cropping a shape that was never built for a 2:1 frame. Worth a mention while we're on the subject of images that don't show up at all: X's crawler drops any twitter:image or og:image served over plain http:// instead of https://, since it won't fetch insecure mixed-content image URLs. That one catches people who moved their site to HTTPS but left an old image URL untouched somewhere in a template.

The fastest way to catch either problem is to actually see what X would build before you post the link. Running your page through our free social preview checker draws the card the way X would render it, flags a missing twitter:card tag by name, and warns you specifically when a large-image card is paired with an image too narrow for its own layout. If you're building the tags from scratch rather than fixing an existing page, the tag generator writes valid twitter:card markup for you and shows the live preview as you type.

The rule, in one sentence: pick summary_large_image for anything image-led, size that image close to 1200x630, and always add the twitter:card tag explicitly, because nothing else will add it for you.

Frequently Asked Questions

What are the Twitter card types?

There are four: summary, summary_large_image, app, and player. Most site owners will only ever use summary or summary_large_image, since app and player both require separate approval from X and are built for specific use cases like app install links or embedded media, not general web pages.

What is the difference between summary and summary_large_image?

summary displays a small, roughly square thumbnail beside your title and description, while summary_large_image displays a wide banner-style image (around a 2:1 ratio) stretched above the title and description. The tag value is the only thing that changes between the two; everything else in your markup can stay the same.

Do I need twitter:card if I have og tags?

Yes. X will pull your title, description, and image from Open Graph tags automatically if the matching twitter tags are missing, but there's no Open Graph equivalent for the card type itself. Without an explicit twitter:card tag, X defaults to the small summary layout even if your og:image is a large, properly sized banner.

What image size does summary_large_image need?

Aim for 1200x630 pixels, or 1200x628 for a strict 2:1 ratio, which also works well as a shared Open Graph image. There's no single verified official minimum since X's own sizing documentation is no longer live, so treat anything below roughly 600x315 pixels as risky and stick with 1200x630 as your working standard.