Twitter/X Cards add rich previews to links shared on Twitter — instead of a plain URL or a small text snippet, the tweet shows a card with an image, title and description. Adding the right meta tags to your pages is straightforward and takes effect immediately.
The Two Main Card Types
Summary Card with Large Image (recommended for most pages): ``html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Brief description."> <meta name="twitter:image" content="https://yourdomain.com/image.jpg"> ``
Summary Card (smaller thumbnail): ``html <meta name="twitter:card" content="summary"> ``
Most content pages, articles and product pages should use summary_large_image — it takes up much more space in a feed, which generally means better visibility and engagement.
Generating Twitter Card Tags
- Open Twitter Card Generator.
- Fill in the title, description, image URL and card type.
- Copy the generated meta tags.
- Paste into the page's
<head>.
Image Requirements
- Recommended size: 1200×600 pixels for
summary_large_image. - Minimum size: 300×157 pixels (anything smaller won't show as a large image card).
- Format: JPG, PNG, WebP or GIF.
- File size: under 5 MB, though smaller loads faster in feed contexts.
Adding a Twitter Account Tag
Optionally add: ``html <meta name="twitter:site" content="@youraccounthandle"> ``
This associates the card with your Twitter account. Not required, but standard practice.
Testing
The Twitter/X Card Validator is at cards-dev.twitter.com/validator. Enter a page URL to see how the card will display. Note that this tool may show the cached version — if you've recently updated the tags, wait a few minutes or clear the cache.
Open Graph as a Fallback
If Twitter Card tags are absent, Twitter reads Open Graph tags instead. Having both is best practice for full control. See what are Open Graph tags for that side of the setup.
Twitter vs Open Graph Priority
Twitter reads its own twitter: meta tags first; if those are absent, it falls back to Open Graph tags. This fallback means a page with good Open Graph tags but no Twitter-specific tags will still generate a reasonable card on Twitter. The advantage of adding both is granular control — you might want a different description or image variation specifically optimised for Twitter's format versus Facebook's. In practice, for most pages, well-configured Open Graph tags plus the twitter:card tag (just the card type, which Open Graph doesn't include) is a pragmatic middle ground. Use Twitter Card Generator for the Twitter-specific tags and Open Graph Generator for the OG tags.
