Twitter Card Meta Tags — Generate the Code, Test the Preview

Twitter Card meta tags tell X (formerly Twitter) how to display your link when it's shared in a tweet. Without them, your link appears as plain text — no image, no title card, no preview. With them, your link gets a visual card that takes up far more space in the timeline and drives dramatically more clicks.

This guide covers the two card types you'll actually use, the exact tags required for each, common reasons cards fail to appear, and how to generate and test yours in under five minutes.

summary vs summary_large_image — Which Card Type to Use

Twitter supports two primary card types for most websites:

summary — A small square thumbnail image (minimum 120x120px, displays at ~120x120px) appears to the left of the title and description. Use this for pages without a strong hero image, for author profile pages, or when you want a compact card appearance.

summary_large_image — A large image (minimum 300x157px, recommended 1200x600px) displays above the title and description, spanning the full width of the card. This is the most visually impactful card type and gets significantly higher engagement than the small thumbnail version.

For most blog posts, product pages, and landing pages, use summary_large_image. The large image gives you space to brand your content visually and make your tweet stand out in a fast-moving timeline.

Use summary for: author bio pages, search result pages with no good hero image, pages where you don't have a 1200x600 image to use, or situations where you want a consistently compact appearance.

Required and Optional Twitter Card Fields

The minimum set of tags required for a Twitter Card to appear:

• twitter:card — "summary" or "summary_large_image". This tag is required. Without it, Twitter doesn't know to render a card.
• twitter:title — The card title. If missing, Twitter falls back to og:title, then to the HTML title tag. Maximum 70 characters before truncation.
• twitter:description — 2–3 sentences. Truncated at about 200 characters in summary cards. Falls back to og:description if missing.
• twitter:image — Full URL to the card image. Falls back to og:image. Must be HTTPS. Max 5MB. No animated GIFs on summary_large_image.

Optional but recommended tags:

• twitter:site — Your brand's Twitter handle (@yourbrand). Appears as "From @yourbrand" below the card. Adds credibility and brand recognition.
• twitter:creator — The author's Twitter handle. Use this on blog posts where you want to credit the author separately from the brand.
• twitter:image:alt — Alt text for the card image. Important for accessibility and for users with images disabled.

Sell Custom Apparel — We Handle Printing & Free Shipping

How Twitter Falls Back to OG Tags

Twitter's crawler reads Twitter Card tags first, then falls back to Open Graph tags if Twitter-specific tags are missing. This means if you have proper OG tags but no twitter:card tag, Twitter may still render a card — but often it renders a smaller or degraded version.

Fallback chain for each field:

• twitter:title falls back to og:title, then to <title>
• twitter:description falls back to og:description, then to page text
• twitter:image falls back to og:image

The one field that does NOT fall back is twitter:card. If this tag is missing, Twitter may not render a card at all — or will render a degraded summary card by default.

Best practice: always include at least twitter:card and twitter:site explicitly. Let the other fields fall back to OG tags to avoid maintaining two sets of identical values.

Why Your Twitter Card Is Not Showing

Twitter Card failures have predictable causes. Check these in order:

1. Missing twitter:card tag — The most common cause. Without this tag, X doesn't know to render a card. Verify it's present in your page source.
2. HTTP image URL — Twitter requires HTTPS image URLs. An HTTP URL causes the image to silently fail with no error message.
3. Image too small or wrong format — summary_large_image requires a minimum of 300x157px. Animated WebP and some GIF formats are rejected.
4. Cache issue — Twitter caches card data aggressively. If you updated your tags but the old version still shows, Twitter has cached the old data. There's no self-serve cache clear for X (Twitter removed its Card Validator). Wait 1–7 days or use a new URL.
5. Page blocked by robots.txt — If your robots.txt disallows Twitterbot, Twitter can't fetch the page to read your tags. Check your robots.txt for: User-agent: Twitterbot / Disallow: /

Generate Your Twitter Card Tags in the Meta Tag Generator

The Meta Tag Generator handles Twitter Card tags alongside your OG and basic SEO tags in one place. In the Twitter Card section:

• Select your card type: summary or summary_large_image
• Enter your brand's Twitter handle in the twitter:site field (e.g., @yourbrand)
• Optionally add the author's handle in twitter:creator

The generator outputs the complete HTML including your twitter:card, twitter:site, and twitter:creator tags. The title, description, and image fall back to your OG values automatically — you don't need to duplicate them.

After adding the tags to your page, validate them using the Twitter Card Validator guide or paste your HTML source into the Open Graph Checker to see the Twitter preview card rendered in your browser.

Frequently Asked Questions

Do I need Twitter Card tags if I already have Open Graph tags?

You need at least twitter:card. Without it, X may not render any card even if your OG tags are perfect. twitter:site and twitter:creator add brand attribution. The other Twitter fields (title, description, image) can fall back to OG values, so you don't need to duplicate them unless you want different content on X vs Facebook.

What size image should I use for Twitter Cards?

For summary_large_image, use 1200x600 pixels (2:1 ratio). For summary, use a square image at least 120x120 pixels (recommended 800x800). Use JPEG or PNG, max 5MB. Twitter crops images for different viewport sizes, so keep important content centered and avoid edge-heavy layouts.

Why did Twitter remove the Card Validator?

X removed the Twitter Card Validator tool in 2023. You can still verify cards by sharing your URL in a tweet draft and checking the preview, by using browser DevTools to inspect the rendered tags, or by pasting your HTML source into a tool like the Open Graph Checker which renders a Twitter preview for you.