How to use the twitter card generator
- 1Choose the Card type: Large image or Summary (small square image).
- 2Answer Does the page already have Open Graph tags? Choose Yes, reuse them if it does, so only X-specific tags are written.
- 3Enter your Site handle and Author handle, and, if needed, the title, description and Image URL.
- 4Check the preview and warnings, then Copy or Download the tags.
Example: page without Open Graph tags
Card type: Large image Site handle: @breadnotes · Author handle: @ana_bakes Title: How to make a sourdough starter Description: Seven days, two ingredients, one jar. Image: https://www.example.com/images/starter-1200x600.jpg
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@breadnotes"> <meta name="twitter:creator" content="@ana_bakes"> <meta name="twitter:title" content="How to make a sourdough starter"> <meta name="twitter:description" content="Seven days, two ingredients, one jar."> <meta name="twitter:image" content="https://www.example.com/images/starter-1200x600.jpg"> <meta name="twitter:image:alt" content="A jar of bubbly sourdough starter">
With Yes, reuse them, the same input gives only twitter:card, twitter:site, twitter:creator and twitter:image:alt; X takes the title, description and image from og:title, og:description and og:image. Handles can be typed with or without @, or pasted as an x.com profile URL.
Summary vs summary_large_image
summary_large_image shows a wide image (2:1) across the full width of the post: the better choice for articles, products and anything visual. summary shows a small square thumbnail next to the title and is better for profile pages or when you don't have a good wide image. App and player cards also exist, but player cards need approval from X, so this generator covers the two cards any site can use.
Required and optional twitter: tags
| Tag | Needed? | Notes |
|---|---|---|
twitter:card | Yes | summary or summary_large_image |
twitter:title | Yes, unless og:title exists | Max 70 characters |
twitter:description | Optional | Max 200 characters |
twitter:image | Optional | Falls back to og:image |
twitter:image:alt | Recommended | Alt text, max 420 characters |
twitter:site | Optional | The site's @handle |
twitter:creator | Optional | The author's @handle |
Twitter tags use name=, while Open Graph tags use property=.
How X falls back to Open Graph
When a twitter: tag is missing, X uses the Open Graph equivalent: og:title for the title, og:description for the description and og:image for the image. So a page that already has complete Open Graph tags needs only twitter:card (plus handles if you want them). Writing both sets doubles the work of keeping them in sync; write twitter: versions only when X should show something different.
Image size and file limits
From X's card documentation:
- Large image card: 2:1 ratio, at least 300 × 157 px, at most 4096 × 4096 px.
- Summary card: 1:1 ratio, at least 144 × 144 px, at most 4096 × 4096 px.
- Under 5 MB; JPG, PNG, WEBP or GIF (only the first frame of an animated GIF is used).
A 1200 × 630 px Open Graph image also works for the large card; X crops it slightly to 2:1.
Testing cards now the validator is gone
X removed the preview from its Card Validator in 2022. To check a card: publish the page, run it through the Open Graph checker to confirm the tags are in the server HTML, then start composing a post with the link on X and look at the card before posting. X caches cards for about a week; adding a query string (?v=2) to the shared URL forces a fresh fetch.
Is anything I enter stored?
This tool runs entirely in your browser. Your text is not uploaded to our servers.