Enter a title and description to build the tags. The preview updates as you type.
Twitter cards, now the X link previews, turn a plain URL in a post into a block with an image, a headline and a short summary. This generator writes the meta tags for all four card types: summary with its small square image, summary_large_image with a wide banner, app for mobile install prompts and player for embedded audio or video. Extra fields appear only for the type you pick, so the output stays clean.
Titles are cut at 70 characters and descriptions at 200, and the counters here turn red once you pass either point. For the wide card use an image of at least 800 by 418 pixels at a 2 to 1 ratio; the small summary card uses a square image of at least 144 by 144. Fill in twitter:image:alt as well, since that text is read out by screen readers.
How to use the Twitter Card Generator
- Pick the card type. Most articles and blog posts use summary_large_image.
- Add your site handle, the author handle and the page URL.
- Write the title, keeping it under 70 characters, and a description under 200 characters.
- Add an absolute image URL plus alt text, copy the tags into your page head, then test the URL in the card validator.
Frequently asked questions
What is the difference between summary and summary_large_image?
Summary shows a small square thumbnail beside the text, so more posts fit on screen. Summary_large_image puts a full width banner above the title and takes far more space in the timeline, which is why most publishers use it for articles and landing pages.
What image size works best?
For summary_large_image use at least 800 by 418 pixels at a 2 to 1 ratio; 1200 by 600 is a safe upload size. The small summary card wants a square image of at least 144 by 144. Keep files under 5 MB and use JPG, PNG, WEBP or a static GIF.
Do I still need twitter: tags if I have Open Graph?
Not strictly. X falls back to og:title, og:description and og:image when the matching twitter: tags are missing. Adding twitter:card is still worth it because that tag decides whether you get the small or the wide layout, and Open Graph has no equivalent.
My card is not showing, what should I check?
Confirm the tags are inside the head element and rendered in the raw HTML, not injected by JavaScript. Check the image URL is absolute and publicly reachable, that robots.txt does not block the crawler, and that the page returns a 200 status. Previews are also cached for a while after a change.