What are Twitter Cards?
Twitter Cards — still called that in X’s documentation and markup — turn a shared link into a rich preview with an image, title and domain. They are controlled by <meta name="twitter:…"> tags in your page’s <head>. The twitter:card tag chooses the layout; the others set the content and attribute the page to accounts.
X reads Open Graph tags as a fallback: if twitter:title, twitter:description or twitter:image are missing, it uses og:title, og:description and og:image. That means most sites only need twitter:card (plus twitter:site for attribution) on top of a good set of Open Graph tags. This generator can output either the minimal set or a complete standalone set.
Two card types cover nearly every website. summary_large_image shows a big image across the timeline with the title overlaid and “From example.com” below. summary shows a small square thumbnail next to the domain, title and description. The App and Player cards exist for app installs and embedded media players, but they require approval or app store IDs and are rarely needed — this tool focuses on the two cards that work for any page.
How to use the Twitter Card Generator
- Choose Large image for articles and landing pages with a strong visual, or Summary for a compact card.
- Enter your site’s @handle and, optionally, the author’s @handle.
- If the page already has Open Graph tags, tick the checkbox to output only the X-specific tags. Otherwise fill in the title, description and image.
- Add alt text for the image so screen reader users know what it shows.
- Check the preview and copy the tags into your
<head>.
Example
Minimal tags for a page that already has Open Graph tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@brewlab">
<meta name="twitter:creator" content="@janedoe">
<meta name="twitter:image:alt" content="A glass jar of cold brew coffee next to a bag of coffee beans">Image requirements
- summary_large_image: 2:1 or 1.91:1, at least 300×157 px; 1200×630 works for X and Open Graph alike.
- summary: square (1:1), at least 144×144 px. Wider images are cropped to the center.
- JPG, PNG, WebP and GIF are supported (only the first frame of an animated GIF). SVG is not supported. Keep files under 5 MB.
- The image URL must be absolute and publicly reachable — not blocked by robots.txt or a login.
Testing your card
X no longer offers a public card validator. The most reliable test is to paste the link into a new post draft: the card preview appears in the composer before you publish. Remember that X caches cards for about a week, so changes may take time to appear on links that were already shared.
Frequently Asked Questions
Do I need Twitter Card tags if I have Open Graph tags?
You need at least twitter:card to choose the card type. Title, description and image fall back to the Open Graph values, so duplicating them is optional. Create the Open Graph set with the Open Graph Generator.
What is the difference between twitter:site and twitter:creator?
twitter:site is the account of the website or publication; twitter:creator is the account of the person who wrote the content. Both are optional and used for attribution.
Why does my card show without a description?
Large image cards on X currently show the image, the title overlaid on it and the domain — not the description. Summary cards still display the description beside the thumbnail.
Why is no card showing at all?
Common causes: the page returns an error or redirect loop to X’s crawler, robots.txt blocks Twitterbot, the image URL is relative or too small, or the tags are added by JavaScript after load (X does not run JavaScript). Check the raw HTML source contains the tags.
Are Twitter Cards good for SEO?
They do not influence Google rankings. They make links more visible and clickable on X, which can bring traffic. Tag shared links with campaign parameters using the UTM Builder to measure it.