Fixing your Featured Image with Facebook Debugger

What is a featured image?

First off lets talk about what a featured image is. Blog posts or web pages are commonly shared on social media. You can assign a ‘featured image’ to a web page that will be displayed anywhere that an excerpt or summary of the page is displayed. In WordPress this is easily done by setting the Featured Image in the right hand section of the page when you’re editing the page or post.

set featured image wordpress

 

The problem

It’s a very common problem. You go to post a link to your latest blog post on Facebook. Despite setting the featured image that you want used in previews, Facebook chooses to show a different one. It can be very frustrating when you end up with a totally unrelated image being displayed in your Facebook post.

 

The Cause

There are a few reasons why this might happen.

 

1. You didn’t set the featured image correctly. This is very easily checked in the wordpress editor.

set featured image wordpress

 

2. You did set a featured image, but the image is not a valid size for Facebook to use. Your image should be a minimum of 200 x 200 pixels or it will not be used.

 

3. Quite simply – ‘something went wrong’ when you entered the url and Facebook fetched information about the page. I’ve seen this happen quite often when a page has only recently been published.

 

 

 

The Fix

Once you’ve resolved any problem on your end, the image is easily fixed using the Facebook Sharing Debugger Tool.

Enter the url that is causing you trouble, hit debug, and you’ll get shown the information Facebook has about that url.

facebook-sharing-debugger

 

There’s a lot of information displayed by the debugger, but what we’re most interested in is the Link Preview. This is where you’ll see the incorrect image being used.

facebook-debugger-link-preview

 

 

Usually all you need to do is use the ‘Scrape Again’ button to fetch the information again and get the correct image. You can see here that the information was last fetched 3 hours ago. After using the ‘Scrape Again’ button this time will change just a few seconds ago. Check the link preview section and you should see the correct image is being used by Facebook now. If you share the link again, it will display correctly for you.

facebook-debugger-scrape-again

 

 

If you look at the Open Graph properties section you can see that it’s the og:image tag that contains a link to the image that Facebook will use. This is the ‘Featured Image’ that you have set in WordPress. If there is a problem with the image that you specified as Featured Image then the Facebook Sharing Debugger Tool will display an error with more details here.

facebook-debugger-open-graph

 

 

In this example you can see that the og:image or Featured Image was not set for the page being fetched, or Facebook didn’t find it when the link was last checked.

facebook-debugger-missing-image

 

Leave a Reply

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