Skip to main content

Twitter Card Preview

Preview how your page looks when shared on Twitter/X with meta tag generation.

Reviewed by · Last reviewed

Previewing a Twitter/X Card

  1. Select a card type - the picker offers summary (small square image alongside title and description) and summary_large_image (full-width hero image above text). X deprecated player and app cards for most use cases, so the tool focuses on the two still widely rendered.
  2. Fill twitter:title and twitter:description - the character counters track X's displayed limits (70 and 200 respectively, though titles often wrap earlier on mobile).
  3. Paste twitter:image - for summary_large_image use 1200x628 or larger at 2:1 ratio; for summary use a square 144x144 minimum, 4096x4096 maximum.
  4. Add handles - twitter:site is your publication's @ handle, twitter:creator is the author's handle. Both are optional but drive X's "from @handle" attribution on the card.
  5. Copy the generated block - the output textarea contains a complete <meta name="twitter:*"> block ready to paste into <head>.

How X Renders Cards

X's scraper (Twitterbot/1.0) fetches the shared URL, parses the HTML head for <meta name="twitter:*"> tags, and caches the resulting card by URL for roughly seven days. When Twitter-specific tags are absent, the scraper falls back to <meta property="og:*">, which is why sites that only ship Open Graph still get reasonable cards on X. The markup itself is documented in X's Cards reference - historically at developer.twitter.com/en/docs/twitter-for-websites/cards, now consolidated under X's developer documentation.

Notable quirk: X uses the HTML name attribute for its card tags (<meta name="twitter:title" content="...">), while Open Graph uses property. This is intentional - X argued that name is the semantically correct HTML attribute for metadata, whereas OG adopted property to align with RDFa. Both work in modern parsers, but mixing them in the same tag will cause most scrapers to ignore the meta element entirely.

Where Card Previewing Earns Its Keep

  • Before scheduling a high-reach post or ad, catching image crops that cut off the subject's head or a vital product detail.
  • Debugging why a link posted from a specific publishing CMS ends up with a text-only card while links from the author's own blog render with an image.
  • Testing summary vs summary_large_image side-by-side for the same URL to see which drives more clicks during a campaign dry-run.
  • Verifying that server-side rendered pages emit the Twitter tags in the initial HTML rather than via client-side JavaScript, which Twitterbot does not execute.
  • Ensuring author attribution (twitter:creator) resolves to the correct handle across multi-author blog platforms.

Common Rendering Gotchas

  • Image over 5MB - X rejects images above 5MB and falls back to a text-only card. PNG files hit this ceiling faster than JPEG at equivalent dimensions.
  • Transparent PNG backgrounds - X composites transparent pixels against its dark or light theme unpredictably. Bake a solid background into the image to control contrast.
  • Animated GIFs - they display as still images (first frame) in cards. Users have to click through to see animation.
  • Card type mismatch with image aspect - a summary card with a wide hero image gets center-cropped to square, often losing subject matter.
  • Card Validator deprecation - X retired the public Card Validator in 2022. You now have to actually tweet the URL (or use a private test account) to see rendering. This makes pre-publish previewing more valuable than it used to be.
  • Domain-level blocks - X maintains a list of domains whose cards are suppressed (spam, abuse, disputes). If your card stubbornly refuses to render and every other debug step passes, the domain may be shadow-limited.

Card Spec Background

Twitter Cards were introduced in 2012 and formalized over several revisions. The current supported types are summary, summary_large_image, app (for mobile app install prompts, rarely used outside app marketing), and player (for embedded video/audio, requires whitelisting via a form submission to X). The required properties are twitter:card and twitter:title; everything else is effectively optional but cards render poorly without twitter:description and twitter:image. Character limits per the spec are 70 for title and 200 for description, but X's client often truncates titles at 50 characters on mobile where card height is tighter. The twitter:image:alt property (up to 420 characters) exposes alt text for screen readers, which X does read aloud in its accessibility modes.

When You Should Prefer Open Graph Alone

If you already have a clean Open Graph implementation, adding Twitter Cards on top is 80% duplicated markup for marginal benefit: X falls back to OG by design, and the fallback works fine for the common case. The case for maintaining dedicated Twitter tags is specifically when you want different text or imagery on X than on Facebook/LinkedIn - for example, a shorter tagline optimized for X's reading context or an image with X-native aspect cropping. For validating rendering after publishing, your best current options are tweeting the URL from a test account, using a tool like Metatags.io for visual previews, or running curl -A "Twitterbot/1.0" https://your-url to simulate what the scraper actually sees.

Frequently Asked Questions

Is <code>summary_large_image</code> always better than <code>summary</code>?

Not universally. Large image cards dominate the timeline and generally win on engagement for visual content (product shots, blog hero images, event posters). But for news snippets, short updates, or text-heavy content where the image is decorative, a small <code>summary</code> card delivers the same click-through with less visual noise and less image bandwidth cost. Many publishers A/B test both per article type.

Why was the Card Validator retired?

X retired the public Card Validator in 2022 as part of broader platform cleanup after the ownership change. The stated reason was that the tool was seldom-used and expensive to maintain. In practice the retirement pushed most publishers toward third-party preview tools and silent testing via throwaway accounts. X has not announced plans to restore a first-party validator.

Do I need a verified X account for cards to render?

No. Any public page with correctly formatted <code>twitter:*</code> or fallback <code>og:*</code> tags will render a card when its URL is tweeted, regardless of the tweeter's account status. Verification (blue checkmark) affects tweet visibility and algorithmic reach, not card rendering. The <code>twitter:creator</code> and <code>twitter:site</code> handles are display attribution and do not require verification.

What image sizes work best?

For <code>summary_large_image</code>, 1200x628 at 2:1 aspect ratio is the canonical sweet spot; X will accept up to 4096x4096 but downsamples for display. For <code>summary</code>, use a square image at least 144x144 and no larger than 4096x4096. Keep file size under 5MB (PNG, JPEG, WebP, GIF). Images must be hosted over HTTPS with valid certificates.

How long does X cache card data?

Roughly seven days for the card metadata and associated image. Unlike Facebook, X does not offer a public cache-bust endpoint, so the only reliable refresh path is to wait or slightly modify the URL (for example, by adding a cache-busting query parameter, which creates a new cache key). For high-stakes content, test with a staging URL before publishing to the production URL.

What is <code>twitter:app</code> used for?

The <code>app</code> card type displays a mobile app install prompt inline when a link is opened in X's iOS or Android client. You provide <code>twitter:app:name:iphone</code>, <code>twitter:app:id:iphone</code>, and <code>twitter:app:url:iphone</code> (and googleplay equivalents), and X deep-links users into the app if installed or prompts an install otherwise. It is niche - only useful if you are actively driving app installs.

Why is my card rendering without an image on X but fine everywhere else?

Three common causes: the image host blocks the <code>Twitterbot/1.0</code> user agent (some CDNs treat it as a bot and 403 it); the image is hotlink-protected and X does not send a referer header; or the image exceeds 5MB. Run <code>curl -A "Twitterbot/1.0" -I https://your-image-url</code> - if you get anything other than 200 OK with an image Content-Type, that is the issue.

Do player cards still work?

Yes, but they require explicit approval via an application form that X takes weeks to process, and approval is granted inconsistently. For most embedded-video use cases, linking to a YouTube or Vimeo URL (which already ships optimized player cards by arrangement with X) is more practical than getting your own player card approved.

Does <code>twitter:creator</code> affect SEO?

Not for Google. Google indexes Twitter card tags as metadata but does not use <code>twitter:creator</code> as an authorship signal for its own ranking - Google discontinued <code>rel="author"</code> in 2014 and now derives authorship from structured data (<code>schema.org/Article</code> with <code>author</code>). The <code>twitter:creator</code> tag is display-only on X itself.

Is the preview generated locally?

Yes. The card layout is a Preact component that renders your form values into an in-browser mock of the X card frame - the exact rounded corners, typography stack (SF Pro on iOS, Helvetica Neue on desktop, Roboto on Android), dark and light theme variants. Your title, description, and image URL are never sent anywhere; the image is loaded directly from its host by your own browser.

Can I use HTML inside <code>twitter:description</code>?

No. The scraper strips HTML tags during parsing and renders the resulting plain text. Line breaks (<code>\n</code>) are also collapsed to spaces. If you need emphasis, Unicode character variants (bold Unicode letters, italic Unicode letters) work but are noisy and bad for accessibility - plain prose with a strong lede is usually more effective.

Should I worry about X deprecating cards entirely?

No announced deprecation. X still renders cards and Twitterbot still scrapes. That said, the platform's direction has been volatile, so treat cards as nice-to-have rather than primary distribution. Open Graph tags are a robust fallback.

More SEO & Web Tools

Google SERP Preview

Preview how your page appears in Google search results with character count indicators.

Open tool

Heading Structure Analyzer

Extract and visualize H1-H6 heading hierarchy with SEO issue detection.

Open tool

Hreflang Tag Generator

Generate hreflang link tags for multilingual websites with x-default support.

Open tool

Keyword Density Checker

Analyze word frequency with single words, bigrams and trigrams with density percentages.

Open tool

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card tags.

Open tool

Open Graph Preview

Preview how your page looks when shared on Facebook and LinkedIn.

Open tool