Recommended Free Tools
Use a wide image about 1,200 pixels across. The most practical canvases for an X (formerly Twitter) link preview are 1200×628 or 1200×630 pixels. Some current guides recommend 1200×600, so treat these as reliable working dimensions rather than a single confirmed, official X specification. The resulting aspect ratio is roughly 1.91:1 to 2:1.
For the large-image format, set twitter:card to summary_large_image. Use the smaller summary card when a thumbnail beside the text is preferable. X’s current first-party sizing rules, file limits and validator behavior should be checked before you publish a strict compliance requirement; the dimensions below are practical guidance from independent publishing tools.
Which Twitter Card image size should you use?
For most pages, create one landscape asset at 1200×630 pixels. It is close to the 1200×628 recommendation found in several guides, works well as a shared Open Graph image, and leaves enough width for readable branding. A 1200×600 canvas is also used by publishing tools. The small differences are unlikely to justify maintaining separate artwork unless your design system requires it.
| Canvas | How to use it | Qualification |
|---|---|---|
| 1200×630 | Default general-purpose choice | Independent guide recommendation; not confirmed here as a current official X rule |
| 1200×628 | Alternative wide social-preview canvas | Independent guide recommendation |
| 1200×600 | Another practical 2:1 option | Recommended by an OG Preview guide updated in December 2025 |
| 300×157 | Listed as a minimum by one guide | Do not treat as an official current minimum without verifying X documentation |
Design with the most important text and subject near the center. Cropping and responsive presentation can vary, so avoid placing a headline against the extreme edges. Export a crisp image and host it at a stable, publicly reachable URL.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
Large image versus small summary cards
summary_large_image
Independent guides describe this card as displaying a large image above the page title and description. Choose it when the artwork explains the story, product, tutorial or announcement and deserves most of the preview area.
summary
The summary card uses a smaller thumbnail alongside the title and description. It can be appropriate for text-led pages, compact listings or sites whose images do not add useful context. The choice is a presentation decision, not a different image-size law.
One asset for several networks
A 1200×630 Open Graph image is usually close enough to reuse for X and other social previews. Keeping one master file simplifies content management, but check each network’s current crop and safe areas before placing critical text.
Metadata required on your page
Put card metadata in the document’s <head>. Replace the example values for every page, and use an absolute HTTPS URL for the image.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your page title">
<meta name="twitter:description" content="A concise description of the page.">
<meta name="twitter:image" content="https://example.com/images/article-card-1200x630.jpg">
<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A concise description of the page.">
<meta property="og:image" content="https://example.com/images/article-card-1200x630.jpg">The reviewed tool guidance specifically uses twitter:card with summary_large_image and a hosted image URL. It also treats an existing 1200×630 Open Graph image as a practical reuse candidate. Those are implementation recommendations, not a statement of an independently verified current X specification.
Template and CMS checks
- Confirm that the tags are rendered in the initial HTML, not inserted only after client-side JavaScript runs.
- Make the image URL canonical and publicly accessible; do not require a login, cookie or browser interaction.
- Generate unique title, description and image values when pages represent different content.
- Check that your CMS has not emitted a second, conflicting
twitter:cardortwitter:imagetag.
How to design a reliable preview image
Set the canvas and safe area
Start at 1200×630 (or 1200×628). Keep logos, faces and essential words inside a generous central margin. Use strong contrast between type and background, and test the design at thumbnail size so the subject remains recognizable.
Use the right image for the page
Match the image to the page’s promise rather than repeating a generic site banner. A product screen, chart or clear editorial illustration communicates more than a decorative texture. Do not put information in the image that is absent from the page title or content.
Choose an export deliberately
PNG is useful for sharp text and transparency; JPEG is often smaller for photographic artwork; WebP can reduce transfer size where your delivery stack supports it. The guides reviewed here list differing format and file-size limits, and a current official X limit was not verified, so check X’s documentation for any hard limit that matters to your pipeline.
Why a preview is missing or wrong
When a link displays no image, an old image or the wrong card layout, work through these checks in order:
- Inspect the final HTML. View source or fetch the published URL and verify one correct
twitter:cardandtwitter:imagevalue. - Open the image URL directly. It should return the intended image without authentication, a redirect loop or an HTML error page.
- Check deployment and cache layers. Confirm that your CDN, robots policy, firewall and authentication settings allow the social crawler to request both the page and image. Exact crawler requirements and cache duration were not established by the reviewed guides, so consult current X documentation for policy decisions.
- Confirm dimensions and orientation. A portrait asset, a tiny image or an accidentally uploaded thumbnail can produce an unusable result. Re-export at approximately 1200 pixels wide.
- Remove conflicting tags. SEO plugins, themes and hand-written templates can emit different values. Keep one authoritative set.
- Allow for stale previews. Social services may retain an earlier fetch. After correcting metadata, test again using X’s current preview or sharing workflow if available to your account; do not assume an undocumented refresh interval.
Automate image capture for a preview workflow
If the card artwork is a live page or dashboard, automate a screenshot at the same wide viewport as your design. Capture the full page or a selected element, then place the resulting asset at the URL referenced by twitter:image. Before relying on any renderer, verify that it can load your fonts, lazy images and authenticated content under your deployment conditions.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP or PDF. It can accept cookie banners before capture and remove more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP tools—take_screenshot, get_page_info and capture_pdf—work with Claude, Cursor and other MCP clients.
Use the API documentation at https://screenshotneo.com/docs/ for authentication and options. A minimal cURL request is:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);For a card asset, its options include a custom viewport, retina scale, full-page capture with lazy images loaded, CSS-selector element capture, custom CSS or JavaScript, waits for a selector, delay or network idle, hidden selectors, dark mode, headers, cookies, user agent, authorization, timezone and geolocation, transparent backgrounds, resizing and a chosen cache TTL. Signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call and a usage API help when you run this as a publishing pipeline.
The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; all features are available on every plan, and yearly billing provides two months free. Create a free ScreenshotNeo account to try it without a card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability and cost decisions
Keep the asset stable
Use a versioned filename when artwork changes, such as article-card-v2.webp, and update the metadata URL together with the file. This avoids ambiguity in your own CDN and makes rollback straightforward.
Capture only what the card needs
An element screenshot is faster and less fragile than rendering an entire long page when the card comes from a known component. Use full-page capture when the composition depends on page-wide layout or lazy-loaded content.
Control dynamic content
Wait for a selector or network idle before capturing charts, fonts and images. Hide cookie notices and chat controls in the capture itself; otherwise they can become part of the permanent preview image.
Budget for retries
Record the HTTP status, response headers and generated filename. Retry transient load failures, but do not loop indefinitely on bot checks or permanently private pages. ScreenshotNeo’s verdict and billing headers let a pipeline distinguish a clean billed shot from an unsuccessful or cache response.
Best Value
What is and is not established about X image limits
Independent guides provide useful working dimensions, but they disagree on the exact canvas and list differing minimum dimensions, formats and file-size limits. The material reviewed here did not verify a current first-party X requirement, cache duration or official validator. Therefore, publish 1200×628 or 1200×630 as a practical standard, retain flexibility for 1200×600 designs, and verify any hard compliance rule against X’s own documentation immediately before enforcing it.
Frequently Asked Questions
Should I use 1200×628 or 1200×630?
Either is a sound wide canvas. Choose one for your design system and keep the same ratio across templates; the evidence does not establish a meaningful platform advantage for the two-pixel difference.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesCan the same image serve Open Graph and X?
Usually, yes. A 1200×630 Open Graph image is described by independent tooling guidance as close enough for many sites, provided the composition survives each network’s crop.
Is there a guaranteed engagement increase from the recommended size?
No attributable engagement statistic was established for these dimensions, so treat the recommendation as a rendering and workflow choice rather than a performance guarantee.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
