OG Image Not Showing on Twitter/X? How to Fix It

Twitter card not displaying your image? Diagnose missing twitter:image tags, wrong card type, stale Twitter cache, and blocked Twitterbot — with exact fixes for each cause.

How Twitter/X reads OG images

Twitter/X uses its own card system. When you share a URL, Twitterbot fetches your page HTML and looks for twitter:image first, then falls back to og:image. The card type is controlled by twitter:card.

For a full-width preview image (the kind that fills the tweet), you need:

<meta name="twitter:card"  content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description here." />
<meta name="twitter:image" content="https://yoursite.com/images/og-card.png" />

<!-- Fallback for platforms that use OG -->
<meta property="og:image"  content="https://yoursite.com/images/og-card.png" />

Reason 1: Wrong twitter:card type

If twitter:card is set to summary instead of summary_large_image, Twitter shows a small thumbnail instead of a large card image.

<!-- ❌ Small thumbnail only -->
<meta name="twitter:card" content="summary" />

<!-- ✅ Full-width large image card -->
<meta name="twitter:card" content="summary_large_image" />

Reason 2: Image dimensions too small

Twitter requires OG images to be at least 300×157px for summary_large_image. Images smaller than this are ignored. The recommended size is 1200×630px at a minimum of 72 DPI.

The image file size must also be under 5MB.

Reason 3: Twitterbot is blocked

Check your robots.txt to make sure Twitterbot isn't disallowed:

# robots.txt — ensure Twitterbot can crawl
User-agent: Twitterbot
Allow: /

Simulate Twitterbot to test access:

curl -A "Twitterbot/1.0" -I https://yoursite.com/page

If you get a non-200 or a redirect to a login page, Twitterbot can't scrape your OG tags.

Reason 4: Stale Twitter cache

Twitter caches card images for ~7 days. If you updated your image, use the Twitter Card Validator to force a re-scrape:

  1. Go to cards-dev.twitter.com/validator
  2. Paste your URL
  3. Click "Preview card" — this triggers a fresh scrape

Alternatively, append a version query string to the image URL:

<meta name="twitter:image" content="https://yoursite.com/og.png?v=2" />

Reason 5: Client-side JavaScript rendering

Twitterbot doesn't execute JavaScript. If your OG tags are set by React, Vue, or Angular client-side, Twitterbot sees an empty head. OG tags must be in the initial server-rendered HTML response.

Verify by checking the raw page source (not your browser's DevTools "Elements" view):

curl https://yoursite.com/page | grep "og:image|twitter:image"

If nothing is returned, your OG tags aren't in the server-rendered HTML.

Reason 6: HTTP image URL (not HTTPS)

Twitter requires the twitter:image URL to use HTTPS. HTTP image URLs are blocked. Verify:

<!-- ❌ HTTP blocked by Twitter -->
<meta name="twitter:image" content="http://yoursite.com/og.png" />

<!-- ✅ HTTPS required -->
<meta name="twitter:image" content="https://yoursite.com/og.png" />

Twitter OG diagnostic checklist

  • ✅ twitter:card is set to summary_large_image
  • ✅ twitter:image (or og:image) is present
  • ✅ Image URL is absolute HTTPS
  • ✅ Image is at least 300×157px (ideally 1200×630px)
  • ✅ Image file is under 5MB
  • ✅ Twitterbot is not blocked in robots.txt
  • ✅ OG tags are in server-rendered HTML
  • ✅ Use Card Validator to force cache refresh

Verify your Twitter OG image

Paste your URL into OGFixer to see a live preview of what Twitter will show — including card type, image, title, and description — before tweeting the link.