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.

Twitter Card Preview

Q: 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.

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.

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:

<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="…" />

The two card types differ in layout: summary shows a small square thumbnail beside the text, while summary_large_image shows a full-width image above the text. Keep the title under ~70 characters and the description under ~200, as X truncates longer text.

Example

A summary_large_image card with the title “Beginner Running Shoes — 2026 Buyer’s Guide” and a 1200×628 image renders as a wide banner with the headline and description below and the domain (for example example.com) shown. The generated tags drop straight into your <head>.

X falls back to your Open Graph tags if the Twitter tags are missing. Everything runs locally in your browser.