I’ve seen a lot of webmasters complaining about this issue on the WordPress support forum.
Our Top Ranked #1 Web Host for WordPress Hosting
Latest Uptime Stats (Real Records):
Server Response Speed Test Scored A+:
When they share their post on Facebook, the featured image isn’t showing, just the title and description – sometimes those don’t show up correctly as well.
So, in this post, I’m going to show you what you need to do in order to fix the problem with the missing featured image on Facebook.
Your website needs Open Graph
What is Open Graph
Open Graph is a protocol that enables a web page to become a rich object on Facebook.
Basically, Open Graph adds some meta tags on your web pages which provide Facebook with useful information in order to display them properly.
The tags indicate what’s the correct link to the post, what’s the correct featured image, what type of content is it (e.g. video or audio), and so on.
Here’s how the code looks like on our site:
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="WordPress Services: Installation, Optimization, Maintenance & Support - ThemeSkills" />
<meta property="og:description" content="At ThemeSkills, we'll handle everything that your website needs: theme, plugins, content, SEO, security, fast loading time; and everything that you need: maintenance and support! So you don't have to worry about anything! Just focus on your business, while we focus on your website!" />
<meta property="og:url" content="https://themeskills.com/" />
<meta property="og:site_name" content="ThemeSkills" />
<meta property="og:image" content="https://themeskills.com/wp-content/uploads/2014/07/ipad-hero-image-3.jpg" />
<meta property="og:image:secure_url" content="https://themeskills.com/wp-content/uploads/2014/07/ipad-hero-image-3.jpg" />
How to check if you have Open Graph
- Go to any post or page on your website;
- Right-click anywhere on it;
- Select View Page Source (the name depends on the browser);
- Then check for meta tags with “og” in them, like you see below. Press CTRL-F to use the browser’s search feature, and type og: to easily highlight them (if they’re there).
Use an online tool
Go to OpenGraphChecker and add a post link there for an easy and quick check.
How to add Open Graph to your WordPress website
If you checked, and you don’t have Open Graph on your website, implement one of the following solutions.
1. Add Open Graph via WordPress theme
Some themes have a built-in Open Graph feature, so make sure you check out your theme’s settings before looking for plugins.
2. Add Open Graph via Yoast SEO plugin
Besides Open Graph, it also adds Twitter Cards, which is Twitter’s own markup.
To enable Open Graph for Facebook in Yoast, install the plugin, then go to SEO -> Social.
Once there, press the Facebook tab and select Enabled under Facebook settings -> Add Open Graph meta data.
Press the Save changes button.
Now you can be sure that you have proper Open Graph for Facebook added to your website.
3. Add Open Graph via other plugins
If – for whatever reason – you don’t want to install Yoast, then you can choose one of these two plugins:
This was the first step in fixing the missing featured image on Facebook. Let’s see what you’ll have to do next!
Debugging the issue on Facebook
This is the second step that you have to take after you’ve added Open Graph.
This is also for those of you who already had Open Graph added, but the featured image was still not showing.
After adding Open Graph
First of all, after you’ve added Open Graph, clear your website’s cache.
Then go to Facebook’s Debugger tool. Add a post’s link and press Debug to test things out.
I’ve tested one of our posts to show you how it should appear.
As you can see, the snippet shows properly.
You already had Open Graph, but the featured image still wasn’t showing
This can happen too, unfortunately, but not often. It happened to us, and I saw it happening with YouTube videos as well.
There were lots of times when I wanted to share a YouTube video, but only the title and the description showed up, as you can see below, so I had to use the debugger tool and scrape it in order to make it show properly.
Why is this happening?
In most cases, it’s a Facebook “hiccup”, meaning it’s its fault, not yours.
What can you do?
Clear your website’s cache, and scrape the post again in the debugger tool until it shows properly.
If the featured image still doesn’t show after several scrapes, then check the warnings and response code.
Some warnings don’t cause trouble, like the one you see in the image. That one will appear pretty much all the time, but you can ignore it.
As long as the featured image along with the title and description appear properly, you shouldn’t worry.
The response code should be 200 or 206. If you see response codes, like 301, 302, 404, 500, you most likely have an issue on your end, which needs further investigation, depending on the code.
Facebook has its own cache too, so if a post was shared before adding Open Graph, and the image didn’t show up, then Facebook will save that snippet in its cache and it will show it to you like that again when you’ll debug.
That’s why you’ll most likely have to press the Scrape Again button, so Facebook can fetch your post again, with the new changes. Sometimes you need to press Scrape Again more than once in order to make the image appear.
Debugging in bulk
So, old posts – the ones that were shared in the past and were not showing the featured image – will not change just because you added proper Open Graph code now. You’ll have to scrape them in order to clear Facebook’s cache.
Take us, for example. We’ve used MaxCDN until we moved to Cloudflare recently, and our images were served via CDN links.
Once we gave up on using the CDN, the image links changed, but Facebook kept the old ones in its cache.
So when someone shares an old post now, it will appear like this:
So we basically have to scrape again all the old links in order for Facebook to update its cache and make our featured images appear again when someone shares a post.
Facebook helps you a bit by providing the Batch Invalidator tool, which allows you to add links in bulk.
Enter a list with your URLs (maximum input is 50) for which you want to reset the cache, and press the Debug button.
Fortunately, there’s an awesome plugin, called Export All URLs, which lets you export your URLs, so you won’t have to extract them manually, which would be virtually impossible for some of you that might have thousands of posts.
Running on both HTTP and HTTPS
I’ve seen some cases where webmasters were having their websites served through both HTTP and HTTPS, which is wrong for many reasons.
This is another issue which can get Facebook “confused”, especially if the canonical tags (Yoast SEO handles those too), like I’ve seen on someone’s site, are messed up too.
So, if you’ve installed an SSL certificate (HTTPS) on your domain, then you should perform a proper redirect from HTTP to HTTPS.
Here’s a quick summary with the fixes that I’ve covered:
- Check to see if you have Open Graph on your website;
- If you don’t have Open Graph on your website, add it. Then clear the cache of your website and scrape the posts in the Sharing Debugger or Batch Invalidator if you have too many;
- If you already have Open Graph installed, but the featured image is still not showing up, do the same thing – clear the cache of your website and scrape the post again with the debugger tool.
- If the issue persists, check the warnings and response codes, which might indicate your problem;
- If you’re using HTTPS for your domain, check if a proper redirection from HTTP to HTTPS is in place.
That’s a wrap
Hope you found the post comprehensive and useful.
Don’t forget to share it with your friends!
If you have any questions or thoughts, or you need help, drop a comment, contact us or message us on Facebook.
If you want to start your own WordPress blog, or need a website for your business, our WordPress installation service is at your disposal!