How to Set Featured Images as Facebook Thumbnails

This is a tutorial for WordPress users who are adding Facebook thumbnail support for the first time or can’t get Facebook to show an image when sharing.

In this concise guide, 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. Luckily, there’s a great plugin that does it for you.

Ready to learn WordPress? Conquer WordPress in the next hour with WP101's video tutorials. Start Learning Now.

How to add Open Graph tags to your site

Before I tell you which plugin to use, you might already have one installed.

Using Yoast SEO

Are you using the Yoast SEO plugin? If so, all you need to do is navigate to the Social settings menu (SEO > Social). Then, click on the Facebook tab at the top, and check off the Add Open Graph meta data box.

screenshot of Yoast SEO Facebook social settings

Remember the image I shared above of the Open Graph tags? Those came from Yoast SEO. All you need to do is check off the box above, and they’ll be added automatically.

Using Facebook Thumb Fixer

If you don’t use Yoast SEO, you can use the Facebook Thumb Fixer plugin instead.

Facebook Thumb Fixer will add the necessary Open Graph tags to your page, and automatically use your Featured Image for the thumbnail image on Facebook. You can even set a default image for Facebook which is useful for any posts that don’t have a Featured Image.

screenshot of general settings with facebook thumbnail fixer settings

Facebook isn’t showing a thumbnail!

If your Featured Images aren’t showing when you share your posts on Facebook, or if Facebook is using the wrong thumbnail, try this simple trick:

First, visit the Facebook debugger (you’ll need an FB account to access it). Then, enter your URL and click the Debug button. Once the page reloads, click the “Fetch new scrape information” button on the right.

screenshot of facebook debugger app

Facebook most likely cached a version of your page before you added the Open Graph data. For some reason, this seems to happen all the time.

Once you fetch new scrape information, Facebook will replace their cached version with a fresh scrape of the page containing the new Open Graph information. If you scroll down the debugger page, you will see the table populated with information about your page including the desired thumbnail image. Copy and paste your post URL into Facebook to confirm that the image is now showing.

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.

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 check out the debugger and re-scrape the page for a new thumbnail.

Related Posts

23 Comments

  1. 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

    • 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. Thanks for tutorial .:) amazing.

  3. 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.

    • 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. Thanks sir this article really help me for Facebook thumbnail

  5. 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?

    • 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. 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?

    • 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.

  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.

    • 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. 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. 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. 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.

    • 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. 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?

    • 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. I really like ur article n I have learned alot from this post

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

Post a comment

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