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!

By |2018-08-26T16:37:42+00:00March 3rd, 2018|Fixes, Tips|9 Comments

9 Comments

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

    Thank you!!!

  2. John Rothra August 22, 2018 at 7:13 PM - Reply

    Great article, but sadly scraping isn’t helping me. I am using Open Graph, and FB’s debugger has the URL for the image (entering that URL shows the image). Yet, it still thinks there’s no image (shows the generic gray rectangle). I scraped and scraped and scraped and . . . you get the point. Oddly, the image shows in the preview until I hit “post” or when I’m using the debugger. Kinda frustrating.

    • ThemeSkills August 23, 2018 at 4:33 PM - Reply

      Sometimes, Facebook has some bugs of its own. It happened to me a couple of days ago when it didn’t want to display a featured image for a post. In the debugger, it appeared properly, no problems. I also uploaded the image separately, but nope, it still displayed the missing image thumbnail instead. Worked fined on Twitter.

      Keep trying. It might have been just a Facebook ‘hiccup’.

  3. Alex from NamoBot September 6, 2018 at 10:08 AM - Reply

    When I share my website link to facebook post. I get this error (“Posts that look like spam according to our Community Guidelines are blocked on Facebook and can’t be edited.”). My website has no content that violates fb community guidelines. My website link is namobot.com. Please help.

    • ThemeSkills September 6, 2018 at 5:01 PM - Reply

      Well, that means it’s either a problem with your content or it’s a false positive from Facebook and you should contact them. Check this answer (use Google translate because it’s in Spanish) from the Facebook help team for more information.

  4. Richard Hamel September 28, 2018 at 8:01 AM - Reply

    Thanks for that. One other trick that I’ve noticed is that (because my website is in the USA, and I’m updating from Asia) is that the image does not appear to appear (not sure 100%), but when I turn on my VPN service (which makes my computer appear to be in the USA region), my FB image appears.

    • ThemeSkills September 28, 2018 at 4:40 PM - Reply

      Yep, that’s kind of weird. Can’t think of why that could happen…

  5. William Siong October 26, 2018 at 2:05 PM - Reply

    Thanks for the info above! However, whenever I share my post to Facebook, Twitter, Google + or even LinkedIn, my Picture appears instead of the Grey square BUT I have no idea where this photo comes from. Suspected its the Gravatar Default picture. Is it even possible?

    • ThemeSkills October 26, 2018 at 4:39 PM - Reply

      Your featured images are too small for social media websites, so they look for a bigger image to display.

      I’ve scraped one of your posts with the Facebook debugger, and this is what it said:

      Provided og:image URL, https://williamsiong.com/wp-content/uploads/2017/10/online_marketing_1508548482-300x128.jpg was not valid because it did not meet the minimum size constraint of 200px by 200px.

Leave A Comment

WP ENGINE OFFER!

20% OFF + 4 months FREE on WordPress hosting
Offer expires on 11/30/2018
To celebrate the release of the Gutenberg editor, WP Engine is offering:
  • 20% OFF the first payment on their shared WordPress hosting plans;
  • 4 months FREE on any annual subscription.

And there's more! Since WP Engine bought StudioPress, all their customers get FREE access to the StudioPress themes, including the Genesis Framework!
 
Disclosure: If you make a purchase using this affiliate link, I might receive a commission from WP Engine, at no additional cost to you! Thank you!
close-link