What is the difference between summary and summary_large_image?

The summary card shows a small square thumbnail beside the text. summary_large_image shows a full-width image above the text, ideal for visual content. Use a roughly 1200 by 628 image for the large card.

Do I still need Open Graph tags?

X reads Twitter card tags first but falls back to Open Graph tags when they are missing. Adding both gives the most reliable preview across all platforms.

Is my data sent anywhere?

No. The card preview and tag generation happen entirely in your browser. Nothing you type is uploaded.

What image size should I use for a large image card?

A roughly 1200 by 628 pixel image at a 1.91:1 ratio works well for summary_large_image. Smaller images may be cropped or shown as a summary card instead.

How long should the title and description be?

Keep the title under about 70 characters and the description under about 200, since X truncates longer text in the feed. The preview reflects how it will appear.

Which meta tags does it generate?

It outputs twitter:card, twitter:title, twitter:description, twitter:url and twitter:image tags, ready to paste into the head of your page.

Will the live card match this preview exactly?

It is a close approximation of X's layout. The actual render can vary slightly by client and over time, and X re-crawls your page, so confirm with X's own validator before launch.

What is the Twitter Card Preview?

Free Twitter card preview tool. See how your link will look as a summary or large-image card on X (Twitter), and copy ready-made twitter meta tags. Runs entirely in your browser — nothing is uploaded. It runs free in your browser on Gera Tools, with nothing uploaded.

Twitter Card Preview

Name: Twitter Card Preview
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Twitter (X) card preview

This tool shows how a link will appear when posted on X (formerly Twitter) and generates the matching twitter: meta tags to paste into your page. It is for developers, marketers, and content creators making sure shared links look right before they go live.

The two card types

X supports two standard card types for external links:

summary — Shows a small square thumbnail to the left of the post text, with the page title, a truncated description, and the domain below. This is the default fallback if no card type is specified.

summary_large_image — Shows a full-width image above the post text. The image takes up significantly more vertical space in the timeline, which increases visual impact and tends to drive more clicks for image-forward content. Use a 1200×628 pixel image (1.91:1 ratio) for the cleanest rendering.

How it works

You pick a card type and fill in the title, description, URL, and image. The tool renders a close approximation of X’s layout for the chosen card and derives the display domain from your URL (stripping www.). It then assembles the standard tags to paste into your page’s head:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:url" content="…" />
<meta name="twitter:image" content="…" />

Keep the title under around 70 characters and the description under 200, as X truncates longer text in the feed.

Fallback and Open Graph

X reads twitter: tags first. If they are absent, it falls back to your Open Graph tags (og:title, og:description, og:image). For broad compatibility across platforms — Slack, LinkedIn, Facebook, iMessage link previews — add both sets of tags. Many developers use a single canonical set:

<meta property="og:title" content="…" />
<meta name="twitter:title" content="…" />

Worked example

Suppose you are launching a buying guide at yoursite.com/running-shoes. Set twitter:card to summary_large_image, title to “Best Running Shoes 2026 — Buyer’s Guide”, description to a 180-character summary sentence, and image to a 1200×628 JPG showing the top pick. The preview renders the image at full width with the title and description below it, and displays yoursite.com as the source domain. Copy the five generated tags and drop them into the head element of your page.

X re-crawls a page each time a new tweet with that URL is posted, so if you change the tags you will see the updated card on new shares. Everything runs locally in your browser — nothing is uploaded.

Common issues and how to fix them

Card shows no image: The most frequent cause is that the twitter:image URL returns a redirect rather than the image directly. X’s crawler does not follow redirects for card images. Ensure the URL resolves to the image file itself and returns a 200 status.

Image too small for summary_large_image: X requires the image to be at least 300×157 pixels for the large card; anything smaller silently falls back to the summary card. Use 1200×628 to be safely above the minimum and look sharp on all screen densities.

Title and description not updating: X caches card data per URL. After changing your meta tags, post the URL fresh (or use the X Card Validator in the developer portal, which forces a re-fetch). Changing only a query parameter (for example adding ?v=2) also triggers a re-crawl.

Card works on mobile but not desktop or vice versa: X’s card rendering can differ slightly between clients. This preview tool approximates the web layout; always test by posting the actual URL before a major campaign.

When to use `summary` vs `summary_large_image`

Choose summary_large_image when the image is the most compelling part of your content — a product photo, a chart, an infographic, a compelling scene. The larger real estate in the feed increases visibility significantly.

Choose summary when you want the title and text to lead, or when you do not have a suitably wide image. A text-heavy article, a podcast episode page, or a tool page without a good hero image often performs fine with the compact summary card.