How to Fix Twitter Cards Not Showing Images on WordPress

<tl:dr> Using SSL for your website on WordPress is great, but has a downside if you’re using Twitter cards to make your social stuff look purdy, images don’t show. Hooking in to a filter on the hugely popular WordPress SEO with a few lines of code provides a simple fix. </tl;dr>

UPDATE: Twitter have sorted resolved this issue now and Twitter card images using https do render properly.

This is pretty geeky. Its about WordPress. Sorry.

I thought I was done tinkering with WordPress to make its social stuff work properly when switching sites over to SSL. Not so fast. Argh.

The Background

Google has always looked kindly on pages served with SSL, so it’s a good idea to use it, if possible, but in recent months they’ve turned up the heat. Starting in October 2017 Chrome is going to start showing a ‘Not secure’ warning on any pages not served via SSL.

So, SSL is a good idea and many hosts like WPEngine have a free option if your purse strings are drawn too tight to pony up for a proper certificate.

The Symptom

Being all security minded, you turn on your SSL and voila! More secure.

Except, your Facebook shares stop showing up with a nicely formed image attached. Yup, annoying, and after quite a while tinkering around, I found out why and posted a fix in a previous post.

What I didn’t spot initially is that images for Twitter Cards (the meta information that means you can tailor which nicely created images turn up when someone helpfully shares your page) also break.

Double argh! Look what happens…

The Diagnosis

There’s lots of reasons that images might not be showing (including an official Twitter Card troubleshooting guide) up for Twitter Cards, but if you’re using the hugely popular WordPress SEO plugin and they’ve been working previously, this line might be the culprit:

<meta name="twitter:image" content="https://myfabwebsite.com/wp-content/uploads/2017/06/super-pretty-twitter-card-image.jpg" />

When Twitter looks up the Twitter card, the Twitterbot reads in the meta tags on the page and the pops up to download the image. Apparently, it’s very strict about SSL images, so if the certificate doesn’t exactly match your domain, which it may not on a shared server, the image won’t show.

Switching the image so it’s served from a non-SSL server instead, solves the problem:

<meta name="twitter:image" content="http://myfabwebsite.com/wp-content/uploads/2017/06/super-pretty-twitter-card-image.jpg" />

Notice the ‘s’ has gone from https.

On most servers, this should work fine for images. And suddenly everything looks lahverly.

The Fix

Fortunately, WordPress SEO rides to our rescue again with a handy filter that lets us tinker with the URL of the image used for the Twitter Card.

Pop the code below into your theme’s functions.php file and it should work fine. Don’t forget to clear your caches and any CDN’s your using.

** MASSIVE CATCH / CACHE **

Twitter refreshes its cache once per week according to their own docs. This means even if you’ve fixed the Twitter card problem, you won’t see it show up for a while.

There’s a section in their official troubleshooting guide on a trick using a URL shortener to at least test whether the fix is working.

/**
* Twitter helpfully won't show the image if it's served from an SSL server.
* Most servers are configured to handle images on non-SSL ports so this should
* work.
*
* @param  string $image URL for the twitter card image
* @return none
*/
function check_ssl_twitter_card_image($image) {
return preg_replace("/https/", 'http', $image);
}
// Hook into the Yoast plugin's hooks for handling the Twitter image
add_action('wpseo_twitter_image', 'check_ssl_twitter_card_image');

NB. I can’t stress enough how much of a pain the caching issue is. Took me ages, even after I’d fixed it, to suss why the changes weren’t showing up.

The Twitter Card validator is an essential tool for testing this BUT it still uses the cache.

Photo by Lucas Pimenta on Unsplash.