What this Twitter Card validator tests
A Twitter Card validator is also called an X card checker, tester or debugger. This one fetches the HTML of a public page, or reads HTML you paste, and shows an approximate X preview first. It is not X's crawler: the actual card can differ because of X's rendering, access rules or cached copy.
The twitter:card tag requests a summary or summary_large_image layout. The optional twitter:title, twitter:description and twitter:image tags can replace the corresponding OG values for X. In this preview, missing Twitter title, description and image values fall back to og:title, og:description and og:image. The results also flag missing core OG metadata, since a complete sharing setup helps other services too.
The image check downloads the selected public file and reports its real dimensions, aspect ratio, byte size and accessibility. A separate twitter:image is checked independently when it differs from og:image. Optional account attribution tags such as twitter:site and twitter:creatorare not graded here. Fixes for HTML, Next.js and WordPress are available in the result, but you should inspect the deployed page again after applying them.
Twitter Card types: which one to use
For a product page, summary_large_image is a useful starting point when you have a wide image. Choose summary when a compact square thumbnail suits the link better. The other card types need more metadata and are outside this link-preview checker.
| Card type | Typical presentation | Best fit |
|---|---|---|
summary | Small square image and text | Compact link |
summary_large_image | Wide image and text | Product or article |
player | Embedded audio or video | Media page; not checked here |
app | App-focused card | Mobile app; not checked here |
A 1200 × 630 pixel image at about 1.91:1 is a practical wide-card canvas. A square image of at least 144 × 144 pixels suits the smaller summary treatment. Review the thumbnail rather than assuming the same crop will work in both layouts.
Why your Twitter Card is not showing
- An old card is cached. X may continue to show metadata it fetched earlier. Check the live page and image first. For a controlled test, try a temporary versioned URL such as
?v=2, but use the intended canonical URL when you publish and do not assume a query string will refresh an existing post. - The crawler cannot reach the page. Review robots rules, firewalls, bot challenges and image-host restrictions. This checker does not impersonate Twitterbot, so a pass here cannot prove X has access.
- The layout tag or image is missing. Without
twitter:card, you cannot request the card type you want. If bothtwitter:imageandog:imageare absent, there is no image for this checker to preview. - The image URL is unsuitable. Use an absolute, public HTTP or HTTPS address, preferably HTTPS. Confirm it returns an actual image without a login and keep it below this checker's 5 MB fetch limit.
- Tags arrive after page load. Put them in server-rendered
<head>markup. Metadata injected only by client JavaScript may be missed by sharing crawlers.
How to add Twitter Card tags
Add these tags to the page's <head> and replace the example values. Keep one metadata owner so a theme and plugin do not emit conflicting copies:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your page title">
<meta name="twitter:description" content="A short page summary.">
<meta name="twitter:image" content="https://example.com/card.png">
<meta name="twitter:site" content="@yourhandle">In Next.js App Router, set twitter: { card: "summary_large_image" }in your page or layout metadata, and provide a Twitter image when you want artwork different from the OG image. In WordPress, configure social sharing in the SEO plugin that already owns your tags, such as Yoast or Rank Math. Test the server's returned HTML after deployment; pasting local HTML can check tags early, but it cannot prove the public page or image is reachable.