How I fixed broken Twitter Card images generated from my WordPress posts

Why are my Twitter Card images not showing?

I looked everywhere, in the plugin, meta tags, api documents, until...

I found the one file to fix that was keeping my images from showing up in my Twitter Cards.

Twitter Card Validator

The first thing you need to know about is the Twitter Card Validator.

You have to make sure you site is white listed, mine was and that was not the problem, but it may be the first thing you should check!

All you do is put in a url from one of your WordPress blog posts to preview what your auto-generated Twitter Card will look like.

Twitter Card Validator - White Listed

Here is what my Twitter Card looked like, notice NO IMAGE!!! ARRRRGGG!!!

Twitter Card Validator - No Image

Making Sure Settings Are Correct

Using Yoast's WordPress SEO plugin, under the social settings I made sure I checked the "Add Twitter card meta data" checkbox and saved my changes.

Yoast SEO Twitter Card

Then I doubled checked that the meta tags are actually getting rendered in the head tag...

I thought that maybe I found the problem, maybe it was the Yoast WordPress SEO plugin using a meta tag with an extra ":src" on it?

Yoast Twitter Card Meta

Note: Twitter specifically says to use "twitter:image" mentioned in their Card Type docs, took a screenshot, see below...

Twitter Card Meta

So I tested using several different posts ( Twitter caches results once fetched for 7 days )...

In the /wp-content/plugins/wordpress-seo/frontend/class-twitter.php file starting on line 383, the code below contains a function called image_output...

Made the change, but still not getting images on my Twitter Cards...

The Fix... Damn Robots.txt !!!

The second part of the answer came when I stumbled across Twitter URL Crawling & Caching page.

Turns out I created a ROBOTS.TXT file a loooooong time ago and it blocks all crawlers from indexing just about everything except posts and pages...

That's a problem because Twitter wants to crawl and cache the image it is going to use in the Twitter Card for 7 days...

So I had to add special rules for "Twitterbot" to allow it to access the default WordPress uploads folder where all my images exist.

The first three lines did the trick, I am able to still block all other crawlers with the rules that appear below the first three lines.

User-agent: Twitterbot
Disallow: *
Allow: /wp-content/uploads/*

User-agent: *
Disallow: /wp-admin*
Disallow: /wp-login.php
Disallow: /wp-content*
Disallow: /*/feed
Disallow: /*/trackback
Disallow: /*?
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /category/
Disallow: /page/
Disallow: /pages/
Disallow: /feed/
Disallow: /feed
Disallow: /tag/
Disallow: /archives/

We Have Images!!!

With the ROBOTS.TXT file update, I am now able to generate Twitter Cards that contain images!

Summary Card


Twitter Card Validator - Summary

Summary Large Image Card


Twitter Card Validator - Summary Large Image

I still left the patch to the Yoast WordPress SEO plugin in my file to follow Twitter guidelines and will fire off an email to the Yoast development team.

For the record I did test with and without the plugin patch after the ROBOTS.txt file update and Twitter Card images showed in both instances.

Hope this helps!

15 comments

  • Great article, but what I’m wondering is how quick did your images appear after you’ve changed the robots.txt file?
    Because I’ve changed it about 2 hours ago and it’s still not showing any images. Do I have to wait for 7 days for twitter to recrawl my site and fetch the image?

    -- Vale

  • Hi Vale,

    When I was testing, right after I figured out the robots.txt file was the problem, I noticed that images did not show right away, so I had to test with different urls each time.

    Eventually, the Twitter crawler eventually picked up the correct image for the urls I tested and all was well. Not sure how heavy handed Twitter is with caching, especially during the holidays, I didn’t have to wait 7 days, IMO they probably state the “up to 7 days” just in case.

    Have you tested other urls? Are other URL’s on your blog showing correct Twitter cards?

    -- Cesar Serna

  • So what do you do when you get this in the Validator and it STILL doesn’t work? INFO:

    Page fetched successfully
    INFO: 27 metatags were found
    INFO: twitter:card = summary_large_image tag found
    INFO: Card loaded successfully

    -- Geoffrey Grider

  • Hey Geoffrey, I checked out what I think is your site, based on the meta tags, you are using a CDN to deliver the Twitter card image.

    Turns out the CDN is blocking Twitter bot from crawling and caching the card image.

    You might want to check with your CDN provider to see if you can change the robots.txt settings to allow Twitterbot access to cache.

    Else, you might want to not use the CDN for Twitter cards.

    HTH
    😉

    -- Cesar Serna

  • Awesome man! Just got it working. Issue was the robots file!!

    Thanks!!

    -- Kia Kamgar

  • This solved a week-long headache. THANK YOU!

    -- Stephanie

  • Hi Kia and Stephanie, THANK YOU and happy I could help!

    😉

    -- Cesar Serna

  • Made my day

    -- Muhammad Ali

  • Did you have to wait any amount of time for this to start working? I’ve been running into the same issue and just added the Twitterbot allow code to my robots.txt and am still getting the same thing. It’s been driving me nuts for months.

    -- Nate Balcom

  • Hi. I’m having this issue but don’t know where to add the code above the fix it. How do I update a Robot.txt file? Sorry, totally new to coding! Thx

    -- Dawn

  • @Nate – No, didn’t have to wait long at all, once I made the change, pictures showed right away… I did have to test with a new post every time as Twitter caches data/images for up to seven days…

    HTH
    😉

    -- Cesar Serna

  • @Dawn – The robots.txt file is located on your server in the root directory of your WordPress install… If editing and uploading files to your server is a bit tricky for you… A quick search on google for WordPress plugin robots.txt editor returned this ( https://wordpress.org/plugins/pc-robotstxt/ )… I have never used that plugin, there are several that seem to do the job of both creating and enabling you to edit a robots.txt file for your site within the WordPress admin area…

    HTH
    😉

    -- Cesar Serna

  • You are awesome! Thank you!!
    The fix worked!

    -- Riger99

  • I don’t understand ! I have the same problem and I modified the robots.txt file through Yoast SEO plugin to authorize Twitterbot to crawl my WordPress site but it doesn’t works… 🙁
    I’m reading all Twitter Developpers pages about this and a lot of forums where people have the same issue but Cards Validator still doesn’t show me my image…
    help :'(

    -- Pierre

  • @Pierre I took a look at your robots.txt, try putting the twitterbot rules above the “User-agent: *” rule…

    ——————————–
    CURRENT:
    ——————————–
    User-agent: *
    Disallow: /wp-admin/
    Allow: /wp-admin/admin-ajax.php

    User-agent: Twitterbot
    Disallow: *
    Allow: /wp-content/uploads/*

    ——————————–
    NEW:
    ——————————–

    User-agent: Twitterbot
    Disallow: *
    Allow: /wp-content/uploads/*

    User-agent: *
    Disallow: /wp-admin/
    Allow: /wp-admin/admin-ajax.php

    ——–

    HTH
    😉

    -- Cesar Serna