TryUnfurl

Check How Your Links Unfurl for FREE!

See exactly how your webpage will appear when shared on social media, Slack, Discord, and messaging apps.

Try It Now →

Twitter Card Tags — Complete Reference + URL Unfurl Testing Guide

Twitter Card tags are HTML meta tags that control how links look when shared on X (Twitter). They define the card type, title, description, and image — independently from your Open Graph tags. Set them right and your URL unfurl on X gets the big hero card with a 2:1 image that drives the click. Miss them and X either falls back to your Open Graph tags or, worse, shows no card at all.

This guide is the complete Twitter Card reference: what each tag does, every card type, HTML implementation examples, image sizing that works on both mobile and desktop, how X's URL unfurl process interacts with Open Graph, step-by-step testing, a Twitter Card Validator vs other tools comparison, troubleshooting for common issues, and advanced tips most implementation guides skip.

→ Test your Twitter Card tags with TryUnfurl

How URL Unfurling Works on X (Twitter)

URL unfurling on X follows the same three-step pipeline as every other platform, with a Twitter-specific priority order:

  1. Twitterbot fetches your page server-side, with no JavaScript execution.
  2. The platform parses your HTML <head> in this priority order: Twitter Card tags first, then Open Graph, then standard HTML meta.
  3. X renders the card according to twitter:card type (summary, summary_large_image, app, or player).

The result is cached per URL; running the URL through the Card Validator forces a re-fetch.

Three Twitter-specific quirks worth knowing:

What Are Twitter Cards?

Twitter Cards are X's own metadata format, introduced to give publishers control over how shared links render in the Twitter/X feed. They use <meta name="twitter:*"> tags in the HTML <head>.

If twitter:* tags are absent, X falls back to og:* tags. So if your Open Graph tags are already set up, Twitter Cards are optional — but they give you extra precision, can show a different image or title specifically for X, and ensure your card actually renders instead of being silently skipped.

Twitter Card Types

Card type twitter:card value What it shows Best for
Summary summary Small square thumbnail + title + description Text-heavy articles, short posts
Summary Large Image summary_large_image Large hero image above title + description Most websites and blog posts
App app Mobile app with store download links App marketing pages
Player player Inline video or audio player Video/audio content

For most websites and articles, use summary_large_image. It produces the most prominent visual card in the feed and drives significantly higher click-through rates than the plain summary card.

All Twitter Card Tags

Tag Required Purpose
twitter:card Yes Card type (see table above)
twitter:title Recommended Title on X (max 70 chars)
twitter:description Recommended Description on X (max 200 chars)
twitter:image Recommended Absolute URL to image
twitter:image:alt Recommended Alt text for accessibility
twitter:site Optional Your site's X @username
twitter:creator Optional Author's X @username
twitter:player Player only URL of the player iframe
twitter:player:width Player only Player iframe width
twitter:player:height Player only Player iframe height
twitter:app:name:iphone App only App name on iOS
twitter:app:id:iphone App only App Store ID
twitter:app:name:googleplay App only App name on Android
twitter:app:id:googleplay App only Google Play ID

HTML Implementation Example

<head>
  <!-- Open Graph (used by all other platforms) -->
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="Your page description.">
  <meta property="og:image" content="https://yourdomain.com/og-image.jpg">

  <!-- Twitter / X Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Page Title">
  <meta name="twitter:description" content="Your page description.">
  <meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">
  <meta name="twitter:image:alt" content="Descriptive alt text for the image">
  <meta name="twitter:site" content="@yourusername">
</head>

Tip: In most cases your OG and Twitter Card values will be identical. The main reason to set them separately is if you want a different image crop or title specifically for X, or if your analytics team tracks X traffic with different copy.

Image Requirements for Twitter Cards

Card type Minimum size Recommended size Aspect ratio
summary 144 × 144 px 400 × 400 px 1:1 (square)
summary_large_image 300 × 157 px 1200 × 628 px 1.91:1

Twitter Card vs Open Graph — Priority on X

X reads metadata in this order:

  1. twitter:title → then og:title → then <title>
  2. twitter:description → then og:description → then meta name="description"
  3. twitter:image → then og:image

This means if you only have Open Graph tags, X will still generate a card using them. But explicitly setting twitter:card is still necessary — without it, X may not show a card at all even if OG tags are present.

How to Test URL Unfurl on X — Step-by-Step

Testing your Twitter Card before a high-stakes tweet is a one-minute habit that prevents broken URL unfurls from going live.

Step 1 — Run the URL through TryUnfurl

Paste the URL into TryUnfurl. You'll see the rendered X card alongside Facebook, LinkedIn, Slack, Discord, and iMessage, plus the raw Twitter Card and Open Graph tags the crawler actually reads. No X account required.

Step 2 — Confirm twitter:card is set

This is the one tag that's effectively required. If it's missing, X won't render a card even if everything else is in place.

Step 3 — Verify twitter:image is absolute HTTPS and under 5 MB

Open the image URL in an incognito window. If it doesn't load publicly there, it won't load for Twitterbot.

Step 4 — Run the Twitter Card Validator

cards-dev.twitter.com/validator re-fetches the URL and re-renders the card against the latest tags. Each validation effectively clears X's cache for that URL.

Step 5 — Sanity-check with a draft tweet

Compose a draft tweet with the URL (don't publish). If the card renders correctly in the composer, it'll render correctly when you publish.

Step 6 — Bulk-test for launches

For a launch with multiple URLs, use the bulk URL unfurl checker to run up to 100 URLs in one pass and export the Twitter Card detection as CSV.

Twitter Card Validator vs Other Tools

When you're debugging an X URL unfurl, you have multiple tools to choose from. Each has a specific job.

Tool Account needed Shows X card Forces cache refresh Shows other platforms Best for
Twitter / X Card Validator Yes Yes Yes No Final validation + forcing X to re-scrape
TryUnfurl No Yes N/A (live fetch) Yes (all major platforms) Fast multi-platform testing, no login
Opengraph.xyz No Basic No Generic card Quick OG tag inspection
Metatags.io Partial Yes No Yes Side-by-side previews, some caching
HeyMeta No Tag check only No No Basic tag completeness

Why twitter card validator vs TryUnfurl?

Use TryUnfurl first — it's faster (no login), always fetches live, and shows every platform in one view. Once the tags are correct, use the Twitter Card Validator specifically to force X's cache to refresh for that URL. The two tools complement each other rather than compete.

Troubleshooting Common Twitter Card Issues

Deeper diagnosis lives in our link preview troubleshooting guide.

Advanced Implementation Tips

Common Twitter Card Mistakes

Test Your Twitter Card Tags

Paste your URL into TryUnfurl to see how your Twitter Card renders alongside every other platform preview — no X account, no Card Validator login, instant results.

→ Test your Twitter Card now · → Bulk-check up to 100 URLs

Related Guides

For more information, visit “What is Unfurling?”, our complete guide to link previewing on the internet and social media.