As I’ve been participating in the January 2019 Ultimate Blog Challenge this month, I go to post a link to my daily blog article, only to notice my link renders a cut off version of my logo as the thumbnail image. In the past, this didn’t use to happen when I blogged before. Why was this happening? Everyone else’s links showed a nice, cropped image. Being in the business of website and social media marketing, it doesn’t serve me well to showcase something that is not appealing when a visitor goes to read my FB post. I’ve got to fix this quick. And I did.
If you want Facebook to use your featured images and have them show correctly, I recommend two tools or plugins that will easily resize your images and render this issue resolved before you start posting to FB.
In this tutorial, you will learn:
- How Facebook finds featured images in your posts
- How to implement Facebook thumbnail support using a plugin
- How to debug FB thumbnails when they don’t work
Let’s start with this question:
How does Facebook know which featured image to use?
Simple. Facebook uses what is called Open Graph Protocol. In simple terms, it is a standard way to add information to your FB page from another page. For example, Open Graph elements on your page tells Facebook what the title is, the URL and the image to appear on Facebook. Below is a sample of what an Open Graph tag looks like from one of my recent posts.
You can see all the Open Graph tags begin with the letters, “og:”. Pay close attention to the “og:image” tag in particular. This is exactly how you tell Facebook which image to pull in as the thumbnail image when your page is shared. Now all you need to add is an Open Graph image tag to your posts that will automatically pull in your featured image from your blog post. So you’re not having to be an expert and write code to accomplish adding tags to your post, there are two different plugins that manage this quickly and easily.
Add Open Graph with Yoast SEO
If you already have the Yoast SEO plugin installed on your site, then you already have what you need to switch on the Open Graph feature for Facebook. In the Yoast SEO settings menu, you’ll see the SOCIAL settings listed in the screenshot below.
Visit the Social settings and click on the Facebook tab.
Next, you’ll see the option to “enable” the Open Graph metadata. Be sure this is switched to ENABLED if it isn’t already. And you’re done and done! In the screenshot below, you also have the option to set the image, title and description you want used on your home page. It also provides a backup image you can use for your posts and pages in case you don’t have a featured image set.
Add Open Graph with the Thumb Fixer plugin
The other option is to install the plugin called Thumb Fixer for Facebook. It also adds Open Graph tags to your posts and pages automatically. Just as Yoast SEO, your featured images will be used as the thumbnails on your Facebook posts. You can also set a default image for Facebook for those posts and pages that do not have a featured image set.
Screenshot below of the plugin settings, which simply adds a few additional lines to your General Settings menu:
The settings noted above (Default Facebook Thumb, Facebook App ID and Homepage Object Type) are not required to be filled in, but they can help to optimize your site further for this particular social media platform.
How to troubleshoot if Facebook still isn’t show your thumbnail
Did you install and configure one of the plugins above? Are the thumbnails still not showing? Here are two ways to fix this.
- Either clear your site’s cache using a caching plugin like WP Super Cache or WP Rocket. Both are equally competent in managing caching on your website. To check if Open Graph tags have been added, visit any post on your site and “right-click” and select the “View Page Source” from the drop-down menu (see screenshot below). Perform a search by typing, “ctrl+f” and search the page source for this text: “og:image”. If you don’t find the image tags, you’re viewing the cached version of your page. Use your cache plugin to empty the cache and simply reload your page. You then should be able to see the Open Graph tags in the source code.
- If Facebook still doesn’t show your featured image, it means Facebook is using a copy of the post from their own cache before you added the Open Graph tags. Your solution to this is the following:
Visit the Facebook debugger page and enter your URL, then click the “Debug” button. Once the page reloads, click on the “Scrape Again” button. Facebook then will replace their cached version with a fresh “scrape” of the page containing the newly added Open Graph data.
If you scroll down the FB debugger page, you should see the populated information about your page, including the correct thumbnail image for that post. Try re-sharing your post on Facebook again and you should see the featured image displaying this time.
Problem solved! If you have any questions or comments…or your own solutions to the FB featured image issue, feel free to leave a comment below.
Please keep in mind that I may receive commissions when you click my links and make purchases. However, this does not impact my reviews and comparisons. I try my best to keep things fair and balanced, in order to help you make the best choice for you.
- 5 Creative Ways to Build Your List Using Video - January 31, 2020
- AccessAlly Certification Training in the Works - January 30, 2020
- 5 Offline Marketing Strategies to Build Your Email List - January 29, 2020
Recent Comments