Twitter (X) Card Generator
X (Twitter) preview
FREE TOOL · NO SIGN-UP
A Twitter card generator creates the twitter: meta tags that control how your link looks when it is posted on X. Choose a card type in the tool above, fill in the title, description, image and handles, and you get a live X preview plus copy-ready meta tags for your page head. It supports summary, summary with large image, app and player cards, and only outputs the tags you actually fill in.
What an X Card Adds to Shared Links
Without card tags, a link on X can appear as a bare URL or as a card built from whatever X finds on the page. With card tags, you decide the headline, the description text, the image and which account gets credit.
Cards matter because a post with a clear image and headline takes up more space in the timeline and tells people what they will get before they click. The card also stays attached to the link wherever it is reposted or quoted, so the presentation you set once follows every share.
Twitter cards are plain HTML meta tags in the page head, written as meta name=”twitter:…” with a content value. X’s crawler, Twitterbot, reads them when someone posts your URL. They work alongside Open Graph tags, which Facebook, LinkedIn and most other platforms use. X reads both, and uses Open Graph as a backup when twitter: tags are missing.
Card tags do not change how your page looks on your own site and do not affect Google rankings. They only shape the link preview on X.
Card Types Explained
The twitter:card tag sets the layout. The generator offers four values in its Card type menu: summary_large_image (Summary with large image), summary, app and player. Most websites only ever need the first two.
Summary card versus summary_large_image
A summary card shows a small square thumbnail to the left of the title and description. It is compact and works well for pages where the image is a logo or icon rather than a strong visual, such as documentation, tools or profile pages.
A summary_large_image card shows a wide image above the title, filling much more of the timeline. It suits articles, product launches, landing pages and anything with a custom share image. For most content pages, it is the better default.
The preview in the tool switches layout when you change the card type, so you can see how the same image looks as a wide banner and as a cropped thumbnail. A landscape image with text near the edges often loses that text in the summary crop.
App and player cards
An app card promotes a mobile app with a direct link to download it. The generator adds twitter:app:id:iphone and twitter:app:id:googleplay fields when you choose App.
A player card embeds playable media, such as video or audio, inside the post. Choosing Player reveals fields for the player URL (an https page that can be loaded in an iframe), width and height.
Both types have stricter requirements than summary cards, and X has changed how it supports them over time. Check X’s developer documentation for the current rules before relying on them.
How to Generate Tags in Four Steps
Pick the card type. Choose “Summary with large image” for most pages, or “Summary” for a compact card.
Add your handles. Enter the site @username (the brand account) and optionally the creator @username (the author). You can type them with or without the @; the tool adds it if missing.
Write the title, description and image details. The title field allows up to 70 characters. Keep the description short; the placeholder notes 200 characters as the limit. Paste a full https image URL and add image alt text that describes the image for people using screen readers. The page URL field is only used for the domain shown in the preview.
Check the preview, then copy. Review the X preview on the right. When it looks right, click Copy, or Download to save twitter-card.html, and paste the tags into the head section of your page.
In WordPress, most SEO plugins have social settings that output these tags, so check there first to avoid duplicates. If your theme or plugin does not, add the tags with a header code plugin.
Required and Optional twitter: Tags
twitter:card sets the card type. X’s documentation treats it as required, and without it you lose control over which layout appears.
twitter:title is the headline. X documents a 70 character limit.
twitter:description is the supporting text, up to 200 characters. Keep it shorter for mobile.
twitter:image is the full URL of the share image.
twitter:image:alt is a text description of the image, up to 420 characters.
twitter:site is the @username of the website or brand.
twitter:creator is the @username of the content author.
Player cards add twitter:player, twitter:player:width and twitter:player:height. App cards add app IDs for iPhone and Google Play.
The generator skips any tag you leave empty, so the output stays clean.
How X Falls Back to Open Graph
If a twitter: tag is missing, X looks for the matching Open Graph tag. twitter:title falls back to og:title, twitter:description to og:description and twitter:image to og:image. That means a page with complete Open Graph tags often needs only a few twitter: tags, typically twitter:card and twitter:site, to display properly on X.
The fallback is useful but not always what you want. If your og:image is a tall or square graphic made for another platform, it will be cropped on a large-image card. Adding a dedicated twitter:image lets you give X a 2:1 image while other platforms keep theirs.
Build your Open Graph tags with the Open Graph Generator and use this tool for the X-specific extras.
Image Size and Alt Text Guidelines
For summary_large_image cards, use an image with a 2:1 aspect ratio. X’s documented minimum is 300 × 157 pixels and the maximum is 4096 × 4096 pixels, under 5 MB. In practice, 1200 × 628 or 1200 × 630 is a good size, and the same file usually works for Open Graph too.
For summary cards, use a square image of at least 144 × 144 pixels. X crops to a 1:1 ratio.
Supported formats are JPG, PNG, WEBP and GIF (only the first frame of an animated GIF is used). Keep key text and logos away from the edges.
Write alt text that describes what the image shows, not a list of keywords. “Chart showing monthly traffic growth after a site migration” is useful. “SEO tool best SEO free” is not.
Why a Card Fails to Display
The image URL is relative or private. X needs a full public https URL it can fetch.
robots.txt blocks Twitterbot. X respects robots.txt. If the page or the image folder is disallowed for Twitterbot or all user agents, the card will not load.
Tags are added by JavaScript. Twitterbot reads the HTML your server returns. Tags injected later by client-side scripts may be missed.
The page needs a login or returns an error. Staging sites behind passwords, geo-blocks and server errors all prevent the crawl.
X cached an old version. Previews are cached, so changes may take time to appear. X removed the preview from its Card Validator, so the practical test is to start a new post with the URL and look at the card before publishing.
Duplicate or conflicting tags. Two plugins outputting different twitter:card values can produce unpredictable results.
Card Mistakes to Avoid
Using the summary card with a landscape banner. The square crop cuts off text on both sides.
Leaving out twitter:card. You lose control of the layout.
Writing the handle without checking it. A typo in twitter:site credits the wrong account or none at all.
Stuffing the title with keywords. Cards are read by people scrolling a feed, not by search engines.
Forgetting alt text. It helps accessibility and costs nothing to add.
Mismatched content. A card that promises something the page does not deliver may win the click but loses the reader.
When Open Graph Alone Is Enough
If your Open Graph tags are complete, with a 1.91:1 or 2:1 image, a clear title and a short description, X will build a decent card from them. In that case, adding just twitter:card set to summary_large_image and twitter:site is enough for most sites. Add the full set of twitter: tags only when you want different text or a different image on X than on other platforms.
Getting More From Every Shared Post
Generate the tags here, compare the result on other networks with the Social Share Preview, and give authors an easy share link with the Click to Tweet Generator. For more free meta and social tools, visit the FHSEO Hub free SEO tools page.