Twitter Card Preview Guide
How to preview and test Twitter Cards before posting — using the compose window, developer tools, and third-party simulators.
Testing Twitter Cards has become harder since X discontinued its public Card Validator tool. But there are still several reliable ways to preview how your card will render before sharing a link with your audience.
Method 1: The Tweet Compose Window
The simplest method is to use X itself:
- Open x.com and click the compose tweet button.
- Paste your URL into the text area.
- Wait 2–5 seconds — the preview card will render below the text input.
- Verify the title, description, and image are correct.
- Delete the tweet draft (no need to post).
This shows exactly what your followers will see. However, it requires an X account and only tests one URL at a time.
Method 2: Open Graph Inspector (Multi-Platform)
Our Open Graph Inspector simulates X’s card rendering alongside Facebook, LinkedIn, Discord, WhatsApp, Slack, and Telegram. Enter any URL and see how the preview card looks across all platforms simultaneously.
The Inspector also audits your Twitter Card tags for:
- Missing
twitter:cardtype declaration - Missing or undersized images
- Title and description length issues
- Fallback chain analysis (which OG tags X will use as fallbacks)
Method 3: curl With Twitterbot User-Agent
To see the raw HTML that X’s crawler receives, simulate its user-agent:
curl -A "Twitterbot/1.0" -s https://your-url.com | grep -i 'twitter:\|og:'This output shows every Twitter Card and Open Graph tag in the server-rendered HTML. If tags are missing from this output but present when you inspect the page in a browser, your tags are being rendered client-side — which X’s crawler cannot see.
Method 4: Browser DevTools
Open your page in Chrome DevTools and inspect the <head> element:
- Right-click the page → View Page Source (not Inspect Element).
- Search for
twitter:card,twitter:title,twitter:image. - Verify the values match your expected content.
Important: Use “View Page Source” specifically, not the Elements panel. The Elements panel shows the live DOM after JavaScript execution, while “View Page Source” shows the initial HTML response — which is what crawlers see.
What to Check
When previewing your Twitter Card, verify:
| Check | Expected Result |
|---|---|
| Card type | summary_large_image for articles, summary for profiles |
| Title | Under 70 characters, no truncation |
| Description | 1–2 sentences, under 200 characters |
| Image | Clear, properly cropped, no pixelation |
| Image aspect ratio | 1.91:1 for large image, 1:1 for summary |
| Domain display | Your domain name shown below the card |
Troubleshooting Missing Previews
If the preview card doesn’t render:
- Check
twitter:cardis present — Without this tag, X won’t render any card. - Verify image URL is accessible — X must be able to fetch the image. Test with
curl -I https://your-image-url.png. - Check for crawler blocks — Ensure your robots.txt doesn’t block
Twitterbot. - Wait for cache to expire — X caches card data. New URLs may take a few minutes to render.
For a comprehensive troubleshooting workflow, see Twitter Card Not Showing? How to Fix It.