T
ToolHQ

Twitter Card Preview

Preview how your page looks when shared on Twitter/X.

<meta name="twitter:card" content="summary_large_image">

How to use Twitter Card Preview

1

Paste Your URL Into the Input Field

Copy your complete webpage URL and paste it into the 'Enter URL' text box at the top of the tool. Make sure the URL includes the protocol (http:// or https://) and click the blue 'Preview' button below the input field.

2

Review the Card Preview on the Right Panel

The live preview displays instantly on the right side showing your Twitter Card layout. You'll see the card title, description, image thumbnail, and domain name exactly as it appears when someone shares your link on Twitter/X.

3

Check Meta Tags in the Code Inspector

Scroll down to view the 'Meta Tags Found' section showing your Open Graph and Twitter Card meta tags in code format. Verify og:title, og:description, og:image, twitter:card, and twitter:image tags are present and correctly formatted.

4

Optimize Your Meta Tags if Needed

If tags are missing or incorrect, update your website's HTML head section with proper Open Graph meta tags. Use og:title for headline (max 60 chars), og:description for summary (max 160 chars), and og:image for preview image (min 1200x630px).

5

Re-preview After Updates and Share

After updating your meta tags, paste the URL again and click Preview to confirm changes appear correctly. Once satisfied, your card will display properly when shared on Twitter/X, LinkedIn, and Facebook.

Related Tools

💻

Open Graph Preview

Preview how your page looks when shared on Facebook.

💻

Meta Tag Generator

Generate HTML meta tags for SEO and social media.

💻

Robots.txt Generator

Generate a robots.txt file with a visual builder.

Twitter Card preview tool: see how your URL looks on X before sharing

Twitter Card preview tool: see how your URL looks on X before sharing

Paste any URL and see exactly how it appears as a Twitter/X Card, ToolHQ's Twitter Card preview tool reads your page's meta tags and renders the card live. Only the URL you enter is fetched to read its Twitter Card meta tags, no personal data is stored.

A Twitter Card is the rich preview that appears when someone shares a link on X (formerly Twitter). Instead of just a bare URL, a properly configured page shows a card with a title, description, and image. The difference between a bare link and a rich card affects click-through rates significantly, a large image card is dramatically more visible in a feed than a plain text link.

Twitter deprecated its official Card Validator tool in 2022, leaving developers and marketers without a quick way to test their Twitter Card markup before sharing. ToolHQ's preview tool fills that gap.

Key takeaways

  • Twitter Cards are controlled by meta tags in your page's <head> section
  • Two main card types: Summary (small thumbnail) and Summary Large Image (full-width image)
  • Only the URL you enter is fetched to read its Twitter Card meta tags, no personal data is stored
  • Twitter deprecated its official Card Validator in 2022, use ToolHQ to test instead
  • Fixing missing or wrong Twitter Card tags is a quick SEO and social sharing win

How Twitter Cards work

When someone shares a link on X, the platform crawls the URL and looks for specific <meta> tags in the page's HTML head. These tags tell X what title, description, image, and card type to show. If the tags are missing or misconfigured, X falls back to a plain text link.

The core Twitter Card meta tags are:

Meta tag What it controls Example value
twitter:card Card type summary_large_image
twitter:title Card headline (max 70 chars) Your article title
twitter:description Card description (max 200 chars) A brief summary
twitter:image Image URL (min 144×144px, max 4096×4096px) https://example.com/og.jpg
twitter:site Your @username @yourbrand

The twitter:card value is the most critical. If it is missing, X shows a bare link. If set to summary, it shows a small square thumbnail alongside the title and description. If set to summary_large_image, it shows a wide, full-bleed image above the title, the card format that dominates the feed visually.

The Twitter/X Developer Cards documentation describes all supported card types. For the Open Graph protocol that complements Twitter Cards (and is used by Facebook, LinkedIn, and other platforms), ogp.me is the official specification.

Summary vs. summary large image: which card type to use

Summary card (twitter:card = summary):

  • Shows a small square thumbnail on the left (minimum 120×120px)
  • Title and description appear to the right of the thumbnail
  • Good for articles, product pages, and any content where a small image is sufficient
  • More compact, fits better in conversations and reply threads

Summary Large Image card (twitter:card = summary_large_image):

  • Shows a wide, full-bleed image above the title and description
  • Image must be at least 300×157px and ideally 1200×628px (2:1 aspect ratio)
  • Significantly more attention-grabbing in a feed
  • Best for blog posts, landing pages, product launches, and news articles

Most content brands use summary_large_image for blog posts and major pages. The large image card is harder to scroll past and creates a stronger brand impression.

Twitter Cards also support other types (app, player) for app download links and embedded media, but summary and summary_large_image cover the vast majority of everyday website sharing.

How to use ToolHQ's Twitter Card preview tool

  1. Open the tool. Go to https://www.toolhq.app/tools/twitter-card-preview.

  2. Enter the URL. Paste the full URL of the page you want to preview (including https://).

  3. Fetch the card. Click Preview. The tool fetches the URL, reads its <meta> tags, and renders the Twitter Card exactly as X would display it.

  4. Review both card types. The preview shows you what the Summary and Summary Large Image versions look like, so you can verify which type your page is configured for.

  5. Fix any issues. If the preview shows a missing image, a truncated title, or the wrong card type, edit your page's meta tags and re-run the preview.

Only the URL is fetched, the tool reads the page's meta tags like X's crawler does. No personal data is stored or transmitted.

Common Twitter Card problems and how to fix them

No card appears (bare URL): Your page is missing the twitter:card meta tag. Add <meta name="twitter:card" content="summary_large_image"> to your <head>.

Wrong image appears: Check that twitter:image points to a valid, publicly accessible image URL. Images behind logins, paywalls, or on localhost will not work. Also verify the image meets the minimum dimensions.

Title is cut off: Twitter truncates titles over 70 characters. Rewrite twitter:title to be shorter.

Description is missing: The twitter:description tag is absent or empty. Add a compelling 1-2 sentence description.

X is showing an old image: X and social platforms cache card data. After you update your meta tags, you can force a cache refresh by running the URL through a card validator, the fetch triggers a re-crawl.

Using Open Graph as fallback: If twitter: tags are absent, X falls back to the og: Open Graph equivalents. It is good practice to have both, but og: tags alone are usually sufficient.

Mei, a content marketer at a B2B software company, was sending a newsletter with links to new blog posts. She noticed clicks from X were far below expectations. She ran the blog post URL through ToolHQ's Twitter Card preview and saw that the twitter:card tag was set to summary, showing only a tiny thumbnail. She updated the template to use summary_large_image and set a properly sized 1200×628px image for each post. The following week's newsletter links generated 3x more clicks from X than the previous month's average.

Preview your Twitter Card now, free, instant, no account needed

Adding Twitter Card tags to your website

WordPress: Most SEO plugins (Yoast SEO, Rank Math, All in One SEO) automatically generate Twitter Card meta tags from your post title, excerpt, and featured image. Set the card type to summary_large_image in the plugin's Social settings.

Static HTML: Add these tags inside the <head> element of your page:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="A brief description of the page">
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg">
<meta name="twitter:site" content="@yourusername">

Next.js/React: Use the <Head> component or a meta tag library. The Vercel OG image generation library can create Twitter Card images automatically from templates.

Webflow: Webflow has built-in Open Graph settings per page. Set the OG image there, X will use it as the Twitter Card image even without explicit twitter: tags.

For checking Open Graph tags across platforms (Facebook, LinkedIn, Slack), the Open Graph preview tool renders previews for those platforms. The meta tag generator creates complete meta tag blocks for new pages. For resizing your OG images to the correct dimensions, the social media image resizer outputs platform-optimized sizes.

Dmitri, a freelance developer, was doing a technical SEO review for a client's e-commerce site. He ran the homepage and five product pages through ToolHQ's Twitter Card preview. Three product pages had broken card images (pointing to a deleted image URL), two had titles over 70 characters, and one had no twitter:card tag at all. He documented all six fixes, sent the client a prioritized list with screenshots from the preview tool, and implemented the changes in an afternoon. The client's social sharing improved noticeably the following month.

Frequently asked questions

Why did Twitter deprecate its official Card Validator?

Twitter (now X) removed its Card Validator tool in 2022 without a stated replacement. Third-party tools like ToolHQ's preview tool fill the gap by fetching URLs and rendering cards the same way X's crawler does.

Does ToolHQ store the URLs I check?

Only the URL you enter is fetched to read its Twitter Card meta tags. No personal data is stored or transmitted. The preview is generated from the meta tags the tool reads and is not stored anywhere.

What image size should I use for a Summary Large Image card?

Use 1200×628 pixels (approximately 1.91:1 aspect ratio). The minimum is 300×157 pixels. Images smaller than 144×144 pixels will not display at all. Use JPG or PNG format.

Do Twitter Card tags override Open Graph tags?

Both work. X checks for twitter: tags first and falls back to og: equivalents if they are not present. For simplicity, some sites set only og: tags and let X use them. For maximum control over how your content appears specifically on X, set both.

Why is my card showing a different image than expected?

X may be serving a cached version of your card. After updating meta tags, fetching the URL through a card validator (like ToolHQ's) typically triggers a re-crawl. It can take a few minutes for X to refresh the cached card.

The short version

Twitter Cards turn bare URLs into rich, visual previews in X feeds. The card type (summary vs. summary_large_image), the image size, the title length, and the description quality all affect how compelling your shared links look.

ToolHQ's Twitter Card preview tool fetches any URL, reads its meta tags, and renders the card exactly as X would display it. Only the URL is fetched, no personal data stored. Quick to use, requires no account.

For related social sharing tools, the Open Graph preview checks Facebook and LinkedIn previews, the meta tag generator builds complete meta blocks, and the UTM builder adds campaign tracking to the URLs you share.

Preview your Twitter Card now, free at ToolHQ