Blog Help: How To Make Sure Facebook Shows The Correct Image

Today I discovered an issue after a friend shared this post on Facebook. I noticed that it had the wrong image in the thumbnail. Instead of showing the photo from the post, Facebook had selected an badge from my sidebar. After asking some other Blogger users I discovered that I’m not the only one experiencing this glitch; others were finding that Facebook was wrongly sharing images from their header, sidebar, footer, widgets – anything except the image it should be using!

 

HOW TO MAKE SURE FACEBOOK CHOOSES THE RIGHT THUMBNAIL IMAGE

There were three things that I needed to do – change the image size, add a bit of code and debug:

IMAGE SIZE

The first thing I had to do is make sure that the image in my blog post is at least 200x200px in size. If it isn’t, Facebook will try to find another suitably sized image to use, and I don’t want it to do that! Whether I’m uploading an image or hosting elsewhere, I need to make sure it’s the right size.

CODE

I also had to add the following open graph meta tag to my template, in the head section. First, I saved a back-up of my blog template. Then, I looked for this line:

<b:include data='blog' name='all-head-content'/>

And in the line directly below it added the following:

<b:if cond='data:blog.postImageUrl'>
 <meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
 <meta content='Put URL of alternative image' property='og:image'/>
</b:if> 

Sometimes I might publish a post that doesn’t have an image or I might share my homepage instead of a specific blog post, so I chose an image from my blog and added it on the 4th line where it says ‘Put URL of alternative image’.

DEBUG

Once the above two steps are done, any future posts should immediately show the correct thumbnail image when shared on Facebook. Existing posts can take a while to update though so I ran the URLs through the Facebook Open Graph Debugger which sorted them out in seconds.

  

I hope you find this helpful! Don’t forget to ‘like’ Quite Frankly She Said on Facebook!