Twitter Card Image Size: Recommended Dimensions for Link Previews

Use a wide landscape image about 1200 pixels wide for a large X (formerly Twitter) link preview. Practical guides commonly recommend 1200×628 or 1200×630 pixels; another recommends 1200×600. These recommendations cluster around an aspect ratio of about 1.91:1 to 2:1, but they are secondary guidance rather than a verified current official X requirement.

For most sites, create one 1200×630 Open Graph image and reuse it for the large X card. Set twitter:card to summary_large_image, provide a publicly hosted image URL, and verify that the page metadata points to the intended asset.

Recommended Twitter Card image dimensions

Use case	Practical canvas	Card setting	What readers see
Large link preview	1200×628 or 1200×630	`summary_large_image`	Large image above the title and description
Alternative wide canvas	1200×600	`summary_large_image`	Wide image with a slightly shorter height
Small summary card	Use a suitable thumbnail asset	`summary`	Small thumbnail beside the title and description

The reviewed guides disagree on the exact canvas and on technical limits such as minimum dimensions, file size, and formats. Treat 1200×628, 1200×630, and 1200×600 as practical design choices, not settled platform rules. Check current first-party X documentation before publishing a requirement as official.

Which card type should you choose?

`summary_large_image`

Choose this when the image communicates the article’s subject, product, report, or announcement. The reviewed guidance describes a large image above the title and description. It gives the visual asset the most space in the preview.

`summary`

Choose this when the image is secondary or when a compact preview fits your distribution channel better. The reviewed guidance describes a smaller thumbnail beside the text.

If your site already has a 1200×630 Open Graph image, reusing it for the large X card is generally a practical workflow. This cross-platform advice comes from secondary tool guidance, so confirm the current X behavior for your publishing setup.

Metadata implementation

Place card metadata in the <head> of every page you want to share. Replace the example values with your canonical URL, title, description, and an absolute HTTPS image URL.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Card Image Size Guide">
<meta name="twitter:description" content="Recommended dimensions and setup for large X link previews.">
<meta name="twitter:image" content="https://example.com/images/article-card-1200x630.jpg">
<meta property="og:type" content="article">
<meta property="og:title" content="Twitter Card Image Size Guide">
<meta property="og:description" content="Recommended dimensions and setup for large X link previews.">
<meta property="og:image" content="https://example.com/images/article-card-1200x630.jpg">
<meta property="og:url" content="https://example.com/articles/twitter-card-image-size">

Use the same title and description values for Open Graph and X unless you have a reason to tailor them. Keep the image URL absolute and stable. The image must be reachable by the crawler without a login, session cookie, or client-side interaction.

Designing a 1200×628 or 1200×630 image

Start with the canvas. Create a 1200×630 document, or 1200×628 if that matches your existing template.
Protect the edges. Keep important faces, logos, and headings away from the extreme top, bottom, and sides because previews can crop or scale differently.
Use strong contrast. The image may appear on light or dark interfaces and at small sizes.
Keep text brief. A short headline can survive thumbnail scaling better than a paragraph.
Export a web-ready file. Use the format and compression settings supported by your image pipeline, then verify the hosted file directly.
Reuse the asset where sensible. A 1200×630 Open Graph image is close enough for many sites to use as the large X image, according to the reviewed tool guidance.

How to capture a card image from a webpage

If the image is generated from a live page, you can capture it yourself with a headless browser. The basic process is: load the URL, wait for the page to settle, set a 1200×630 viewport or output canvas, capture the relevant element or full page, and host the resulting file at a stable HTTPS URL.

DIY browser checklist

Wait for fonts and hero images before capture.
Disable animations or capture after a deterministic delay.
Use a fixed viewport so every build has the same composition.
Hide cookie banners, chat widgets, and newsletter popups before the shot.
Check the output at both full size and a small thumbnail size.
Publish the image at a cacheable, publicly reachable URL.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF, and its capture options include full-page shots, element selection, custom CSS and JavaScript, waits, device presets, retina scale, and image resizing.

For a card image, request the page and save the returned WebP, then use that URL in twitter:image after hosting it where X can fetch it. See the ScreenshotNeo documentation for parameter details.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const buffer = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', buffer);

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and each response reports the result with X-Page-Verdict and X-Billed headers. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI clients such as Claude and Cursor. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Troubleshooting missing or incorrect previews

The preview uses the wrong image

Inspect the rendered HTML, not only your template source. Confirm there is one intended twitter:image, that the URL is absolute, and that your Open Graph image is not overriding your framework’s metadata later in the document. Remove stale, duplicate tags and publish the corrected page.

The image is cropped unexpectedly

Keep the main subject near the center of the 1200×628 or 1200×630 canvas and test the image as a small thumbnail. If the crop remains unsuitable, create a safer composition with more edge padding.

No image appears

Open the image URL in a private browser window and check that it returns the image without authentication, redirects that require a session, or a blocked protocol. Confirm the page itself is publicly reachable and that the metadata is present in the server-rendered HTML.

The old image keeps showing

Social crawlers and intermediate caches can retain an earlier response. Make sure the new asset is available at the URL in the page source, then allow time for the platform to fetch it again. Avoid changing the image URL on every request; stable URLs make publishing systems easier to operate.

The card is small

Check that twitter:card is exactly summary_large_image. A value of summary requests the smaller layout.

Performance, reliability, and cost notes

Keep files reasonably compressed. A smaller image downloads faster, especially for mobile readers, while preserving enough quality for text and faces.
Use a CDN or image host. A stable HTTPS endpoint reduces latency and makes repeated crawler requests more predictable.
Generate once, reuse many times. Cache a deterministic card image instead of rendering it for every page view.
Make rendering deterministic. Fixed viewport, fonts, waits, and disabled animation reduce visual differences between builds.
Measure failures from your capture system. If you use ScreenshotNeo, inspect X-Page-Verdict and X-Billed so failed loads and cache hits are distinguishable from successful captures.
Budget by clean outputs. ScreenshotNeo bills only clean shots; bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing.

FAQ

Is 1200×630 an official X requirement?

The reviewed material does not verify a current first-party X requirement. Use it as a practical convention and check current official documentation when compliance matters.

Can I use 1200×628 instead?

Yes. Multiple reviewed guides recommend 1200×628 or 1200×630, and both are wide landscape canvases suitable for large previews.

Can the same image serve Open Graph and X?

Usually. Secondary tool guidance describes a 1200×630 Open Graph image as close enough for many sites to reuse, but verify the result on your own pages.

Do I need a separate image for `summary`?

Not necessarily, but a dedicated thumbnail can give you better control over the compact layout.

Will a larger image guarantee more engagement?

No sourced statistic in the reviewed material establishes an engagement lift for any particular image size.