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 & 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
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).
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
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.
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 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.
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.
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!
Thank you!!!
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.
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’.
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.
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.
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.
Yep, that’s kind of weird. Can’t think of why that could happen…
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?
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:
very big thank you. it’s help me.
You’re welcome! I’m glad it did!
Thank you so much!!!
Happy to help! :D
Thanks for this amazing post. Although mine isn’t resolved yet.. :'((
I just had the same issue right now and it says that I am missing the fb:app_id and the response code is 206
And after reading your post, I was like ‘oh okay I’ll try clearing my cache for the past 4 weeks’ and so I did but the problem is still there! I have tried all the things you have said on this post :(
I have a Yoast SEO installed on my site and the Open Graph has been enabled. Can you please help me? Please contact me thru my email. Thanks a lot!
I’ll reply here. It will help out others as well.
As I mentioned in the post, a 206 response code and the missing fb:app_id should not be a problem. You can ignore those.
I am facing this problem same as Erik.
But when I hardcode the og:image’s url from another server whose thumbnail displays on sharing, it works. I see it’s not working for the image from my server & from this type others server with same issue.
So what should we do for this problem.
I checked one of your posts with the Facebook debugger. The problem is that your image URLs return a 404 Page Not Found error instead of showing the image. For example, this image:
https://www.emotahar.com/wp-content/uploads/2018/08/ajax-contact-form-wordpress.png. That’s why Facebook doesn’t display your images.This could be caused by several things, such as a plugin setting, plugin conflict, server configuration, and so on.
Thank you – I have installed the Complete Open Graph plugin that has solved this for me.
That’s great!
Thanks a lot. This post help me solve the problem I was having (image not appearing with my blog post on fb) on my blog:
https://www.tayobanjo.com/Glad to see that it’s fixed now!
Hi there, I am having a similar issue and have tried everything to fix it. When I share my homepage on Facebook or other social channels, the featured image does not appear, even when uploading the correct size to Yoast plugin it still doesn’t pull through any imagery. The code is all in there when viewing my page source, and image size to spec (have tested several other images too) – when debugging the issue on FB it shows that there is no image when there clearly is one in the code. I have deactivated all other plugins and tried other themes and still not working. Is it the fact that my homepage is a ‘latest post’ blog page rather than a static page? My non-blog pages seem to work (e.g. ‘About’ page, just not any of my blog category sections or homepage. Any help will be great! My site can be found at:
https://bit.ly/2H1vp2aHi! I replied to your email. :D
Update with the fix for other people that might experience the same issue: If you’re using JetPack’s Photon feature, disable it, clear any site cache that you might be using, then scrape the link several times in the Facebook Debugger.
Hi, Thanks a bunch for sharing these. I have done all these but yet the image will not show. I can see it picking all the tags as well as can see the image when I click “open graph object debugger”. However, it just does not come in the preview.
Interestingly, if I post using the mobile app, the image appears. Not sure what is wrong. Any suggestions
P.S: I tried your latest fix too, cleared cache, shut down photon and scrapped many times.
Hello!
Ok, so I tried a couple of posts and they display properly. The issue is with your homepage’s featured image.
When I scrape it with the debugger, it shows this:
The first thing I noticed when opening that image in the browser is that it loads very slowly, gradually, bit by bit. You probably won’t notice this because it’s already cached by your browser, so it will load faster. You’ll need to use an Incognito/Private browser window without any cache to check it out.
It probably loads very slowly because it’s a .png image when it should be a .jpg or .jpeg image. Being a .png, the file size is way bigger (around 675 KB). You can find out more about what proper file format you need to use for images from my WordPress image optimization guide.
You should compress that image to about 60%, save it as .jpg/.jpeg, then re-upload it. After the image is compressed and saved as .jpg, the file size should go down to around 75 KB from 675 KB. Big difference, right?
After that, clear your site’s cache and scrape the homepage several times in the debugger.
See if that works.
The second thing that might be causing the issue is hotlinking prevention. If you have a security feature that prevents hotlinking, then it might prevent Facebook from downloading the image.
I entered the image link in this Hotlink Checker and it did not show. But, it might not show because the tool can’t download it either, as Facebook can’t.
So, I can’t tell exactly if it’s protected against hotlinking or it’s a download problem.
Thank you for taking out time on this. I will look into the image for the main website. For the latest post link, I think it could be a browser issue as when I check on my mobile, the image shows. Also, when I check in an incognito mode, it sometimes shows and sometimes doesn’t . Seems like all the other people are able to see the image.
Have flushed my DNS and the browser history. I suppose cache might take a little longer to come to effect. Fingers crossed that it works.
Thanks for the hotlink reference. While that may not be an issue, I saw a few websites that have taken my content with out permission. Will be definitely tackling that asap.
You’re welcome!
I checked out your latest post in the Facebook Debugger and it shows fine. Its image loads fine in the browser as well. And it’s .jpg, which is good. It might be something on your end, yes.
Hope you’ll solve the issue!
My Wordpess website images not fetching in facebook, google +, twitter etc.
I use ALT TAG in all Images or description of Images in all Post or pages
I use yoast seo plugin
Can anyone help me,
I share my website link
https://www.ddmschool.comAlt tags and descriptions have nothing to do with it.
On some pages (e.g. your homepage), you don’t have an
og:imagetag in your code (the one generated by Yoast), most likely because you haven’t added a featured image for it.You can either go into your pages and add a featured image, or set a default image in SEO > Social > Facebook for pages or posts that don’t have a featured image, or set featured images in the Yoast meta box, inside individual posts or pages.
Now, you also have two
og:imagetags in your code, which creates a conflict. Facebook grabs the wrong one and throws an error:The extra
og:imagetag is using your logo’s URL.You need to find out where it’s coming from. Do you have Open Graph enabled from within your theme as well? Or from another plugin? Disable Open Graph in other places, except Yoast.
Provided og:image URL,
https://qipnews.com/wp-content/uploads/2019/02/11.jpgcould not be processed as an image because it has an invalid content type.That image doesn’t exist. If you visit the URL, it returns a 404 Not Found error. Therefore, Facebook can’t display it because there’s nothing to display.
Hi Radu, I have the same problem as abdou. My og:image URL is there, the image even displays on the page. Thing is, I can see my image in my appropriate wp-content/uploads subfolder. I see the image when I’m logged into my wordpress site and go directly to the image’s URL. I get the 404 when I’m incognito browsing or using another browser where I’m not logged into the site. Yet the featured images display on all my blog posts for other people who are not logged into the site.
Hello!
I checked one of your posts’ featured image (
https://athenagrayson.com/blog/wp-content/uploads/2019/03/varuna01.png) and, indeed, it returned a 404 Page Not Found error.I also scraped the post with Facebook’s debugger a couple of times and got this:
Now, I can’t tell you exactly what the problem is, but since I noticed that you’re using JetPack, I strongly believe that’s the problem. JetPack is a dinosaur and causes a lot of conflicts quite often, especially when it comes to images. I gave up on it completely years ago.
Usually, its Photon (I think it’s called Site Accelerator now?) feature creates most of the problems. So, disable that, clear the site and browser cache, and try again.
JetPack also handles your Open Graph properties. I don’t really know via which feature because, as I said, I haven’t used it in years. So, if disabling Photon doesn’t work, disable its Open Graph feature and use this plugin instead, at least for troubleshooting purposes.
The last thing you can try is to completely disable JetPack, clear all your caches, and then try again. I’m pretty sure JetPack is the issue.
If the plugin is the culprit and you still want to use it, open a topic in the support forum.
Otherwise, I recommend installing Yoast SEO, which is a must-have plugin, in my opinion, and it will handle the Open Graph as well. Or, you can use the Open Graph plugin I mentioned above.
Hope this helps!
It did help! I opened up a support ticket with my host and found out there was indeed a plugin conflict and some artifacts from an old site upgrade on the back end. I’ve had almost all my Jetpack modules turned off for some time, so I do think it’s time to sunset. :) Thank you for your help in this! I have Monarch installed along with my Divi theme and I’ll look into Yoast SEO, too. Thank you so much for your help! I’d been searching for days and coming up blank.
You’re welcome! I’m glad you got it sorted out!
Hi Radu,
I tried the above mentioned solutions but no success. My image url is 403 Forbidden error. I checked on server end and all permissions are granted. Can you please help me!
https://www.wallpaperu3.comhttps://www.wallpaperu3.com/bmw-m6-gran-coupe-4k.html
Thanks!
Hello!
Yep, your image seems to hit a 403 error. This can be caused by several things:
Perform a backup, just in case. Also, clear the browser and site cache after any modification.
I’ve excluded “file permissions” since you said that you checked them out already.
I suspect the .htaccess file, especially because you have
.htmlin your URLs. WordPress doesn’t have a default setting for that, and they should at least be.php, not.html, which is weird. So, I assume something was changed in the .htaccess file, either manually or via plugin.Writer fails to tell you that you must spend €79 a year to gain premium features to do what he / she instructs.
Not to mention Yoast SEO plugin has a RAFT of ONE STAR ratings making it probably the WORST plugin available.
So, I don’t know what you read or how you read it, but you got the whole post wrong.
Thank you for your sharing, that’s so great and helpful!. In my case, I inspect my post and realize that my OG:img is like this:
property= og:image:secure_url so the facebook debug inform that “The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags” I do not know what happens to my site and how to solve it. Could you share me some advice for this case? I currently use Allinoneseo for social meta tab.
If this is the site you’re talking about:
trangthietbiytehcm.com, then I see that your images appear in the source code and in the Facebook debugger. So, it seems that there’s no problem. If you’re talking about another site, give me its URL.