What is the minimum for a Twitter card image?

The summary card needs at least 144 by 144 pixels. The large image card needs at least 300 by 157 pixels. Either way stay under 5 MB and use JPG, PNG, WEBP or GIF.

Do I need twitter:image if I already have og:image?

No. X falls back to og:image, og:title and og:description when the twitter equivalents are missing. Adding twitter:card alone is usually enough to get the wide layout.

What should twitter:card be set to?

summary_large_image for a full-width image card, or summary for a small thumbnail beside the text. If the tag is missing, X defaults to summary.

Should the card tags use name or property?

Twitter card tags use the name attribute, while Open Graph tags use property. Some parsers tolerate the mix, but swapping them is the most common copy-paste error and a strict validator will flag it.

Why does my card show no image?

Usually a relative image URL, a file over 5 MB, an unsupported format, or a page a crawler cannot reach. Use an absolute HTTPS URL and confirm the crawler gets a 200.

How to set up X (Twitter) cards correctly

An X card is a handful of twitter:* tags, most of which you do not have to write. X reads them first and falls back to Open Graph when they are missing, so a site with good OG tags is often one tag away from a proper card.

The one tag that decides the layout

twitter:card selects the layout. Everything else is content.

Value	Layout	Notes
`summary`	A small square thumbnail beside title and description	The default when the tag is missing
`summary_large_image`	A full-width image above the text	What most sites want
`app`	A mobile app deep-link card	Requires app store identifiers
`player`	An inline audio or video player	Requires an HTTPS iframe and streaming or MP4 media

For a normal content site the answer is summary_large_image. The app and player cards are for specific products and add requirements you do not want otherwise.

How the og fallback works

X fills each missing Twitter tag from its Open Graph equivalent:

Twitter tag	Falls back to	Notes
`twitter:title`	`og:title`
`twitter:description`	`og:description`
`twitter:image`	`og:image`	If `twitter:image` exists but is broken, there is no fallback
`twitter:card`	nothing	Defaults to `summary`

The practical consequence: if your Open Graph tags are already correct, you often only need to add twitter:card.

A working block

<!-- 布局：决定大图还是小图，必填 -->
<meta name="twitter:card" content="summary_large_image">

<!-- 内容：缺省时回退到同名的 og 标签 -->
<meta name="twitter:title" content="How to set up X cards">
<meta name="twitter:description" content="The card types, the fallback rules and the image limits.">
<meta name="twitter:image" content="https://example.com/og/twitter-cards.png">
<meta name="twitter:image:alt" content="A share card about Twitter cards">

<!-- 归属：可选，用于展示账号 -->
<meta name="twitter:site" content="@yourtool">

name or property?

Open Graph tags use the property attribute. Twitter card tags use name. The two conventions look interchangeable and are not:

<!-- 正确 -->
<meta name="twitter:card" content="summary_large_image">

<!-- 常见错误：Twitter 标签写了 property -->
<meta property="twitter:card" content="summary_large_image">

Some parsers read both, which is exactly why the mistake survives — it works until it does not. Use name for every twitter:* tag and property for every og:* tag, and a strict validator will have nothing to complain about.

Image requirements for the large card

Minimum 300×157 pixels for summary_large_image; 144×144 for summary.
Maximum 4096×4096 pixels.
Under 5 MB.
JPG, PNG, WEBP or GIF. Only the first frame of an animated GIF is used.

Ship at 1200×630 so the same file also satisfies Facebook, LinkedIn and Slack. X crops a large card toward a wide ratio, so keep the headline and logo near the centre — the details are in OG image sizes for every platform.

Verify after launch

Fetch the page the way the crawler does:

curl -sL --compressed -A "Twitterbot/1.0" https://example.com/page \
  | grep -iE 'twitter:|og:'

If the tags are in that output, the crawler can see them. Then render the card: X’s own card preview tool is intermittent and sometimes needs a login, so the meta preview debugger is the quicker first check. Remember that X may keep showing a cached card until it re-fetches the page.

Common mistakes

Writing property on the Twitter tags. The single most common error. Use name.

Forgetting twitter:card entirely. Without it X defaults to the small summary layout, so a wide, well-designed image becomes a thumbnail.

Setting twitter:image to a broken URL. Unlike a missing tag, a broken one is not replaced by og:image. Fix it or delete it.

Declaring a size the file does not have. twitter:image:width and height are optional, but if present they must match the file or the crop is wrong.

Using a relative image URL. As with Open Graph, the image URL must be absolute and HTTPS.

Testing only in a signed-in browser. The crawler does not have your session. Check the tags in the crawler response, not in the page you see.

Assuming one platform covers them all. X, Facebook and LinkedIn each cache and re-scrape separately.

Where this tool fits

The meta preview debugger fetches a URL once and shows the card X would render, next to every missing or malformed tag — including a twitter:* tag written with property. Use it to confirm the setup, then re-scrape in X’s own tool if you need a forced refresh.