Whether your a blogger, social media marketer, or even just a small business owner, at some point you’ll probably run across the issue of Facebook not displaying the correct image from your WordPress site. Sometimes Facebook might pull an old image or even worse, no image at all! Thankfully though you can easily troubleshoot and fix these types of issues using a tool called the Facebook Debugger. Check out some common scenarios below that you might run into and how to fix them.
How Facebook Fetches Information
Whenever you share things to WordPress, Facebook caches your images on their servers and CDN (read more here on what is a CDN and how it works). You can think of this the same way caching works on your site, sometimes you have to clear the cache to get things working again. The same sometimes goes for Facebook. If you make updates on your site, Facebook might still show an old image when you go to share it, this is because it doesn’t fetch new information, but rather serves up the information it already has cached.
The same goes for information about your link and content itself. They fetch what they call Open Graph Meta Tags. According to Facebook, the Open Graph protocol enables any web page to become a rich object in a social graph. Basically, these are tags (code) that tells Facebook info about what you are sharing.
Not sure if you are using Open Graph Meta Tags on your site? Well, you probably are, you just might not know it. ? If you are using popular plugins like Yoast SEO or Social Warfare, these in fact automatically add these tags for you behind the scenes.
Let’s take our website speed optimization guide as an example. If we look at the source code of that post, we can see the following data regarding Open Graph. Note: Open Graph uses different attributes, such as
og:title and the one we really care about for this tutorial, which is
og:image. This is the code on our site that Facebook looks at to determine which featured image, title, and description to show.
<meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="A Beginner's Guide to Website Speed Optimization (WordPress-Friendly)" /> <meta property="og:description" content="In-depth website speed optimization guide that shows you how important it is to have a snappy website. DIY instructions and tricks to improve load times." /> <meta property="og:url" content="https://kinsta.com/learn/page-speed/" /> <meta property="og:site_name" content="Kinsta Managed WordPress Hosting" /> <meta property="article:publisher" content="https://www.facebook.com/kinstahosting" /> <meta property="article:author" content="https://www.facebook.com/mark.gavalda" /> <meta property="article:tag" content="webdev" /> <meta property="article:tag" content="webperf" /> <meta property="fb:app_id" content="148976462317083" /> <meta property="og:image" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" /> <meta property="og:image:secure_url" content="https://kinsta.com/wp-content/uploads/2016/03/website-speed-optimization-2.png" />
Using the Facebook Debugger
As with any platform or tool, it will have problems or quirks that you have to work around, especially if you don’t follow the guidelines laid out for best practices. The Facebook Debugger tool was created to help you solve issues with your Open Graph Meta Tags, as well as troubleshoot caching.
You can find the Facebook Debugger on the Facebook developer site under Tools & Support. If your the one sharing a lot of content on Facebook, this is a good link to bookmark for future reference.
To crawl a post simply enter in the URL and click on “Debug.” We’re actually going to use a live case in our example. We just recently updated the image on our website speed optimization article. When we enter it into the Facebook Debugger it will first pull the cached information that they have on their end (as seen below).
This is what people are actually seeing when they share our post around. However, in this case, it is pulling an old image from before we updated the post. ? We can also see that the
og:image is the old file name.
So what can we do? There are two things that need to be done. Follow the steps below.
Step 1 – Clear the WordPress Cache for That URL
The very first thing we need to do to ensure Facebook grabs the latest information is to clear the cache on our WordPress site itself. That’s right, technically there are two layers of caching that could be involved here. If the old image is cached on your site still, the Facebook Debugger isn’t going to be able to help fix your problem as it will simply re-fetch the cached information.
As far as WordPress caching goes though we are OK (and can proceed to step 2), because with Kinsta server-level caching, whenever a post is updated, the cache for that page or post is cleared automatically. Read more about how Kinsta caching works. If you are using a different caching solution or third-party plugin you’ll want to look into their documentation to ensure you know how to clear your cache for a URL. Here are a few links to some of the popular caching solutions:
- Clear cache on a specific page/post with WP Rocket
- Clear cache on a specific page/post with Cache Enabler
- Clear cache on a specific page/post with WP Fastest Cache
If all else fails, you can always clear the cache on your entire WordPress site (as seen below). However, for performance reasons this is usually not recommended as your site will have to rebuild the cache, degrading your load times in the meantime.
And if you are still having issues, your image could also be cached on your CDN. In which case you might need to purge your CDN cache.
Step 2 – Scrape Again in Facebook Debugger
Now that the cache is cleared for the post or page in question, we’ll need to scrape it again in the Facebook Debugger tool. So we enter the URL and click the “Scrape Again” button.
You might encounter a warning. In our experience, these are not always the most accurate. For example, we see a warning that says our image exceeded the maximum size of 8 MB or the server was too slow to respond. First of all, our image is nowhere near that size, in fact, it is only 160.63 KB. Second, our server is lightning fast and the entire page itself loads in under 1 second.
So this is where we simply hit the “Scrape Again” button for a 2nd time. Yes, it might sound odd. But a lot of times you might need to scrape twice. It only takes a few seconds. And boom! There we go. We can see below that it is now pulling our new featured image and if we look at the
og:image attribute it is indeed the new file name.
It is important to note that this won’t update the image for already shared Facebook posts. This only impacts posts in which you or other people share after the fact.
Additional Facebook Debugger Tips
You can use the Facebook Debugger tool to not only update old images but the content (text) you see on your Facebook posts as well. The title and description both are Open Graph Meta Tags. So if you need to reword something, update it it in WordPress, and follow the exact same steps above.
The provided ‘og:image’ properties are not yet avaliable
Also, just because we ignored the warnings above doesn’t mean they are not always useful. In fact, there are recommended sizes when it comes to images that you should be using. Otherwise, bad things can happen. Such as an image not showing up at all (as seen below in this warning).
The provided ‘og:image’ properties are not yet available because new images are processed asynchronously. To ensure shares of new URLs include an image, specify the dimensions using ‘og:image:width’ and ‘og:image:height’ tags.
The above occurred because our image was too small. The minimum image size Facebook requires is 200 x 200 pixels. Usually the bigger the better when it comes to Facebook images. We put together a post with all the recommended image sizes for social media. 1,200 x 630 pixels seems to work best for most people. It is OK to go bigger as well, in fact our image on our post in the first example was 1460 x 730. Just remember that Facebook will crop anything bigger, and so maintaining that aspect ratio is one of the most important parts.
If you’re using a plugin like Yoast SEO, it can also be recommended to manually set the image. Perhaps your featured images on your WordPress theme are a different aspect ratio or size. Or perhaps you don’t even use featured images!
In this case, the Yoast SEO plugin allows you to manually uploaded a differently sized image just for Facebook which will populate those Open Graph Meta Tags. You can also manually set the title and description if needed.
The following required properties are missing: fb:app_id
You might also see the following warning talking about a missing Facebook App ID. It’s important to note that this doesn’t interfere with the ability to share posts on Facebook in any way. A lot of times this can simply be ignored. However, it does limit your ability to use Facebook Insights data.
The following required properties are missing: fb:app_id
If you want the additional Insights data then you need to add your Facebook App ID to your site. Here are instructions below on how to add it in WordPress using the Yoast SEO plugin.
- Create your Facebook App: https://developers.facebook.com/docs/apps/register (this is completely free)
- Copy your Facebook App ID from the app dashboard.
- In your WordPress dashboard, click on “SEO” on the left-hand side.
- Under the “Facebook” tab you can enter in your Facebook App ID.
Make sure to clear your site’s cache before re-testing in the Facebook Debugger tool.
Hopefully you understand a little more about the Facebook Debugger tool and how you can use it to troubleshoot and fix images on your WordPress site. Remember to clear all layers of caching and then scrape away. Your new images should then appear correctly for all to share on Facebook.