This morning I updated one of my older posts, How to Find the Original Source for an Image, with a new featured image.
I wanted a fresher look for the post, so I used one of my own photos and included a different treatment for the post headline in the image.
Before I published the changes, I made sure to check that the featured image for the post was set with the new image.
It was and I went ahead and published my post.
But when I shared that post on Twitter later in the morning, the old featured image displayed on my Tweet.
What happened?
Why wasn’t my new featured image displayed on Twitter?
I quickly switched into troubleshooting mode to figure out what was going on.
If you run into this issue when you tweet a link, here’s some help to resolve it.
How Twitter Determines Which Image to Display
Twitter relies on Twitter Cards to display an image. Twitter Cards allow you to display an image, title, and description when you share a link on Twitter, rather than only the link.
Your site needs to support Twitter Cards in order for an image to display.
In WordPress, there are multiple ways to do that. Here are three options:
- Yoast SEO plugin, in the Twitter tab of their Social section
- Jetpack plugin, as part of the Sharing module
- Add your own HTML markup in the
headsection for your page or post (best done in the functions.php file)
The first two options are the easiest.
I knew that Twitter Cards were working on my pages and posts since I regularly tweet out links and the appropriate featured images display.
What else could be causing the problem?
Twitter Image Size Requirements
Similar to Facebook, Twitter requires images to be a specific size.
As of June 12, 2018, an image must have a minimum size of 300 pixels x 157 pixels.
The image can’t be larger than 4096 pixels x 4096 pixels. And the image must be less than 5MB in size.
No, that wasn’t the issue on my post. The image fit the size requirements.
That’s when I discovered something similar to how Facebook confirms what image to display for a post.
Twitter Card Validator
Similar to how the Facebook Debugger works, the Twitter Card Validator allows you to confirm which image Twitter will display before you tweet your link.
I have to say, I don’t recall using it except possibly when I first set up Twitter Cards years ago.
You enter the URL, and Twitter will fetch the page and display what the card will look like.
When I ran it with the link I shared this morning, it displayed the correct image.
Huh?
What’s going on?
What You Need to Know about the Twitter Card Validator
And that’s when I discovered three things about the Twitter Card Validator:
- You have to be logged into your Twitter account to use it
- It doesn’t always work correctly, it can be problematic. When the wrong image displays, refresh your page (just like the Facebook Debugger)
- If you’ve tweeted the link in the past, you’ll want to validate the URL to clear Twitter’s cache
That third item is what I believe happened to me.
Somehow Twitter’s cache picked up the image from when I previously shared the link.
Because later this afternoon, without me making any changes to the post, I looked again at the tweet that had been published with the wrong image.
How to Find the Original Source of an Image https://t.co/Ez2nWSTvVV
— Deborah Edwards-Onoro (@redcrew) June 13, 2018
The correct image displayed in the Twitter stream!
I was glad the correct image displayed.
But I now know that before I share a post with a new featured image, I need to confirm with the Facebook Debugger and the Twitter Card Validator that the correct image displays.
Summary
You might always get the correct image to display when you share your links on Twitter.
But if you change a featured image in WordPress or an image on your post or page, it’s possible an incorrect image will display.
Confirm your Twitter Cards are set up correctly, that your image meets the size requirements, and use the Twitter Cards Validator to make sure the correct image displays.
Do you use any other methods to track down the problem? Share your recommendations in the comments.
