About the Twitter Card Generator
The X Card Generator writes the twitter: meta tags that turn a plain link on X (formerly Twitter) into a card with an image, a title and a description. Pick a card type, fill in the fields, and copy the tags into the <head> of your page.
It supports all four card types: Summary, with a small square image; Summary with large image, the wide card most articles and product pages use; App, which points to an app in the App Store or Google Play; and Player, for embedded video or audio. A live preview and a checklist help you catch a missing image, a plain http player or an invalid account name.
The limits come from X's card documentation: titles up to 70 characters, descriptions up to 200, alt text up to 420, and images under 5 MB. The tags themselves are built in your browser and never sent anywhere.
How to use it
- Choose a card typeLarge image for most pages, Summary for a compact card, App to promote an app, Player for embedded media.
- Write the title and descriptionKeep the title under 70 characters and the description under 200. The counters show where you are.
- Add the image and alt textUse a full https:// address. The alt text describes the image for people using screen readers.
- Add accountsEnter the site's X account and the author's, with or without the @. The tool adds the @ for you.
- Copy the tagsFill in the app IDs or player URL if you chose those types, then copy the HTML or download twitter-card.html.
Key features
Four card types
summary, summary_large_image, app and player, each with only the fields it needs.
Card preview
A large or compact preview with your image, title, description and domain, so you can judge the crop and the text.
Image guidance per card
Large image cards use a 2:1 image of at least 300 × 157 pixels; summary cards show a square of at least 144 × 144. Both must be under 5 MB.
Account checks
Warns when a handle has more than 15 characters or anything other than letters, numbers and underscores.
App and player fields
App Store IDs for iPhone and iPad, a Google Play package name and store country, or an HTTPS player URL with its width and height.
Private by design
Nothing is uploaded. The tool builds the tags on your device.
Examples
A large image card
The sample article with an image, alt text "A cortado on a marble counter", site account "clayandco" and author "@sam_rivers" gives:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@clayandco">
<meta name="twitter:creator" content="@sam_rivers">
<meta name="twitter:title" content="The 12 best coffee shops in Lisbon">
<meta name="twitter:description" content="From tiny espresso bars to
roasteries with a view, our local guide to the city's coffee.">
<meta name="twitter:image" content="https://example.com/lisbon.jpg">
<meta name="twitter:image:alt" content="A cortado on a marble counter">(The description is one line in the real output.) The title is 34 characters and the description 88, both well inside X's limits. The @ was added to "clayandco" automatically.
Choosing a card type
| Card | Image | Good for |
|---|---|---|
| Summary | Square, at least 144 × 144 | Home pages, profiles, short links |
| Large image | 2:1, at least 300 × 157 | Articles, products, events |
| App | From the app store listing | Promoting a mobile app |
| Player | Shown before playback | Video or audio you host |
1200 × 600 pixels is a safe size for a large image card. Keep important text away from the edges, because X can crop the image slightly on some screens.
What the checks catch
| You enter | The tool says |
|---|---|
| Large image card, no image | This card type needs an image. |
| Player URL starting with http:// | The player URL must use HTTPS. |
| App card without app IDs | Add at least one app ID. |
| Author "@this_name_is_far_too_long" | Account names have up to 15 letters, numbers or underscores. |
Tips
- If your page already has Open Graph tags, you only need twitter:card. X falls back to og:title, og:description and og:image when the twitter: versions are missing.
- Use twitter:creator for the author of an article and twitter:site for the publication. Both can be set at once.
- Use JPG, PNG, WEBP or GIF. SVG images are not supported, and an animated GIF shows only its first frame.
- Test the card by posting the link from a private test account or by starting a post and looking at the preview before you publish.
- For the same preview on Facebook, LinkedIn and chat apps, add Open Graph tags with the Open Graph Generator.
Common mistakes and limits
- Leaving out twitter:cardWithout it, X has no card type to use, even if the Open Graph tags are perfect. It is the one tag every card needs.
- Using a relative image pathtwitter:image needs a full URL, such as https://example.com/lisbon.jpg. A path like /lisbon.jpg will not load.
- Blocking X's crawlerX fetches your page and image with its own crawler. A robots.txt rule, a login wall or hotlink protection can leave the card empty.
- Expecting old posts to updateX caches cards. A post keeps the preview it had when it was shared; new posts pick up your changes after the cache refreshes.
- Serving a player over httpPlayer cards must use HTTPS for the player page and everything it loads, or X will not show them.
