Twitter card not showing image

X (formerly Twitter) can show a text-only card even when Facebook renders your image. The usual causes are X-specific tags, image rules, or cache—not a total absence of Open Graph. This guide focuses on twitter:card, image URLs, and X caching. For universal OG failures, use og:image not showing. For how the two tag systems relate, see Open Graph vs Twitter Cards.

What a large X card needs

At minimum in the raw HTML:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your headline" />
<meta name="twitter:description" content="One or two supporting sentences." />
<meta name="twitter:image" content="https://example.com/og/share.png" />

Also keep Open Graph in sync:

<meta property="og:title" content="Your headline" />
<meta property="og:description" content="One or two supporting sentences." />
<meta property="og:image" content="https://example.com/og/share.png" />

If twitter:card is omitted or set to summary, X may show a small thumbnail layout even when a large image file exists.

Step 1: Inspect the raw tags

Use View Source, not only the Elements panel. Confirm:

• twitter:card is exactly summary_large_image when you want a large image.
• Image URL is absolute https://.
• Prefer a dedicated twitter:image when you need a crop different from og:image.

Build or compare snippets with the Meta Tag Generator. Validate the live URL with the Link Preview Checker.

Card types (short reference)

twitter:card value	Typical result
summary_large_image	Wide image card (goal for most blogs/products)
summary	Small square/thumbnail emphasis
Other / missing	Unreliable or text-forward cards

This page owns troubleshooting. Keep the comparison of OG vs Twitter systems in the reference guide.

Step 2: Image size and format

Use about 1200×630 landscape for large cards. Host PNG or JPG. Avoid relying on WebP for the tagged file. Details: X (Twitter) image sizes and OG image size.

Create artwork in the OG Image Generator, compress with the Image Resizer, and check with the Social Image Checker.

Step 3: Reachability

Open twitter:image / og:image in a private window. Login walls, hotlink blocking, and broken CDNs fail X the same way they fail other networks. Keep files reasonably light; enormous PNGs time out on some fetches.

Step 4: Cache without an official clearer

X does not provide a Sharing Debugger–style public “scrape again” for every account workflow. After HTML is correct:

1. Change the image file name and update tags, or
2. Share a new URL query (?v=2) the network has not cached, then
3. Post from a clean compose window.

Do not assume an old tweet will rewrite its card when you only change the site.

Common mistakes

Mistake	Fix
Only og:image, no twitter:card	Add summary_large_image
Relative /img/og.png	Absolute https URL
Expecting old tweets to update	New post or URL variant
Square 400×400 for a “large” card	~1200×630 landscape
SPA tags after hydration	Fix HTML delivery (React SPA guide)

Checklist

• twitter:card=summary_large_image in View Source
• Absolute image URL opens logged out
• ~1200×630 PNG/JPG
• Link Preview Checker reviewed
• Cache busted via new asset path or query if stuck

Still broken on every network? Return to og:image not showing. Designing safer cards: OG image best practices.

Aligning design and tags for X

Large cards look best when the artwork is authored as landscape, not as a cropped square avatar. Designers should deliver 1200×630 masters even if the site logo is square. Place the verbal pitch in the first line of the title field as well as on the image so truncation in the text portion still communicates.

When migrating from Twitter to X branding in your docs, the meta property names remain twitter:*. Do not invent x:card tags. Validators and crawlers still expect the historical names.

If your CMS offers separate “Facebook image” and “Twitter image” fields, use them when the safe crop differs; otherwise point both at the same absolute URL. Divergence without a reason creates support tickets where one network looks right and the other does not. After any field change, confirm View Source rather than trusting the CMS preview pane alone.

Field notes from real share failures

Most broken previews are boring: a relative URL, a duplicate plugin tag, a cache that nobody re-scraped, or a file that is fine in Chrome but too heavy for a messenger. Resist the urge to rewrite the entire brand system until those basics are proven in View Source and a private window.

Write down the exact URL string you tested, including trailing slash and query parameters. Support threads go sideways when one person scrapes example.com/page and another shares example.com/page/. Treat the share string as part of the specification.

When you finally change artwork, change the path. Overwriting og.png in place is the most common reason a “fixed” card never appears. Pair the new file with a short note in your changelog so the next person knows which version is live.

Verification habits worth repeating

After every deploy that touches templates or SEO plugins, spot-check three URLs: the homepage, one article or product, and one utility page. Look for a single absolute og:image and open that file logged out. This ten-minute habit catches more regressions than redesigning share cards.

Document the owner of social tags for your stack—theme, plugin, or layout component—in the repository README. When something breaks, people should know which lever to pull first. Ambiguous ownership is how duplicate tags accumulate.

Finally, separate “works in our browser” from “works for crawlers.” If you only validate inside an authenticated preview session, you will ship failures to Facebook, LinkedIn, Slack, Discord, WhatsApp, and X without noticing until a campaign is live.

If you only remember one rule, remember this: crawlers are blunt. They fetch a URL, read tags, fetch an image, and cache aggressively. Your CMS preview, authenticated browser session, and hydrated React tree are not part of that path. Design the HTML and the image file for the crawler first, and human polish second. That ordering keeps share cards reliable while you iterate on the visible page design.