Skip to content
ZeroServer.tools

Twitter Card Generator

Generate Twitter/X card meta tags with a live preview.

Card Format: summary_large_imageTitle Length: 0Desc Length: 0
Preview
Image
Title
Description
Meta tags

Twitter / X cards explained

Twitter Cards turn a plain link into a rich preview when shared on X. The summary_large_image type shows a big banner above the title and is best for articles and landing pages, while summary uses a compact thumbnail. Add these tags to your page's head; if Twitter-specific tags are missing, X falls back to your Open Graph tags. Aim for an image around 1200×628 for large cards. The preview and tags are generated entirely in your browser.

Built and maintained by Meet Shah · Last updated

What this tool is used for

  • Producing card tags so a link renders with an image and a summary.
  • Choosing the right card type for the content being shared.
  • Fixing a link that currently shares with no preview at all.
  • Getting the image requirements right for the card type.
  • Previewing how the card will look before publishing.

Frequently Asked Questions

What is the difference between summary and summary_large_image?
The image size and position. `summary` renders a small square thumbnail beside the text; `summary_large_image` renders a full-width banner above it. The large card takes far more space in a timeline, which is why it is the default choice for anything being shared for engagement.
What image dimensions does each card need?
`summary` wants at least 144×144 and is cropped square. `summary_large_image` wants a 2:1 ratio, ideally 1200×628 or larger, and crops to that ratio from the centre — so anything important near the top or bottom edge of the source disappears.
Do I still need twitter:title if I have og:title?
No. X falls back to the Open Graph equivalents for title, description and image, so the only tag that has no fallback is `twitter:card` itself. Specifying both lets you show a different headline on X than on LinkedIn, which is the real reason to duplicate them.
Why is my card not rendering?
Most often the image: it must be an absolute HTTPS URL, publicly reachable without a login, under 5 MB, and not behind a redirect. After that, check the cache — X scrapes once and holds the result, so a fix is invisible until the URL is re-crawled or the query string changes.
What is twitter:site for?
The @handle of the publishing account, which appears as attribution on the card. It is the site's account, not the author's — `twitter:creator` is the separate tag for that — and the leading @ is required, which is why the generator adds it if you leave it off.

Common errors and gotchas

  • Using a relative image URL, which must be absolute.
  • Choosing a large-image card and supplying an image below the minimum size.
  • Assuming a change is picked up immediately, when the platform caches and needs a re-scrape.
  • Omitting alt text for the card image, which the tags support and screen readers use.
  • Duplicating the Open Graph tags unnecessarily, when the platform falls back to them anyway.

Related Web & SEO tools

Private & free — this tool runs entirely in your browser.

NamecheapRegister a domain for your next project — from $1.98/yr.affiliate