← All articles · April 18, 2026 · og.hjlabs.in

Why Twitter (X) Cards Don't Render in 2026 — 12 Causes + Fixes

You added the twitter:card meta tags. You hit publish. Pasting the link into Twitter shows... a plain text link with no preview. This guide walks the 12 most common reasons Twitter (X) cards fail and the exact fix for each.

1. The card type is wrong

Twitter accepts four card types: summary, summary_large_image, app, player. If you typed article or website, the card silently fails.

Fix: Use summary_large_image for blog posts and product pages. Use summary only when you don't have a 1200x630 image.

2. og:image is referenced but inaccessible

Twitter's crawler (Twitterbot) tried to fetch your OG image and got a 403, 404, or timeout. Common causes: image behind authentication, blocked by your firewall, served only to logged-in users.

Fix: Open your image URL in incognito. If it does not load, fix the access. Use a public CDN URL like og.hjlabs.in if your origin has issues.

3. og:image returns the wrong content type

Twitter parses the response Content-Type. If your endpoint returns application/octet-stream or text/html, the image is rejected.

Fix: Ensure Content-Type: image/png or image/jpeg is set. SVG works on Twitter but not on Facebook — use PNG to be safe.

4. Image is too large or too small

Twitter's spec: minimum 300x157px for summary, minimum 600x314px for summary_large_image, max 5MB. Recommended: 1200x630.

Fix: Resize to 1200x630. Compress if over 5MB (use a quality of 80-85 for JPEG).

5. Image aspect ratio doesn't fit the card

For summary_large_image, the card crops to ~1.91:1 (1200:628). If your image is square or vertical, the centre of the image is shown — your text/logo gets cropped.

Fix: Design at exactly 1200x630. Keep critical content within a 1100x550 safe zone in the centre.

6. Meta tags are in the <body> instead of <head>

Frameworks like Next.js and Astro can accidentally output meta tags inside <body> if your component is rendered there. Twitterbot only reads <head>.

Fix: View source on the rendered page. Verify all og: and twitter: tags are above the closing </head>.

7. Hash-routed SPA without SSR

If your app is a SPA and the OG tags are injected by JavaScript, Twitterbot does not see them — it does not execute JS.

Fix: Switch to SSR (Next.js, Nuxt, Remix), pre-render with static generation, or use a service-worker fallback that serves a meta-only HTML for crawler user-agents.

8. Robots.txt blocks Twitterbot

Some firewalls aggressively block bot user-agents. If your robots.txt has User-agent: Twitterbot / Disallow: /, you have shut Twitter out.

Fix: Explicitly allow Twitterbot, Googlebot, facebookexternalhit, LinkedInBot, Slackbot, and Discordbot.

9. CSP headers block image rendering

Less common: a strict Content Security Policy on the OG image endpoint might prevent some platforms from previewing.

Fix: Don't set CSP on your image endpoint. Set CSP only on HTML pages.

10. The card is cached on Twitter's side as broken

Twitter caches card results. Once a card fails, retrying with the same URL keeps showing the failure for ~24 hours.

Fix: Use the Twitter Card Validator with a query string change (?v=2) to bust the cache.

11. Wrong domain in twitter:url

If your og:url or canonical URL points to a different domain than the one being shared, Twitter sometimes refuses.

Fix: Match exactly — https://yoursite.com/post in og:url matches the URL you share.

12. Twitter has rate-limited your origin

If you publish a high volume of links and Twitterbot hits your origin too hard, it may temporarily back off.

Fix: Pre-render OG images and serve from a CDN. Avoid generating on-demand for every tweet.

The minimum-correct meta tag boilerplate

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title up to 70 chars">
<meta name="twitter:description" content="Description up to 200 chars">
<meta name="twitter:image" content="https://og.hjlabs.in/api/og?title=...&template=blog">
<meta name="twitter:site" content="@yourhandle">

Bottom line

90% of broken Twitter cards are: (1) wrong card type, (2) inaccessible image, or (3) tags in <body>. Fix those three and you cover most cases. For the remaining 10%, generate your OG images via a reliable URL-based service like og.hjlabs.in — it returns the correct content type, never times out, and is cached at the edge.

Generate your OG images and favicons

Free. URL-based API. Edge-cached. No signup.

Open the generator →