What is a Twitter Card?

A Twitter Card is a rich preview that appears when someone shares your URL in a tweet. Without Twitter Card tags, Twitter shows only a plain link. With them, Twitter displays a formatted card showing your image, title, and description.

What is the difference between summary and summary_large_image?

The summary card shows a small 120x120 thumbnail to the left of the title and description. The summary_large_image card shows a large banner image above the title and description.

What is the minimum image size for a Twitter Card?

For summary cards the image must be at least 120x120 pixels. For summary_large_image the image must be at least 300x157 pixels.

What is the twitter:site tag?

The twitter:site tag is the Twitter handle of the website or publisher associated with the page, prefixed with @. This appears as attribution in some card displays.

What is the twitter:creator tag?

The twitter:creator tag is the Twitter handle of the individual author of the content on the page. It is used for article pages to attribute authorship to a specific person.

How long does it take for card changes to appear?

Twitter caches card metadata. Use the Card Validator to force a fresh fetch. The cache typically updates within a few minutes for the validator tool.

Do Twitter Card tags work on X (formerly Twitter)?

Yes. After Twitter rebranded to X the card system remained the same. The meta tags still use twitter: as the prefix and function identically.

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

Twitter will fall back to og:title, og:description, and og:image if no twitter: tags are present. However, dedicated Twitter Card tags give you more control over the card type.

What happens if my image URL is not accessible?

If Twitter cannot fetch the image from the URL you provide, it will display the card without an image or not display a card at all. Ensure the image is publicly accessible and served over HTTPS.

Is there a character limit for Twitter Card title?

Twitter recommends keeping the card title under 70 characters. Longer titles may be truncated in the card display depending on the card type.

Twitter Card Preview

New

Preview how your URL will look when shared on Twitter/X with light and dark mode mockups.

Free Forever

No Signup Required

No Files Stored

Title

Description

Image URL

Site Handle

Creator Handle

Dark mode

example.com

No title set

No description set

Related Tools

Open Graph Preview

developer

See how your link looks when shared on Facebook, LinkedIn, WhatsApp, Slack, and Discord.

Try it free

Meta Tag Generator

developer

Generate complete HTML meta tags including Open Graph and Twitter Card with live SERP preview.

Try it free

Embed this tool

Add this tool to your website or blog with a single iframe snippet.

<iframe src="https://dukotools.com/tools/twitter-card-preview?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="twitter-card-preview tool"></iframe>

About Twitter Card Preview

Twitter Card Preview shows you exactly how your URL will look when someone shares it on Twitter in both light and dark mode before you ever publish the page. Twitter renders two card formats: the compact summary card places a small square thumbnail on the left, while the summary_large_image card places a full-width image above the title and description. This tool renders both formats accurately. The dual light/dark preview side by side lets you verify legibility on both themes simultaneously. The validation panel checks each field against Twitter requirements and shows a pass or fail badge per field. The HTML output section shows the exact meta tags you need to paste into your page head. A How to Test section explains how to use the Twitter Card Validator and what the preview cache means.

Key Features

Dual Light / Dark Preview
Shows accurate Twitter card mockups in both light and dark UI themes simultaneously.
Summary and Large Image Modes
Renders both card types with correct dimensions and layout switching instantly.
Per-Field Validation Badges
Pass or fail badges per field against Twitter character limits and image requirements.
HTML Meta Tag Output
Generates the exact twitter:card, twitter:title, twitter:description, twitter:image, and handle tags.
Shareable URL
Encodes all card values into the URL for bookmarking or sharing configurations.

How to Use

1
Choose card type
Select summary for a compact card or summary_large_image for a full-width image card.
2
Fill in card content
Enter the title, description, and image URL. Add your site handle and creator handle.
3
Review both previews
Check the light mode and dark mode mockups simultaneously to verify legibility on both themes.
4
Fix validation warnings
Check the validation panel. Red fail badges indicate fields that exceed limits or fail requirements.
5
Copy meta tags
Click the Copy button to grab all Twitter meta tags and paste them into your page head.

Real-World Use Cases

Content Marketing

A content marketer previews article cards before publishing to ensure the image and headline look compelling in the Twitter timeline.

Developer QA

A developer checks both light and dark mode previews to ensure the card image has sufficient contrast in both themes.

Social Media Manager

A social media manager verifies Twitter Card tags are working correctly before scheduling a major campaign post.

Frequently Asked Questions

Related Free Tools

Explore these tools that work great alongside Twitter Card Preview:

Open Graph Preview

See how your link looks when shared on Facebook, LinkedIn, WhatsApp, Slack, and Discord.

Meta Tag Generator

Generate complete HTML meta tags including Open Graph and Twitter Card with live SERP preview.