Blog/Twitter Card Not Working? Here's Exactly Why (and How to Fix It)
·7 min read

Twitter Card Not Working? Here's Exactly Why (and How to Fix It)

Your link previews on Twitter/X look broken — no image, wrong title, plain URL. Here's every reason Twitter cards fail and the exact code to fix each one.

Check your site right now

Free SEO audit in 30 seconds — find all the issues covered in this guide.

Audit for free →

Your link looks terrible on Twitter. Here's why.

You share a link on Twitter/X and instead of a rich preview with an image, headline, and description — you get a plain blue URL. Or worse: a broken image placeholder, the wrong title, or a preview from some random page on your site.

This happens because Twitter/X reads specific meta tags called Twitter Cards to build those previews. If the tags are missing, wrong, or misconfigured, Twitter falls back to plain text — or scrapes whatever it finds first.

The good news: Twitter card problems are almost always fixable in under 10 minutes once you know what's wrong.

What are Twitter Cards?

Twitter Cards are HTML meta tags you add to your page's that tell Twitter how to display your link when someone shares it. There are four types:

  • summary — Title, description, small thumbnail image (100×100px minimum)
  • summary_large_image — Title, description, large banner image (at least 600×314px recommended)
  • app — For linking to mobile apps
  • player — For embedded video/audio

For most websites, you want summary_large_image. It creates the big image preview you see from news sites, blog posts, and product pages.

The minimum set of Twitter Card tags looks like this:

Twitter also reads og:title, og:description, and og:image (Open Graph tags) as fallbacks if the twitter: versions are missing. But don't rely on that — always set both.

The 7 most common reasons Twitter cards don't work

1. Missing twitter:card meta tag

This is the most common issue. Without , Twitter doesn't know what type of card to show and defaults to plain text.

Fix:

Add this as the first Twitter Card tag in your . Without it, none of the other tags do anything.

2. Twitter Card image is wrong size

Twitter will silently skip your image if it's too small, wrong aspect ratio, or a format Twitter doesn't support.

Requirements for summary_large_image:

  • Minimum: 300×157px
  • Recommended: 1200×628px (same as OG image)
  • Maximum file size: 5MB
  • Supported formats: JPG, PNG, WEBP, GIF (static only)
  • Aspect ratio: 2:1 (landscape)

Fix: Resize your image to 1200×628px. Use the same image for both og:image and twitter:image:

3. Image URL not accessible

Twitter's crawler fetches your image when the link is first shared. If the image requires authentication, is behind a CDN that blocks bots, or returns a 404 — no preview.

Check: Paste your image URL into a fresh browser window (incognito). Can you see the image? Try it in Twitter's Card Validator — it shows you exactly what Twitter sees.

Fix: Ensure your og:image/twitter:image URL is:

  • ✓ Absolute URL (starts with https://)
  • ✓ Publicly accessible (no login required)
  • ✓ Returns HTTP 200 with correct content-type header
  • ✓ Not blocked by robots.txt

4. Cached old card data

You fixed your meta tags but Twitter still shows the old (broken) preview. This is a caching issue — Twitter caches card data aggressively.

Fix: Use the Twitter Card Validator. Paste your URL and click 'Preview card'. This forces Twitter to re-scrape and flush the cache for that URL.

Twitter's cache typically expires after 7 days, but the validator forces an immediate refresh.

5. Conflicting or duplicate meta tags

If your page has two og:image tags (common in CMS setups where themes and plugins both add them), Twitter may use the wrong one — or get confused and show nothing.

Check: Right-click your page → View Source → search for og:image. You should only see one.

Fix: Remove duplicates. If you're on WordPress, check if both your theme AND Yoast/RankMath are adding OG tags. Disable one of them.

6. Image behind HTTPS mixed content

Your site is HTTPS but you're referencing an image via HTTP. Twitter only fetches images over HTTPS.

Wrong:

Right:

7. Robots.txt blocking Twitter's crawler

If your robots.txt disallows the Twitterbot user-agent, Twitter can't crawl your page to read the meta tags.

Check your robots.txt (visit yoursite.com/robots.txt). Look for anything blocking Twitterbot:

# Bad — blocks Twitter

User-agent: *


Disallow: /



# Good — allows Twitter


User-agent: Twitterbot


Allow: /

Make sure neither User-agent: * with a broad Disallow nor a specific User-agent: Twitterbot block is preventing access to your important pages.

Platform-specific fixes

Shopify

Shopify auto-generates Open Graph tags for product pages, but doesn't always add Twitter Card tags. Add them to your theme.liquid file:



{% if page_description %}


  


{% endif %}






{% if settings.share_image %}


  


{% endif %}

WordPress (manual)

Add to your theme's functions.php or a child theme — but a plugin is easier:

function add_twitter_card_meta() {

  echo '';


  echo '';


}


add_action('wp_head', 'add_twitter_card_meta');

Better approach: Use Yoast SEO (free) or RankMath (free). Both generate Twitter Card tags automatically from your post's featured image and SEO title.

Next.js (App Router)

// app/blog/[slug]/page.tsx

export const metadata: Metadata = {


  twitter: {


    card: 'summary_large_image',


    title: 'Your Post Title',


    description: 'Your post description',


    images: ['https://yoursite.com/og-image.jpg'],


  },


};

Next.js renders this as the correct Twitter Card meta tags automatically.

How to test Twitter Cards properly

Step 1: Check your meta tags exist

Run a free audit at getmetafix.com. It checks all 12 meta tag signals including Twitter Card presence, image validity, and common misconfigurations. Takes 30 seconds.

Step 2: Use Twitter's Card Validator

Go to cards-dev.twitter.com/validator and paste your URL. This shows you exactly what Twitter sees — including any error messages about why your card isn't working.

Step 3: Check with opengraph.xyz

opengraph.xyz lets you preview how your link looks across Twitter, Facebook, LinkedIn, and Slack simultaneously. Useful for catching platform-specific issues.

Step 4: Post a test tweet

After fixing your tags, post a test tweet with your URL. If it still shows the old broken preview, use the Card Validator to flush Twitter's cache first.

The complete Twitter Card template

Here's a complete, correct Twitter Card implementation for any website:

Note: the og:image and twitter:image can point to the same URL. Create one 1200×628px JPG and use it for both.

Quick fix checklist

  • ✓ twitter:card meta tag present (required — nothing else works without this)
  • ✓ twitter:title set (or og:title as fallback)
  • ✓ twitter:description set, under 200 characters
  • ✓ twitter:image set to a public HTTPS URL
  • ✓ Image is at least 300×157px, recommended 1200×628px
  • ✓ Image file size under 5MB
  • ✓ No duplicate og:image or twitter:image tags
  • ✓ Twitterbot not blocked in robots.txt
  • ✓ Card Validator shows no errors

Most Twitter card problems come down to one or two missing tags. Run getmetafix.com on any URL — it checks Twitter Card tags, Open Graph, meta descriptions, canonical tags, and 8 other signals in 30 seconds, and shows you the exact code to fix whatever's broken.

Fix your site's SEO in 30 seconds

Free audit. AI-generated fixes for $29.

Audit for free →