X Card Validator: What to Check When Twitter Cards Look Wrong

If an X card looks wrong, the first instinct is usually to paste the URL into a validator and hope for a yes-or-no answer. That can help, but it is not the whole debugging job. A preview card is built from a small chain of decisions: which URL X fetched, which metadata was present in the first HTML response, which image was reachable, and whether X is still holding on to an older version.

Use this checklist when you need to test a card before posting, or when a card shows the wrong image, a tiny image, stale copy, or no preview at all.

Start with the card type

The twitter:card tag tells X what kind of card you are asking for. For most articles, landing pages, product pages, and campaign URLs, the expected value is usually:

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

Small cards are not always broken. Sometimes a small summary card is exactly what the page asked for. But if your team expected a wide image card, check the card type before you spend time resizing the image.

Run the URL through the Twitter/X card validator and confirm the resolved card type, image source, title, description, redirects, and Open Graph fallbacks from the same report.

Check the fields X can actually read

Card metadata belongs in the initial HTML response. If the values only appear after JavaScript runs, a normal browser may see them while a preview crawler does not.

For a standard large-image card, check these fields:

You do not always need separate Twitter-specific title, description, and image fields. Many sites deliberately let X fall back to Open Graph for some values. That is fine when the fallback is intentional. It is messy when nobody knows which tag is supposed to win.

Follow redirects before you judge the card

Debug the final URL, not the first URL someone copied from a campaign builder.

Check whether the shared URL:

• redirects through tracking links
• changes protocol or host
• adds or removes trailing slashes
• resolves to a canonical URL that disagrees with og:url
• serves different metadata to different environments

One redirect is normal. A chain with changing canonicals is where previews get unpredictable. If X fetches one URL, the browser displays another, and your metadata points to a third, the card may not reflect the page you thought you were testing.

Treat the image as its own request

If the image is missing, open the image URL directly. Then check it as if it were a page of its own:

• Is it public without cookies or login?
• Does it return a 200 response?
• Is the URL absolute?
• Is the image small enough to fetch quickly?
• Does the response content type match the file?
• Would the image still make sense after a center crop?

This is where a lot of real-world card bugs hide. The page metadata can be perfect, but the image URL might be signed, oversized, blocked by a CDN rule, or generated through a path that social crawlers cannot reach.

For image-specific fixes, use the Open Graph image size guide. For a broader preview debugging flow, use the link preview debugger guide.

Separate stale cards from broken metadata

There are two different jobs:

1. Fixing what your page currently outputs.
2. Getting a platform to forget an older card.

Do the first one before the second one. If your live HTML still contains the old title, a refresh tool will only refresh the wrong thing faster. If your live HTML is clean but X still shows an older card, you are dealing with cache behavior.

A quick test:

• If view-source shows the wrong metadata, fix the page.
• If ShareScan reports the wrong metadata, fix the page.
• If the source and ShareScan report are both correct, test the actual post flow

and give cache the blame only after the source is clean.

If the image changed but X still shows an older preview, the Open Graph image refresh checklist gives you a cleaner path than changing both Open Graph and Twitter fields at once.

That order saves a surprising amount of time.

Use Open Graph and Twitter fields on purpose

Open Graph and Twitter Card tags overlap. That does not mean every page needs two separate sets of copy and images.

Use the same values when you want one consistent preview across Slack, LinkedIn, X, and other surfaces. Use separate Twitter fields when the X card genuinely needs different copy or a different crop.

What causes trouble is an accidental split: a CMS updates og:title, but the old twitter:title remains in the template. The team previews the page in one tool, posts it on X, and sees an older message because the platform chose the Twitter-specific tag.

A short release checklist

Before sharing an important link on X:

1. Check the final public URL.
2. Confirm twitter:card is present and has the expected value.
3. Confirm title and description exist in raw HTML.
4. Open the image URL directly.
5. Check Open Graph fallbacks for conflicts.
6. Confirm redirects and canonical URL agree.
7. Re-test after the production deploy or CMS publish event.

If you only have time for one habit, make it the last one. Preview cards often break at the production edge, not in the draft editor.