How to Set Featured Images as Facebook Thumbnails

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:

Facebook open graph tag meta elements

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.

How to add Open Graph tags to your site

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:

Yoast SEO Social Settings

Visit the Social settings and then click on the Facebook tab.

Yoast SEO Facebook Settings

Finally, you’ll see the option to enable the Open Graph meta data. Make sure this is switched on to enabled if it isn’t already.

Yoast SEO Enable Open Graph

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 plugin on wordpress.org

Thumb Fixer for Facebook adds Open Graph meta data 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.

Facebook Thumb Fixer

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.

View Page Source

Then use cmd+f (ctrl+f) to search the page source for the following text: og:image.

You should see results like the following:

Open Graph image tag example

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.

screenshot of facebook debugger app

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.

Related Posts

24 Comments

  1. felipe kamey felipe kamey

    hi i was wondering if you could help me a bit. i did the facebook thumb fixer due to having a different seo already installed, yet when i share to facebook i get a still image instead of my gif. i already tried scraping it via facebook and i came up with the same results. thank you

    • Ben Sibley Ben Sibley

      I’m not sure if Facebook allows GIFs to be used. Although there is a quirk in WordPress where only the “full size” version of a GIF will animate. Check if you’re using the Large or Medium version in your Featured Image, and switch to the full size if you are.

  2. zubair khan zubair khan

    Thanks for tutorial .:) amazing.

  3. 101MorningQuotes.com 101MorningQuotes.com

    I have a question. Is it possible to have multiple og: type tags on the same page?
    If so how would you target each?
    I want to put og: type for GIF, MP4 & WebM. How should I handle this?

    I hope I could get an answer.

    • Ben Sibley Ben Sibley

      Yes, you can add multiple OG tags to one page. This page has the following:

      • locale
      • type
      • title
      • description
      • url
      • sitename
      • updated_time
      • image

      Facebook has tags for images, music, and video (short reference). There isn’t a tag for GIFs vs PNG or JPG, but the image one should work fine. I don’t think there is an audio tag outside of music, but there are some variations here in the complete reference.

  4. Ajay Kumar Ajay Kumar

    Thanks sir this article really help me for Facebook thumbnail

  5. Naren Naren

    When i’m sharing my blog post in facebook or any other social media platforms, featured image is cropping, full image is not displaying i’m unable the to find the problem for it.

    Is there any solution?

    • Ben Sibley Ben Sibley

      Hi Naren,

      There isn’t a way to control how Facebook crops images when sharing links. For reference, they use an aspect ratio of 1.91:1. A common image size to use is 1200x630px.

  6. Yel Yel

    Thank you! Perfect instructions.

  7. Ebere Ebere

    I just downloaded yoast SEO on my wordpress but i can’t find the “social tab” on the drop down. All i see is Dashboard, search console and go premium.
    What can i do?

    • Ben Sibley Ben Sibley

      They’ve hidden it by default in a newer release. In the main Dashboard menu, click on the Features tab and then enable the Advanced Settings Pages option. This will add the Social menu back to the site.

      • Ebere Ebere

        Thank you so much !!!

  8. Lily Liseno Lily Liseno

    I don’t see the front page options on the social tab, just the option to upload an image as a backup if the page has no image.

    • Ben Sibley Ben Sibley

      You can visit that page itself and set the image via the Featured Image or this setting found below the editor. If you’re displaying posts on your homepage then the backup image can be used.

  9. Pablo Pablo

    Yoast SEO is a complete solution for wordpress, is the best plugin and you can’t fail to install it.

  10. liy liy

    thanks so much, first comment ever on social platform, i could’nt resist.

  11. Sony Kashyap Sony Kashyap

    Awesome post. I have been experimenting a lot with facebook for my own website vtech academy of computers, so this is definitely something I will be testing out.

  12. Ankush Ransiwal Ankush Ransiwal

    The problem is occurring while sharing the blog posts on the Facebook. I tired yoast seo and everything i could possibly do and i managed to get the space for the picture but there is just this blank white space coming above the link instead of thumbnail featured image. help me, I’m stuck on this for past week.

    • Ben Sibley Ben Sibley

      Right-click on the page and choose “view source.” Look for the “og:image” meta tag and find the image URL there. Visit the URL and make sure that the image is loading and the URL is correct.

  13. Atozfiles Atozfiles

    I want when I share a post on Facebook page or timeline. then show Gif image at the feature. but fail in many time. can you suggest me any plugin?

    • Ben Sibley Ben Sibley

      When you upload an image to WordPress, it will create up to 3 copies of it (thumbnail, medium, large). WordPress has a quirk where only the original version of a GIF (“full size”) is animated, so if FB uses the thumbnail/medium/large version then it won’t be animated. If you’re using Yoast, you can specify the URL of the image you want FB to use. Use the URL input to make sure the full size version of the image is used and then it should be animated on FB.

  14. mack mack

    I really like ur article n I have learned alot from this post

  15. ZMDrivers ZMDrivers

    Thanks sir this article really helps me, Yoast SEO is a complete solution for wordpress, is the best plugin. Thanks

  16. Uma Uma

    Thanks for your tutorial!! A nice detailed explanation.

Post a comment

Your email address will not be published. Required fields are marked *