What is a Twitter Card?

A Twitter Card is a rich link preview displayed when someone shares a URL on Twitter or X. Without Twitter Card tags, a shared link appears as plain text with just the URL. With them, you get a visual card with title, description, and image that draws attention in the feed.

Does Twitter Card affect SEO?

Twitter Card tags do not directly affect search engine rankings. They control how links look when shared on Twitter and X. A compelling card improves click-through rate from social shares, which drives traffic that can indirectly support SEO.

Why is my Twitter Card not showing?

Three common causes: the page is not publicly accessible or was recently published and has not been crawled yet; the twitter:card tag is missing or misspelled; or the image URL is blocked by CORS or authentication. Use Twitter's Card Validator to diagnose the exact issue.

Can I use Open Graph tags instead of Twitter Card tags?

Twitter reads Open Graph tags as a fallback if Twitter Card tags are absent. However, Twitter Card tags take priority when both are present. It is best to set both explicitly for maximum compatibility.

What is the twitter:creator tag for?

The twitter:creator tag specifies the Twitter handle of the page's author (as opposed to twitter:site, which is the brand account). When set, Twitter links the card to the author's profile, which can increase follower attribution. Tracking this metric alongside conversion data gives a more complete picture of how changes affect actual business outcomes.

Do I need to register my domain with Twitter to use Cards?

No. Twitter Cards work on any public page with the correct meta tags. You do not need to register or verify your domain. Cards are displayed automatically when Twitter's crawler reads the tags during link expansion.

Twitter / X Card Preview

The Twitter Card Preview shows you how your page will look when shared on Twitter or X before you publish. Choose your card type (summary or summary_large_image), enter your title, description, image URL, and site handle, and see the card render in both light and dark mode.

Title

15 / 70 chars

Description

49 / 200 chars

Image URL

Using placeholder image

Image alt textSite handleCreator handle (optional)

Live preview

@yoursite

Your Page Title

Your description for Twitter and X link previews.

Twitter Card HTML

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yoursite">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your description for Twitter and X link previews.">

Twitter Card Validator

Test with Twitter's official validator after publishing.

X/Twitter may display cards differently based on content policies and device. Use Twitter's Card Validator for final verification.

How this tool works

The Twitter Card preview renders how a shared URL will appear on X by parsing the twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site meta tags from the page HTML. The tool supports all four card types: summary (small square image left of text), summary_large_image (full-width banner above text), app (App Store and Google Play links), and player (inline media embed). It renders the appropriate layout for whichever type it detects. If no twitter: tags exist, the tool falls back to og: equivalents, which X also reads as a secondary source. Image requirements differ by type: summary cards require a minimum 144x144px image in a 1:1 ratio; summary_large_image cards require a minimum 300x157px image in a 2:1 landscape ratio. Key assumption: the URL must be publicly accessible for the fetch to succeed. Edge case: X requires a minimum image file size for summary_large_image cards, and images under approximately 1MB may cause the card to fall back to the summary format or render broken, even when pixel dimensions meet the requirements. Always check actual file size alongside image dimensions when debugging a broken card.

Worked example

A blog post uses summary_large_image with a 1200x628 image and a title under 70 characters. The preview renders a large image dominating the feed with the title and description below. Switching to summary shows the compact thumbnail layout on the right side - useful for comparing which card type better suits the content before publishing.

Frequently asked questions

What is a Twitter Card?
A Twitter Card is a rich link preview displayed when someone shares a URL on Twitter or X. Without Twitter Card tags, a shared link appears as plain text with just the URL. With them, you get a visual card with title, description, and image that draws attention in the feed.
Does Twitter Card affect SEO?
Twitter Card tags do not directly affect search engine rankings. They control how links look when shared on Twitter and X. A compelling card improves click-through rate from social shares, which drives traffic that can indirectly support SEO.
Why is my Twitter Card not showing?
Three common causes: the page is not publicly accessible or was recently published and has not been crawled yet; the twitter:card tag is missing or misspelled; or the image URL is blocked by CORS or authentication. Use Twitter's Card Validator to diagnose the exact issue.
Can I use Open Graph tags instead of Twitter Card tags?
Twitter reads Open Graph tags as a fallback if Twitter Card tags are absent. However, Twitter Card tags take priority when both are present. It is best to set both explicitly for maximum compatibility.
What is the twitter:creator tag for?
The twitter:creator tag specifies the Twitter handle of the page's author (as opposed to twitter:site, which is the brand account). When set, Twitter links the card to the author's profile, which can increase follower attribution. Tracking this metric alongside conversion data gives a more complete picture of how changes affect actual business outcomes.
Do I need to register my domain with Twitter to use Cards?
No. Twitter Cards work on any public page with the correct meta tags. You do not need to register or verify your domain. Cards are displayed automatically when Twitter's crawler reads the tags during link expansion.