Developer

Twitter / X Card Generator

All four card types (summary, summary_large_image, player, app), realistic X chrome preview with dark + light mode, image aspect validator (1:1 vs 1.91:1), char counters, image alt audit, templates, and Next.js Metadata output.

Templates

Card configuration

Pick a card type, then fill in the fields Twitter / X reads from your <head>.

Card type

summarySmall square image, title, and description.summary_large_imageHero 1.91:1 image — the most-shared layout.playerEmbedded video or audio player inline in the tweet.appDirect download CTA for iOS, iPadOS, and Android.

Common fields

twitter:site (@handle)

Publisher account; renders below the card byline.

twitter:creator (@handle)

Individual author — optional but improves attribution.

twitter:title

47/70

twitter:description

104/200

twitter:image URL

Paste an absolute image URL to enable size validation.

twitter:image:alt

60/420

Live preview

Pixel-leaning mock of the X card layout, with chrome and dark / light themes.

uxtools@uxtools·2h

Preview tweet text.

Twitter / X card preview, finally pixel-perfect

example.com

Twitter / X card preview, finally pixel-perfect

Tweak the title, image, and player metadata, then copy a head-ready snippet or Next.js Metadata literal.

Validator

Best-practice checks. Green means Twitter is unlikely to truncate or skip the tag.

Card type selected

twitter:card declares which card layout Twitter renders.

Title 1–70 chars

47/70

Description ≤ 200 chars

104/200

twitter:site provided

Attributes the card to a publisher account, e.g. @uxtools.

Image URL provided

twitter:image is required for summary, summary_large_image, and player cards.

Image alt text provided

Improves accessibility; max 420 characters.

Generated markup

Copy into your <head>, or switch to the Next.js Metadata literal.

<!-- Twitter / X Card -->
<head>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@uxtools">
    <meta name="twitter:creator" content="@uxtools">
    <meta name="twitter:title" content="Twitter / X card preview, finally pixel-perfect">
    <meta name="twitter:description" content="Tweak the title, image, and player metadata, then copy a head-ready snippet or Next.js Metadata literal.">
    <meta name="twitter:image:alt" content="Wide social card with a glowing UI mockup on a dark surface.">
</head>