twittercard

Testing

How to test X Cards without the Card Validator

The Card Validator stopped showing previews in 2022. A practical testing routine for X Cards today: composer preview, markup checks, curl, and testing before launch.

Short answer

Since August 2022 the Card Validator no longer shows card previews, so test X Cards by checking the markup with an inspector, confirming Twitterbot can fetch the page and image, and pasting the live URL into the X post composer, which shows the real preview without publishing.

Key takeaways

  • The composer is now the official preview: paste the URL, look, discard the draft.
  • Check markup offline first; it catches most errors before X ever sees the page.
  • Use a query string to force a fresh fetch while testing.
  • Staging sites behind a login cannot be previewed by X at all.

For years the answer to "how do I test my Twitter Card?" was a URL: the Card Validator. You pasted a link and saw the card. That stopped in August 2022, and a lot of tutorials still have not caught up.

What happened to the Card Validator?

In August 2022 Twitter removed the preview from the Card Validator and pointed developers to the post composer instead. Twitter's reasoning was that the validator's previews did not always match what the various apps actually displayed. At the same time, entering a URL in the validator stopped updating the stored card. So the validator can no longer show you a card or refresh one, and the composer, on the web or in the iOS and Android apps, is where X's own preview lives.

What is the testing routine now?

Check the markup, check access, then look at the real preview in the composer. In that order, because the first two steps are faster and explain most failures.

  1. Markup. View the page source, copy the head and paste it into the Card Preview & Meta Inspector. Fix anything marked red. This works for pages that are not public yet.
  2. Image. Open the image URL in a private window, and run the file through the image checker if you are unsure about size or format.
  3. Access. Make sure robots.txt and your firewall let Twitterbot fetch both the page and the image. A quick sanity check is curl -I -A "Twitterbot/1.0" https://example.com/page/.
  4. Real preview. Open the X composer, paste the URL, and wait a few seconds for the card. Do not post; close the composer or discard the draft.
  5. Fresh fetch. If you have tested the URL before, add a query string such as ?v=3 so X fetches it again instead of reusing the stored card.

How do I test before launch?

Check markup privately, then put the page somewhere public for the final look. X can only preview URLs it can download. That rules out localhost, VPN-only staging servers and anything behind HTTP authentication.

Options that work:

  • A public preview deployment. Many hosts give each branch a public URL. Allow Twitterbot on it (preview deployments often send noindex, which is fine; a robots.txt Disallow: / is not).
  • An unlisted page on production. Publish the page without linking it from navigation, test, then announce.
  • A tunnel from a local server to a temporary public URL, for a quick look during development.

Remember that a card fetched from a preview URL is stored for that URL, not for your final address. When the real page goes live, the first post of the real URL triggers a fresh fetch.

What can the composer not tell you?

It shows the card, not the reason it looks wrong. If the preview is missing or stale, the composer gives no error message. That is where the earlier steps come in: the inspector tells you which tag supplied each value, your server logs tell you whether Twitterbot got a 200, and the image checker tells you whether the file fits the rules.

Symptom in the composer Most likely cause Where to look
No card at all Missing twitter:card, blocked bot, or broken HTML Inspector, robots.txt, logs
Card without image Image URL relative, private, SVG or over 5 MB Image checker, private window
Small card instead of large twitter:card is summary or missing Inspector
Old title or image Cached card or cached image New query string; rename image
Wrong page's tags Redirect to another page, or a gate page curl -IL to follow redirects

Testing many pages at once

For a site with hundreds of pages, test the templates rather than every page. Pick one page of each type (home, article, product, category, tag), run each through the inspector, then spot-check a few in the composer. A simple script that fetches each URL in your sitemap and greps for twitter:card and og:image will catch any template that forgot them:

curl -s https://example.com/sitemap.xml | grep -o '<loc>[^<]*' | cut -c6- | while read u; do
  curl -s -A "Twitterbot/1.0" "$u" | grep -q 'twitter:card' || echo "missing card: $u"
done

Keeping it working

Cards break silently when templates change. Add a check to your build or deploy pipeline that fails if key pages lack twitter:card or an absolute og:image, and re-test in the composer after redesigns, CDN changes and security setting changes. Those three account for most cards that "suddenly stopped working".

Questions

Does the Card Validator still exist?

The page was kept for some debugging after 2022, but without the preview, and entering a URL no longer refreshes card data. For practical purposes the composer replaced it.

Do I have to publish a post to test?

No. The preview appears in the composer as soon as X has fetched the URL. Close the composer or delete the draft without posting.

Can I test a card on localhost?

X has to fetch the page from the internet, so localhost and private staging servers cannot be previewed on X. Check the markup locally with an inspector, then test on a public URL.

Are third-party 'card validators' accurate?

They can check your tags well, but none of them can show X's real rendering; they draw their own mockup, as our inspector does. Treat them as markup checkers.

Sources

Keep reading