Design / Diseño

Twitter Card Generator

Build the Twitter Card meta tags so your links look great on X. Pick a type, fill the fields, copy the code.

Instant🔒In your browserNo signup
Live

What is a Twitter Card

A Twitter Card is the rich preview that shows up when someone shares a link on X (formerly Twitter). Without it, your link appears as plain text. With it, you get image, title and description — far more attention-grabbing in the feed.

Card types

  • summary: small square thumbnail next to the title. Good for sites where the image is not the focus.
  • summary_large_image: large horizontal image above the title. Default choice for most landings and articles.
  • player: for embedded video or audio. Requires Twitter approval.
  • app: to promote mobile apps with a direct link to the store.

Image sizes

For summary_large_image: 1200x628 pixels, 1.91:1 ratio, minimum 300x157, max 5 MB. JPG, PNG, WebP or static GIF. For summary: minimum 144x144, 1:1 ratio.

How Twitter detects your card

Twitter uses a bot called Twitterbot that fetches your URL and parses the meta tags. If your robots.txt blocks Twitterbot, no card. No card either if the server returns 4xx/5xx, if the page is too slow, or if meta tags are malformed.

Open Graph as fallback

Twitter is smart: if it does not find meta name="twitter:..." but does find meta property="og:..." (Open Graph), it uses OG as fallback. So if you already set OG properly, Twitter Card works even without specific tags. Twitter-specific tags only override OG when you want to show something different on X than on Facebook or LinkedIn.

Validation and debug

Twitter changed its historical validator, but you can test by pasting your URL in a draft tweet and checking the preview. If no card: confirm the image is publicly reachable, the HTML has the meta tags, the site returns 200, and clear cache if the image was recently changed.

Common mistakes

  • Relative image URL: use absolute URLs (with https://), never relative paths.
  • Image behind auth: the image must be public.
  • Wrong type: if you do not specify summary_large_image, X falls back to summary.
  • Cache: og:image changes can take time to propagate.

FAQ

Which card type should I use?

For most cases, summary_large_image. If your site does not benefit from a large image, use summary.

Do I need @site?

Not required. If your brand has an X account, set it so the card attributes correctly.

Why is my card not showing?

Broken image, robots blocking Twitterbot, missing og:image or cache. Try pasting the URL in a draft tweet.

Was this generator useful?