How to Get Facebook to Share the Right Thumbnail Image of Your WordPress Blog Post
I recently ran into an issue where I wanted to share an old WordPress blog post on Facebook, but Facebook refused to pick up the thumbnail cover image that I had configured for that particular post. It literally drove me mad as I had no clue why Facebook was being so stubborn.
I tried to share it several times, in different browsers, after clearing all my Internet history, but no luck. After spending some time digging I was finally able to resolve the problem and get Facebook to recognize and share the right thumbnail for that WordPress post.
Are you having a similar issue? Read on and find out how you can fix this Facebook share problem once and for all.
1. Check the HTML Code of Your Blog Post
The first thing you need to do before anything else is to make sure that nothing on your website is causing this problem.
The best place to start is the HTML code of the blog post you’re trying to share. If you don’t know how to do this, it’s easy. Browse to your post, right-click, and select “View page source”. That’s your HTML code right there.
What you then need to look for is the og:image property, as per below example. This property tells Facebook what the featured share image of that particular web URL is.
If this property is missing, or if there are more than one image defined, Facebook gets all confused and doesn’t know which image to share. There should really be just one og:image present in your HTML code.
So if you see more than one of these images in the HTML code of your post, log into your WordPress admin and make sure you have a featured image defined. This should resolve the issue.
If it doesn’t, then go into the Yoast social media settings (assuming that you have Yoast installed) and copy the URL of your featured image in the box as per below screenshot.
Please note though that you don’t actually have to hit the upload button, because the image has already been uploaded. Simply updating the post as a whole will do the trick.
That should resolve the og:image issue in the HTML code of your blog post. Now try sharing the post in Facebook again and see if the correct thumbnail share image pops up.
If not, go to the second step.
2. Use the Facebook Debugger Tool to Clear the Facebook Cache
If the og:image property is set correctly in the blog post you wish to share but Facebook still refuses to share it, the Facebook debugger tool can come to your rescue.
What this super handy tool does, it allows you to preview a shared post and make sure that everything is correct, before you actually share that post for real.
What you need to do is, log into Facebook, open the debugger tool, copy the URL of the blog post you wish to share and paste it into the box as per below screenshot. Then simply hit the Debug button and see what happens. If you get error messages, try and hit that button again.
It may be that the correct image still doesn’t show up at that point. What you can do then is hit the Scrape Again button a few times until the correct share image does finally pop up for your blog post. Yay!
What’s going on here? This tool simply allows you to get Facebook to crawl your blog post and clear its cache. So if Facebook holds an old version of your blog post, that cache is now cleared and everything is fresh.
See the image below to see what a correctly configured blog post looks like in the Facebook debugger tool. In this example, I have used a blog post from SEMrush.
Hopefully this will resolve the issue for you.
In my case, I had multiple instances of og:image in my blog post which caused Facebook to be all confused. This was probably because I had replaced the cover image and added some more images throughout the post.
All I had to do was enforce the featured image by using the Yoast social media settings. I then had to refresh the Facebook cache with the debugger tool, and that resolved the problem for me.