A Twitter Card generator builds the twitter: meta tags that tell X how to display your page when someone shares its link. The tool below assembles the twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site tags entirely in your browser, so you can paste them into the head of your page and control the preview that appears in the feed.
What Twitter and X Cards Are
A Twitter Card, now often called an X Card, is the structured preview that appears under a link when it is posted on X. Instead of showing a bare URL, the platform reads a set of meta tags from the page and turns them into a clickable unit with an image, a headline, and a line of description. These tags live in the head of your HTML and start with the prefix twitter:, which is how X knows they are meant for its card renderer. The card does not change your page; it only changes how the link looks inside a post.
How to Use This Twitter Card Generator
- Choose a card type. Use summary_large_image for a full-width image, or summary for a small square thumbnail next to the text.
- Enter the title that should appear in the card. Keep it under about 70 characters so it is not cut off.
- Write a short description. One or two sentences is enough; X trims long text.
- Paste the full URL of the image you want shown, including https://.
- Add your site @handle so the card credits your account.
- Copy the generated tags from the box and paste them inside the head section of your page.
The Card Types and Tags
There are two card types you will use for ordinary pages, and a small set of tags that fill them in. The table below lists each tag this generator produces and what it controls.
| Tag | What it sets |
|---|---|
| twitter:card | The layout: summary for a small thumbnail, or summary_large_image for a large banner image. |
| twitter:title | The headline shown in the card. |
| twitter:description | The short summary line under the title. |
| twitter:image | The full URL of the preview image. |
| twitter:site | The @handle of the account that owns the page. |
What Image Size to Use
Image size depends on the card type. For summary_large_image, use an image of 1200 by 628 pixels, an aspect ratio near 1.91 to 1, so it fills the card without cropping. For the smaller summary card, X shows a square, so an image around 1200 by 1200 pixels works best. Keep the file under 5 MB and serve it over https, because X will not load an image from an insecure URL. Use an absolute URL, not a relative path, since the card is rendered by X and not by your site.
When to Use It
Add Twitter Card tags to any page you expect people to share on X: blog posts, product pages, landing pages, and announcements. They give you control over the headline, the image, and the credited account, which is the difference between a link that gets ignored and one that reads like a finished post. If you maintain Open Graph tags already, you can rely on the fallback for most pages and add twitter: tags only where you want the X preview to differ. After you publish the tags, paste the page URL into the X Card Validator to confirm the preview renders the way you expect.
Is Anything Sent to a Server?
No. This generator builds the meta tags in your browser from the text you type. Nothing you enter is uploaded, logged, or stored anywhere, and the tool works the same with the network disconnected. The output is plain HTML that you copy and place in your own page, so the only place your title, description, and image URL travel is into your own code.
Last Thoughts on Generating Twitter Cards
The link preview on X is decided by a few meta tags, and getting them right is the difference between a clean card and a broken one. A generator removes the guesswork: it spells the tag names correctly, escapes your text, picks the right card type, and reminds you of the image size that fits. Paste the result into your page head once and every future share of that URL carries the preview you chose.
Build your card above, then validate it on X before you promote the link. For broader social previews, pair these tags with our Open Graph generator, round out your head with the meta tag generator, and check your title and description lengths with the meta length checker. You can find all of these in our free online tools.
Key Takeaways:
- A Twitter Card is the link preview on X, built from twitter: meta tags in your page head.
- The five core tags are twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site.
- Use summary_large_image with a 1200 by 628 image for a large banner, or summary for a small square thumbnail.
- The twitter:site value is an @handle and should begin with the @ sign.
- When twitter: tags are absent, X falls back to your Open Graph tags, so you only need them to override the look.
- This generator runs entirely in your browser; nothing you type is sent to a server.
Frequently Asked Questions (FAQs)
What is a Twitter Card?
A Twitter Card, also called an X Card, is the preview block X shows when a link is posted: an image, a title, and a short description. X builds it from a set of meta tags in your page head whose names begin with twitter:. The card changes only how the link looks in a post, not the page itself.
What is the difference between summary and summary_large_image?
The summary card shows a small square thumbnail next to the title and description. The summary_large_image card shows a full-width banner image above the text. Use summary_large_image for posts where the image is the draw, and summary when you want a compact preview.
What image size should a Twitter Card use?
For summary_large_image, use 1200 by 628 pixels, a ratio near 1.91 to 1. For the smaller summary card, use a square image around 1200 by 1200 pixels. Serve the image over https with an absolute URL and keep the file under 5 MB.
Do I still need Twitter Card tags if I have Open Graph tags?
Not always. When a page has no twitter: tags, X reads your Open Graph tags instead, so og:title, og:description, and og:image become the card. Add twitter: tags when you want a different image or wording on X, or to force a specific card type.
Where do I put the generated tags?
Paste them inside the head section of your page HTML, alongside your other meta tags. On a WordPress site, an SEO plugin field or a head-injection setting handles this for you. Once the tags are live, share the URL or run it through the X Card Validator to confirm the preview.
Does the @handle need the @ sign?
Yes. The twitter:site value is an account handle and must start with @, for example @yoursite. This generator adds the @ for you if you leave it off, so the tag is always written in the form X expects.
