Twitter Card Preview

A Twitter Card is rich media that appears when your URL is shared on X (formerly Twitter). Without cards, shared links show as plain text. With cards, you get a visual preview with your title, description, and image — dramatically improving click-through rates. Cards are controlled by meta tags in your HTML head.

summary shows a small square thumbnail (144x144px minimum) beside the title and description — good for compact content sharing. summary_large_image shows a large prominent banner image (1200x630px recommended, 2:1 ratio) with the title and description below — better for blog posts, articles, and content where images drive clicks.

For summary_large_image: minimum 300x157px, recommended 1200x628px (or 1200x630px), maximum 5MB, ratio 1.91:1 (or 2:1). For summary: minimum 144x144px, recommended 400x400px. Use JPG or PNG. Images below 300x157px may not render on some clients. Always use absolute URLs for twitter:image — relative paths won't work.

Yes — Twitter falls back to og: meta tags if twitter: tags are missing. Twitter reads og:title, og:description, og:image, and og:url as fallbacks. This means if you already have Open Graph meta tags, Twitter Cards will work without adding twitter: tags. However, explicitly setting twitter: tags gives you more control over the Twitter appearance.

Use Twitter's Card Validator at cards-dev.twitter.com/validator — paste your URL and it will show you the exact card Twitter will render, plus any warnings or errors. Note: the page must be publicly accessible for the validator to fetch it. After publishing, new URLs may take a few minutes to cache.

Common reasons: (1) The image URL is not absolute or not publicly accessible. (2) The image is too small (minimum 300x157px for large card). (3) The image is over 5MB. (4) Twitter hasn't crawled the page yet — wait a few minutes and use the Card Validator to force a re-fetch. (5) The twitter:card meta tag is missing.