Twitter Card Previewer
See your title, description and image inside a dark-mode X card at 2:1 before you share the link.
Runs in your browser. Nothing you enter is uploaded.
What it does
When a link is posted on X, the post shows a card built from twitter: meta tags. This previewer draws the large image version of that card in X's dark theme: a 2:1 image, the bare domain, then the title and description limited to two lines each. Below it, the matching twitter:card, title, description, url, site and image tags are ready to copy.
It suits anyone who wants to see the card before publishing: a writer checking a headline, a social manager testing an image crop, a developer confirming tag output. The card type is fixed to summary_large_image here. For the compact summary card or the player type, the Twitter Card Generator offers those options, but it has no preview.
How to use it
- 1
Type the card headline in Title and the supporting line in Description.
- 2
Enter your account in Twitter @site (optional) and the page address in URL. The card shows the hostname without www.
- 3
Paste an absolute image link into Image URL (optional).
- 4
Review the Twitter card preview (summary large image) and edit until nothing important is clipped.
- 5
Click Copy meta tags and add the block to the page head.
What you get
A dark-theme summary_large_image card and four to six twitter: meta tags: twitter:card, twitter:title, twitter:description and twitter:url always, plus twitter:site and twitter:image when those fields are filled.
When to use it
- Checking a 2:1 image crop
- The image fills a 2:1 frame with center cropping, so a 1.91:1 Open Graph image or a square graphic shows exactly what gets trimmed.
- Headline review in dark mode
- Title and description render in X's grey-on-black colors and stop after two lines, which exposes an overlong headline immediately.
- Adding your @handle
- Filling Twitter @site adds a twitter:site tag, and clearing it removes that tag from the output instead of leaving an empty value.
- Cards for unpublished pages
- No request goes to the URL you enter, so you can preview a card for a draft or staging address.
Example
Input
Title: How We Cut Onboarding Time in Half Description: A 6-step checklist from our support team. Twitter @site: @brightdesk URL: https://www.brightdesk.io/blog/onboarding Image URL: https://www.brightdesk.io/img/onboarding-2x1.png
Output
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="How We Cut Onboarding Time in Half"> <meta name="twitter:description" content="A 6-step checklist from our support team."> <meta name="twitter:url" content="https://www.brightdesk.io/blog/onboarding"> <meta name="twitter:site" content="@brightdesk"> <meta name="twitter:image" content="https://www.brightdesk.io/img/onboarding-2x1.png">
The card header in the preview shows brightdesk.io because the leading www is stripped from the hostname.
Tips
- If X is a main channel, design the image at 2:1 (for example 1200 x 600). A 1.91:1 image placed in the 2:1 frame loses a thin strip at the top and bottom.
- X falls back to og:title, og:description and og:image when the twitter: versions are missing, so you only need twitter: copies where you want different wording on X.
- Type the handle with the @ sign, because the field is copied into twitter:site exactly as entered.
Questions
Can I preview the small summary card with a square thumbnail?
No. This previewer always renders summary_large_image. The Twitter Card Generator lets you choose summary, summary_large_image or player, but it outputs tags only, with no visual.
Why is twitter:url in the generated tags?
The tool adds it next to the other tags. X builds the card from the link that was actually posted, so twitter:url is harmless but optional, and you can delete that line for a shorter block.
Does the card look different in X light mode?
Only the colors change. The 2:1 image, crop and two-line text limits are the same, and this preview renders the dark theme only.
My image URL is filled in but the preview shows nothing. Why?
The preview hides the image when your browser cannot load it, which usually means a relative path, a typo or a host that blocks hotlinking. Use a full https address that opens on its own in a new tab.