OnSumoTools

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.

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 does the Twitter Card Preview Tool work step by step?

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.

What does a typical Twitter Card Preview Tool result look like?

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.

Related tools

What a card is

A Twitter or X card is the preview box under a shared link. It shows an image, a title and a short description. Without one, your link is a bare URL, and bare URLs get scrolled past.

This tool previews four types: summary, summary with large image, app and player. You can flip between light and dark mode, since people see your card both ways.

The tags

twitter:card sets the type. twitter:title, twitter:description and twitter:image fill it in. twitter:site names your account, and twitter:creator names the author. You don't need to register your domain.

If you skip the twitter tags, X falls back to Open Graph tags. So og:title and og:image can carry you. Many sites set both anyway, so each platform gets what it prefers.

Choosing a type

Summary with large image is the safe pick for articles. The image should be about 2 to 1, and bigger than 300 by 157 pixels. A plain summary shows a small square thumbnail, better for tools or docs. App and player cards are for specific cases, like a mobile app or an embedded video.

If your card doesn't show

Check that the image URL is public and over HTTPS. Check the file size, as large files can fail. Platforms cache cards, so an old version might stick around for a while after a fix.

Cards don't affect search rankings. They affect clicks from social. Copy-ready HTML is provided, and nothing leaves your browser.