Fixing Facebook Share Showing Wrong Thumbnail

A lot of Blogger users are having problem getting the correct thumbnail or picture to show up when sharing a post on Facebook. For some reason Facebook pulls a picture unrelated to the shared post. The image seems to come from anywhere - the blog's header, sidebar or footer. It could be the blog logo, image from a picture widget, profile photo from About Me widget or even a commenter's avatar. Strange ... and frustrating.

This is one mystery that remains unsolved for longest time and this post will show you how to solve it once and for all :)

How to make a correct picture appears every time you share a post on Facebook

To make Facebook choose the right thumbnail or picture, you need to do 2 things:

1. Make sure the first photo in each post is 200 x 200px or larger. The photo doesn't need to be uploaded via Blogger editor, since it can be hosted anywhere - Picasa, Flickr, Photobucket etc.
2. Add the following open graph's image property meta tag in the head section of your template right under the <b:include data='blog' name='all-head-content'/> line:

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

   Put the URL of an alternate open graph image in line 4. This image will appear when you share a post that has no image or if you share something other than a post (e.g. homepage, a static page or an archive page etc.). Choose an image that represents your blog, such as your blog logo. Remember the image size must be at least 200 x 200px.

This fix will take immediate effect on your future posts i.e. Facebook would be grabbing the correct picture starting from the very first share.

For existing posts however, you will have to wait a day or two for Facebook to refresh their cache. This is because Facebook usually scrapes pages every 24 hours to update their properties. If don't wish to wait you can make use of Facebook's Open Graph Debugger Tool. Running a post's URL through the tools will force Facebook to instantly refresh the cache.

Enjoy!

Please share this post if you found it useful.