Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Want Facebook to use your images?
This is easy to do if you’ve got the right tools.
In this WordPress tutorial, you’ll learn:
- How Facebook finds Featured Images in your posts
- How to properly implement Facebook thumbnail support
- How to debug Facebook thumbnails when they don’t work.
How does Facebook know which image to use?
Facebook uses something called Open Graph protocol. In short, it’s a standardized way to add information to your page about your page.
For instance, Open Graph elements on your page can tell Facebook what the title is, the URL, and the image to show when shared on Facebook. Here’s what the Open Graph tags on a recent blog post on Compete Themes look like:
You can see all the Open Graph tags that begin with “og:”. Check out that “og:image” tag in particular. That is precisely how you tell Facebook which image to use as the thumbnail when the page is shared.
So, all you need is a way to add an Open Graph image tag to your posts that will automatically use your Featured Image.
Don’t worry, you don’t need to write any code. You just need the right plugin.
There are two plugins that work very well for adding Open Graph tags. In fact, you might even have one of them installed already.
Add Open Graph with Yoast SEO
Are you using the Yoast SEO plugin? If so, you’ve already got everything you need.
In the Yoast SEO menu, you’ll see the Social settings menu listed here:
Visit the Social settings and then click on the Facebook tab.
Finally, you’ll see the option to enable the Open Graph metadata. Make sure this is switched on to enabled if it isn’t already.
That’s all you need to do to add the Open Graph tags Facebook needs.
Now whenever you share a post on Facebook, the Featured Image you set for the post will automatically be used.
Learn how to add Featured Images with Challenger
In the screenshot above, you can see that Yoast also provides an option to set the image, title, and description you want used for your homepage. In addition, there is a fallback image you can use for any posts/pages that don’t have a Featured Image.
If you want Facebook to show your post images, but you don’t want to install Yoast SEO, use the following steps instead.
Add Open Graph with Thumb Fixer for Facebook
If you don’t want to use Yoast SEO, you can install the Facebook Thumb Fixer plugin instead.
Thumb Fixer for Facebook adds Open Graph metadata to your posts and pages automatically. Like with Yoast SEO, the Featured Images will be used as the thumbnails on Facebook.
You can even set a default image for Facebook which is useful for any posts that don’t have a Featured Image.
Here are the settings this plugin adds to your General Settings menu.
You don’t need to set any of these settings, but they can help to further optimize your site for the social platform.
Facebook isn’t showing a thumbnail!
Did you add one of the plugins recommended above?
Are the thumbnails still not showing?
There are two steps you can follow to fix this.
Clear your site’s cache
If you use a caching plugin like WP Rocket, then the Open Graph tags may not be showing up in your pages yet.
To check if the tags have been added, visit any post on your site. Right-click, and select the View Page Source option.
Then use cmd+f (ctrl+f) to search the page source for the following text: og:image.
You should see results like the following:
If you don’t find the tags, then that means you’re viewing a cached version of the page. Use your caching plugin to empty the cache and reload the page. You should then see the Open Graph meta data in the source code.
Facebook still isn’t using the image?
You’ve cleared the cache and you see the OG tags in the source.
What if Facebook still doesn’t show the image when you share your post?
This means Facebook is using a copy of the post from their cache before you added the Open Graph tags.
Visit the Facebook debugger (you’ll need an FB account to access it). Enter your URL and click the Debug button. Once the page reloads, click the “Fetch new scrape information” button.
Once you fetch new scrape information, Facebook will replace their cached version with a fresh scrape of the page containing the newly added Open Graph data.
If you scroll down the debugger page, you will see the table populated with information about your page including the desired thumbnail image. Try sharing your post on Facebook again and you should see the image displaying.
That trick fixes the problem 99% of the time, so make sure to keep that in mind when FB isn’t displaying your image properly.
More Facebook optimizations
In addition to optimizing your site with Open Graph tags, you should also optimize your Facebook page. For instance, getting the perfect Facebook cover image size can help with branding and engagement. Make this your next to-do item after adding Open Graphs tags to your site.
And if you want more people posting your content to Facebook, consider adding social share buttons to all of your WordPress posts.
Conclusion
Getting Facebook to use your Featured Images in the thumbnails doesn’t need to be a pain. In fact, you may already have a plugin installed to add the necessary support.
Next time you have a problem with Facebook thumbnail images, don’t forget to clear your site’s cache and use the Facebook debugger and re-scrape the page for a new thumbnail.
Have any questions about showing Facebook thumbnails from your WordPress posts? Leave a comment below.
