Twitter (now X) renders a rich card below any link you share — but only if your page's <head> carries the right meta name="twitter:*" tags. Without them a shared link shows only a plain URL, even if your Open Graph tags are perfect. Twitter reads its own tags first and falls back to og: tags only when the twitter: ones are absent — so adding both gives you the most control over how your content looks in a tweet.
Choose your card type, fill in the fields, and the HTML block appears immediately. Load Sample sets up a summary_large_image card for a tech blog article titled How to Build a REST API with Node.js and Express, with a description under 200 characters and a Twitter site handle of @devtutorials. The live card preview shows exactly how the card renders before you touch your site's HTML.
What Each Card Type Does
- Summary: a small square thumbnail beside title, description and domain. Good for most pages; renders reliably across clients and app versions.
- Summary Large Image: a full-width banner above the title and description. Best for blog posts, news articles, and anything where the image adds context. Minimum image size is 300×157 px; recommended is 1200×628 px.
- Player: an inline audio or video player embedded directly in the tweet. Requires an https:// iFrame URL, width and height, and a Twitter-approved account before cards are activated.
- App: an install card linking directly to the App Store or Google Play. Fill in the app name, store ID, and optional custom URL scheme for both platforms.
Worked Example: a Product Card
Click Load Sample twice to reach the e-commerce entry: a summary card (small image) for a mechanical keyboard. Title is 40 characters, description is 112 characters — both inside Twitter's display limits. No twitter:creator tag is emitted for product pages since there is no individual author, demonstrating that empty fields are silently omitted from the output rather than emitting blank tags.
Accuracy Notes and Character Limits
Twitter truncates titles at 70 characters and descriptions at 200 characters in the card display; the character counters turn red when you exceed those limits, and validation blocks output until the length is corrected. Image URLs must use HTTPS — HTTP images are blocked by Twitter's crawler. The twitter:site and twitter:creator fields accept handles with or without the leading @ and normalise automatically. The preview renders only for summary and summary_large_image cards; player and app cards show no preview because their visual output depends on Twitter's approval process and client-side rendering outside this tool's scope.
