Twitter Card Generator

How do X (Twitter) Cards work?

When someone posts a link on X, X's crawler reads the page's <meta name="twitter:…"> tags to build a preview card. The twitter:card tag picks the layout; the title, description and image tags fill it in. This generator produces those tags for the two layouts most sites use, summary and summary_large_image, from a title and four optional fields.

The two card types

The figures come from X's summary card and summary card with large image pages. X has since moved its developer documentation to docs.x.com, which doesn't currently carry the card reference, and the old addresses redirect to its home page, so those links point to archived copies. Pick the large card for articles and product pages with a strong image; the small card suits pages where the only image is a logo or icon.

Example output

With the title Trail Running Shoes for Wet Rock, a one-line description, an image URL, the handle @exampleoutdoors and the default card type:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Trail Running Shoes for Wet Rock">
<meta name="twitter:description" content="We tested 9 shoes on wet granite.">
<meta name="twitter:image" content="https://example.com/img/wet-rock.jpg">
<meta name="twitter:site" content="@exampleoutdoors">

The card and title lines are always present. Description, image and site appear only when filled, in that order. Fields are trimmed at both ends, and &, <, > and " are escaped as &, <, > and ", so text like Tips & Tricks can't break the attribute. The handle is copied as typed: entering exampleoutdoors without the @ produces content="exampleoutdoors", which isn't the documented format.

Adding cards to a page

1. Type the title and fill in the description, image URL and @site handle.
2. Choose summary or summary_large_image.
3. Click Generate and paste the tags into the page's <head>. Use only one twitter:card per page; X's getting started guide says that if there are several, the last one takes priority.
4. Make sure the image URL is absolute, publicly reachable and meets the size rules above. The image size analyzer reports an image's pixel dimensions from its URL.
5. Publish, then post the link (or preview it in a draft) to see the card.

Lengths and extra tags

The generator doesn't measure anything. X's markup reference gives these limits:

• twitter:title: maximum 70 characters.
• twitter:description: maximum 200 characters.
• twitter:image:alt: maximum 420 characters. The tool has no field for it, so add it by hand; it's the text screen-reader users hear for the card image, and it falls back to og:image:alt.

Two other tags you might add manually are twitter:creator, the @username of the article's author, and twitter:site:id or twitter:creator:id if you'd rather reference numeric account IDs than handles.

The same reference also explains fallback: if twitter:card is absent but og:type, og:title and og:description exist, X may render a summary card anyway. So a page that already has full Open Graph markup from the Open Graph generator only needs a twitter:card line to get the large layout.

Common reasons a card doesn't appear

• The image is an SVG, over 5 MB, or below the minimum size for the chosen card.
• The image URL is relative, behind a login, or returns an error.
• The page's <head> holds a second, conflicting twitter:card tag from a plugin.
• robots.txt blocks the page or the image. X's crawler identifies as Twitterbot and follows Google's robots.txt rules; a blocked page shows no card and a blocked image shows no picture.
• The link was shared before you fixed the tags. The same getting started guide says X caches card content for 7 days after a link to the page is posted.

For the other half of social sharing, the share link generator builds a pre-filled X post link for a page, and the meta tag generator covers the search-facing title and description.