Fix Featured Image Not Showing on Facebook When Sharing Posts

>Fix Featured Image Not Showing on Facebook When Sharing Posts
  • Facebook thumbs up

I’ve seen a lot of webmasters complaining about this issue on the WordPress support forum.

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 &amp; Support - ThemeSkills" />
<meta property="og:description" content="At ThemeSkills, we&#039;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&#039;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

Manual check

  • 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).

Open Graph code in page source

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.

open graph theme feature

2. Add Open Graph via Yoast SEO plugin

Yoast SEO is a must-have WordPress plugin. It handles a lot of things which are not necessarily just for SEO purposes, Open Graph being one of them.

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.

Yoast SEO Facebook Open Graph

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.

Facbeook Debugger tool

I’ve tested one of our posts to show you how it should appear.

Facebook Debugger

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.

Missing featured image facebook

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.

Facebook Debugger 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 cache

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.

CDN og:image url Facebook debugger

So when someone shares an old post now, it will appear like this:

Facebook missing image thumbnail

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.

Facebook Batch Invalidator

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.

Summary

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.

You can also follow us on Twitter and subscribe to our YouTube channel.

If you want to start your own WordPress blog, or need a website for your business, our WordPress installation service is at your disposal!

Web Hosting
By | 2018-06-19T08:48:25+00:00 March 3rd, 2018|Fix, Tips|1 Comment

One Comment

  1. Rafael Morales April 28, 2018 at 2:27 AM - Reply

    Thank you!!!

Leave A Comment

Subscribe
SUBSCRIBE NOW

     Join the Weekly      Newsletter

Get WordPress guides and tutorials right in your inbox, once a week!
close-link