Twitter Card Generator

🐦 What Twitter Cards actually are

When you paste a link into a post on X, the platform fetches the page and looks for a small set of meta tags. If it finds them, it renders a card — an image, a title, a description, and the site's domain. If it does not find them, you get a plain link with little or no preview.

Those meta tags are the Twitter Card spec. It predates X's rebrand, and it still uses the twitter: prefix in the HTML. When people talk about "Twitter Cards" in 2026, they mean the same thing as "X Cards". Both names refer to the same meta tags.

There are four card types, and picking the right one is most of the work. Everything else is just filling in fields.

📇 The four card types

summary_large_image — the default for most sites

A large image at the top, with the title and description beneath it. The image renders at roughly a 1.91 to 1 aspect ratio, the same ratio Facebook and LinkedIn use. This is what you want for blog posts, product pages, documentation and landing pages.

summary — the compact option

A small square thumbnail on the left, with the title and description on the right. Uses less vertical space in a timeline, so it is less visually dominant. Good for threaded links and reference material.

app — install banner (legacy)

Shows the app icon, name and an install bar. Only worth considering if the page promotes a mobile app, and only if you have the iOS App Store ID and/or the Google Play package name. X has largely stopped supporting this card, so test before relying on it.

player — embedded media (legacy)

Renders an iframe or HTML5 video player inside the card. Requires an HTTPS player URL and requires your domain to be approved by X. Without that approval, adding the tag will not embed your content.

✍️ How to use the generator

1. Pick a card type. Four tiles at the top of the Builder tab. Click one and the preview updates instantly.
2. Fill in the fields. Title, description, image URL and image dimensions. The character counters warn when you exceed what X will display.
3. Check the preview. The timeline preview shows how the card looks inline. Switch to the Preview tab for wider and narrower layouts.
4. Read the validation list. It flags missing tags, relative URLs, wrong image dimensions, and titles that will be cut off.
5. Copy or export. Grab the raw HTML tags, or switch to the Export tab for Next.js, Nuxt 3, WordPress or JSON.

Getting the fields right

The title should be between 40 and 70 characters. Longer ones may be truncated, and shorter ones look sparse. Write it as a headline, not a label.

The description should be 100 to 200 characters. Long enough to add context, short enough that it does not get cut off with an ellipsis.

The image should be an absolute HTTPS URL. For summary_large_image the standard is 1200 × 628 (minimum 300 × 157). For summary use a square image of at least 144 × 144. Files must be under 5 MB. PNG for screenshots and graphics, JPG for photographs.

🔍 Testing your card

After you deploy the tags, X may not show the new card immediately. Link previews are cached, and the cached version can be served for some time after you fix the page.

X's old standalone Card Validator preview is no longer a dependable way to test. The most reliable check today is to compose a post containing your live URL on X and look at the preview before sending it. If you see a stale card, the simplest workaround is to change the image filename or add a harmless query string to the URL, since a new URL is fetched fresh.

Common problems

• No card appears — the page may be missing twitter:card and Open Graph tags, or the crawler could not fetch it. Add the tags and check the URL loads in an incognito window.
• Image missing or too small — make sure it is at least 300 pixels wide for large cards (144 × 144 for summary). Regenerate it at 1200 × 628.
• Page returns an error — a 4xx or 5xx response, or a timeout, stops the crawler.
• Invalid image URL — the URL uses HTTP instead of HTTPS, or is a relative path. Use a full HTTPS URL.

🚩 Five mistakes that break X Cards

• Setting twitter:card and nothing else. The card type only controls the layout. Without twitter:title, twitter:description and twitter:image, X uses your Open Graph tags, so make sure those exist too.
• Using a relative image URL. /images/card.jpg does not work. The crawler needs a full HTTPS URL it can fetch from the public internet.
• Injecting tags with JavaScript. React, Vue and Angular apps that set twitter:card in a client-side effect will fail. X's crawler does not execute JavaScript. Render the tags server-side or in the initial HTML.
• Assuming the change is live immediately. Previews are cached. Change the image filename or test with a fresh URL to force a new fetch.
• Using the wrong handle fields. Use twitter:site for the brand and twitter:creator for the individual author, or omit the creator. Handles must start with @.

🔒 Your privacy and how we handle data

Nothing you type is sent anywhere. Every preview, character count and code snippet on this page is generated in your browser with JavaScript. There is no server-side component, no account and no logging. If you paste internal copy into the Builder, it stays on your own device.

What is stored on your device. Your fields are not saved, so refreshing the page resets them. The only thing stored locally is your cookie choice and, if you allow functional storage, your light or dark theme preference.

Cookies and advertising. Advertising and analytics cookies are switched off by default. They only turn on if you press Accept all, or select them individually under Manage preferences. You can change your choice at any time with the Cookie settings link in the footer. Full details are in our Cookie Policy and Privacy Policy.

About the author

❓ Frequently asked questions

Related tools