What size should a Twitter card image be?

Use 1200 by 628 pixels at a 1.91 to 1 aspect ratio for a Summary Card with Large Image, the card type that renders a full-width image above your link. X accepts images up to 4096 by 4096 pixels and under 5MB, in JPG, PNG, or WebP. The common 1200 by 630 Open Graph size works identically, so one image covers X, Facebook, LinkedIn, Discord, and Slack at once. The small Summary Card uses a square image of at least 144 by 144 pixels instead.

What is a Twitter card image?

A Twitter (X) card is the rich preview that unfurls when you post a link, showing a title, a description, and an image instead of a bare URL. The image comes from a twitter:image or og:image meta tag in the page's HTML head. When you set twitter:card to summary_large_image, X renders that image as a large 1.91 to 1 banner above the link text.

How do I create a Twitter card?

Add meta tags to the head of the page you are linking: twitter:card set to summary_large_image, twitter:title, twitter:description, and twitter:image (an absolute https URL). X falls back to the Open Graph equivalents (og:title, og:description, og:image) for any twitter: tag you omit, so in practice setting the four og: tags plus twitter:card is enough. Post the link in a tweet to see the card render.

Why is my Twitter card image not showing?

Common causes: the page has no twitter:image or og:image tag, the image URL is relative or behind auth and X cannot fetch it, the tags are injected by JavaScript (X reads the raw HTML and does not run JS), the image is below the minimum size, or X cached an earlier version of the page before the tags existed. Confirm the tags are in the served HTML, make the image an absolute public URL at 1200 by 628, then re-post the link or append a query string such as ?v=2 to bust the cache.

Does X still have a Card Validator?

No. X retired the standalone Card Validator tool. To check a card now, post the URL in a draft tweet (or a test account) and look at the preview the composer renders, or inspect the page's twitter: and og: meta tags directly with view-source or curl. Third-party Open Graph debuggers also show how the card will appear, since X reads the same tags.

Back to blog

OG images

Twitter Card Image Size: The Right Dimensions for X Link Previews

June 25, 2026 · 7 min read · Grabbit Team

When you paste a link into a tweet, X should unfurl it into a card with a title, a description, and an image. The single setting that decides whether that image shows up large or as a cramped thumbnail is the Twitter card image size. Get the dimensions right and one image gives you a full-width preview on X and every other platform. Get them wrong and the card collapses to a small square or shows no image at all.

The short answer

For a large, full-width card on X, use 1200 by 628 pixels at a 1.91 to 1 aspect ratio. That is the size for a Summary Card with Large Image, the card type you almost always want.

A few details that matter:

Aspect ratio is what X actually enforces. The card is 1.91 to 1. 1200 by 628 hits it; the near-identical 1200 by 630 Open Graph size renders the same way, so you do not need a separate image for X.
Maximum 4096 by 4096 pixels, under 5MB. Above that, X will not render the image. Stay well under.
Formats: JPG, PNG, or WebP. (Animated GIFs are not supported on cards.)
The small Summary Card is different. If you use summary instead of summary_large_image, the image is a square thumbnail beside the text, minimum 144 by 144 pixels. This guide focuses on the large card.

Because 1200 by 628 is effectively the same 1.91 to 1 frame Facebook, LinkedIn, Discord, and Slack use, a single correctly sized image covers all of them.

How X builds a link card

X does not screenshot your page or guess at its content. When a URL is posted, X fetches the raw HTML and reads two families of meta tags from the <head>: the twitter: tags and, as a fallback, the Open Graph og: tags.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A one-line summary of the page." />
<meta name="twitter:image" content="https://yourdomain.com/og.png" />

<!-- Open Graph fallbacks X also reads -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A one-line summary of the page." />
<meta property="og:image" content="https://yourdomain.com/og.png" />

The one tag with no Open Graph equivalent is twitter:card. It tells X which layout to use; summary_large_image is what gives you the 1.91 to 1 banner. For everything else, X falls back to the og: tag when the matching twitter: tag is missing. So in practice you can set twitter:card plus the four og: tags and skip the redundant twitter:title, twitter:description, and twitter:image. That is why the same image and tags that fix a LinkedIn link preview or a Discord link preview also fix the X card.

Two things trip people up:

X reads the raw HTML, not the rendered page. It does not run your JavaScript. If your meta tags are set client-side (a single-page app that injects them after load), X never sees them. The tags must be in the HTML the server sends.
twitter:image / og:image must be an absolute, public URL. A relative path like /og.png will not resolve, and an image behind a login or a redirect X cannot follow renders as no image. Use the full https://yourdomain.com/og.png and confirm it loads in a private browser window.

Making the card image a real render of your page

The hardest part of a good card is not the four meta tags. It is producing an image at exactly 1200 by 628 that actually reflects the page, instead of a generic logo. For a marketing page, a docs page, or a launch announcement, the most compelling preview is often a clean shot of the page itself.

You can produce that with a screenshot API: point it at the URL, get back a hosted image at the size you ask for, and use that image as your og:image / twitter:image.

curl https://api.grabbit.live/v1/grabs \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://yourdomain.com/og",
    "width": 1200,
    "height": 628,
    "format": "png",
    "delay_ms": 500
  }'

The response includes a hosted image_url:

{
  "id": "grb_01jx...",
  "status": "done",
  "image_url": "https://cdn.grabbit.live/grabs/grb_01jx....png",
  "width": 1200,
  "height": 628,
  "format": "png",
  "bytes": 68820,
  "execution_ms": 1180
}

width accepts 320 to 1920 and height 240 to 1080, so the 1200 by 628 card is in range. delay_ms (0 to 10000) gives client-rendered content or web fonts a moment to settle before the capture fires. Drop the returned image_url into your tags:

<meta name="twitter:image" content="https://cdn.grabbit.live/grabs/grb_01jx....png" />
<meta property="og:image" content="https://cdn.grabbit.live/grabs/grb_01jx....png" />

Capture once per unique page and cache the image_url alongside the page record rather than rendering on every request. A common pattern is to build a dedicated /og route with your normal components, capture that at 1200 by 628, and reuse the result everywhere. The same template-and-cache approach is covered in how to generate dynamic OG images from any URL.

How to validate the card

X retired its standalone Card Validator, so the old "paste a URL into the validator" workflow no longer exists. Today there are three reliable ways to check a card before it goes out:

Draft the tweet. Paste the URL into the X composer (or a test account) and look at the preview it renders. This is the ground truth, since it is X reading your live tags.
Inspect the tags directly. Run view-source on the live URL or curl it and confirm the twitter:card and og:image tags are present in the served HTML, before any JavaScript runs.
Use a third-party Open Graph debugger. Because X reads the same og: tags, a general Open Graph preview tool shows you how the card will look. Our OG image checker walks through previewing the image before you publish.

If the card looks wrong even though the tags are correct, the cause is almost always caching: X stored the metadata from the first time the URL was shared. Append a unique query string such as ?v=2 to the URL when you re-post, and X treats it as a new link with no cache entry.

Why your card still is not showing

If the tags are present, the image URL works in a browser, and you have re-posted with a cache-busting query string but the card still looks wrong, work through these:

The image is behind auth or a redirect. If twitter:image requires a login, sits behind a paywall, or redirects in a way X will not follow, the card renders without an image. Test the raw image URL in a private window.
Tags are set by JavaScript. X reads static HTML and does not execute scripts. Server-render the meta tags.
The image is the wrong shape or too small. Below the 1.91 to 1 ratio, X may show a small square thumbnail instead of a full-width banner, or fall back to the small card. Use 1200 by 628.
twitter:card is missing. Without summary_large_image, X defaults to the small summary card, so even a correctly sized image appears as a thumbnail. Set the card type explicitly.

Work top to bottom: confirm twitter:card is summary_large_image first, then verify the image is public and absolute, then bust the cache by re-posting with a fresh query string.

The short version

A Twitter (X) card is just your page's twitter: and Open Graph tags, rendered as a preview. Set twitter:card to summary_large_image, point og:image / twitter:image at an absolute, public 1200 by 628 image, and X gives you a full-width card that also covers Facebook, LinkedIn, Discord, and Slack. The validator is gone, so check the card by drafting a tweet or inspecting the served tags. If you want the image to be a real render of the page instead of a static logo, a screenshot API turns the live URL into the hosted image you point the tags at. If you are new to the format, start with what is an OG image.

FAQ

What size should a Twitter card image be?: Use 1200 by 628 pixels at a 1.91 to 1 aspect ratio for a Summary Card with Large Image, the card type that renders a full-width image above your link. X accepts images up to 4096 by 4096 pixels and under 5MB, in JPG, PNG, or WebP. The common 1200 by 630 Open Graph size works identically, so one image covers X, Facebook, LinkedIn, Discord, and Slack at once. The small Summary Card uses a square image of at least 144 by 144 pixels instead.
What is a Twitter card image?: A Twitter (X) card is the rich preview that unfurls when you post a link, showing a title, a description, and an image instead of a bare URL. The image comes from a twitter:image or og:image meta tag in the page's HTML head. When you set twitter:card to summary_large_image, X renders that image as a large 1.91 to 1 banner above the link text.
How do I create a Twitter card?: Add meta tags to the head of the page you are linking: twitter:card set to summary_large_image, twitter:title, twitter:description, and twitter:image (an absolute https URL). X falls back to the Open Graph equivalents (og:title, og:description, og:image) for any twitter: tag you omit, so in practice setting the four og: tags plus twitter:card is enough. Post the link in a tweet to see the card render.
Why is my Twitter card image not showing?: Common causes: the page has no twitter:image or og:image tag, the image URL is relative or behind auth and X cannot fetch it, the tags are injected by JavaScript (X reads the raw HTML and does not run JS), the image is below the minimum size, or X cached an earlier version of the page before the tags existed. Confirm the tags are in the served HTML, make the image an absolute public URL at 1200 by 628, then re-post the link or append a query string such as ?v=2 to bust the cache.
Does X still have a Card Validator?: No. X retired the standalone Card Validator tool. To check a card now, post the URL in a draft tweet (or a test account) and look at the preview the composer renders, or inspect the page's twitter: and og: meta tags directly with view-source or curl. Third-party Open Graph debuggers also show how the card will appear, since X reads the same tags.

Capture any website with one API call

Get a free test key and capture your first screenshot in two minutes.

Get your free test key Learn more

Written by

Grabbit Team

Screenshots as a service

The team behind Grabbit, the screenshot API for developers and AI agents. We write about web capture, rendering, and automating screenshots at scale.

Keep reading

OG images

How to Fix LinkedIn Link Previews (Open Graph for LinkedIn)

Why your LinkedIn link shows up bare or with the wrong image, and how to fix it: add the right Open Graph tags, point og:image at a real 1200x627 render, and force LinkedIn to re-scrape with Post Inspector.

Jun 24, 2026 · 7 min read

OG images

Discord Link Previews: How to Make Your Links Unfurl

Why your links show up bare in Discord and how to fix it: add the right Open Graph tags, point og:image at a real 1200x630 render, and force Discord to re-fetch the metadata.

Jun 21, 2026 · 6 min read

OG imagesWhat Is an OG Image? Why Your Shared Links Look Broken

OG images

What Is an OG Image? Why Your Shared Links Look Broken

An OG image is the preview image that appears when a link is shared on social media. Learn what it is, why it breaks, and how to automate one per page.

Jun 13, 2026 · 5 min read