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 :)

Facebook wrong thumbnail image photo picture


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.

18 comments to "Fixing Facebook Share Showing Wrong Thumbnail"

happysus sait May 2, 2014 at 6:24 AM    

How about wordpress, I facing the same problem.

Satya P. Joshi May 2, 2014 at 2:05 PM    

this is nice tips,,
regards ansmachine.blogspot.com

Luminita Dinu (Lumis) May 2, 2014 at 7:55 PM    

An article which saves me a lot of inconvenience. I rush to apply this information. So my blog Facebook page will not display images crazy. Thank you

Ujjwal Kumar Sen May 2, 2014 at 9:13 PM    

Hi, this is such a real hidden information post.

Hootoh Tudia May 3, 2014 at 12:44 AM    

Thank, it update me a lot.. but now i'm confused with
expr:content='data:blog.postImageUrl' and expr:content='data:blog.postImageThumbnailUrl'

Nicolai May 3, 2014 at 8:25 PM    

Thank admin !
I found your blog when I search Google. At first my blog GameVui.biz didn't show thumbar when I share. Now problem was sold.
Thank you again for this helpful post !

Greenlava May 4, 2014 at 7:20 PM    

@Hootoh Tudia
blog.postImageUrl and blog.postImageThumbnailUrl refers to the same image, but of different sizes.
blog.postImageUrl links to the original image whereas blog.postImageThumbnailUrl links to the thumb of that image, which is sized at 72x72px.
Many tutorials uses "blog.postImageThumbnailUrl", but they don't work since Facebook requires at least 200x200.

Deniece Cornejo Surrendered May 5, 2014 at 5:08 PM    

Nice I am always using the facebook debugger, remember do not publish your post without setting your best thumbnail for that post once it is posted it takes time for the thumbnail to be changed even you use debugger.

Result 2014 May 5, 2014 at 11:26 PM    

This is an amazing blog post, I think it will help me to solve my problem

sk nizam May 7, 2014 at 6:05 PM    

thanks for posting a good topic
http://www.blogonmind.com/ blogger help

Denaihati May 7, 2014 at 9:36 PM    

Thanks for sharing very useful information.

Hardy May 8, 2014 at 10:35 PM    

Thanks for the tutorials! It works like a charm.. :D

Lam Kieu May 9, 2014 at 1:11 PM    

Nice tips, i think its facebook problems, sometime it still doesnt work.

Anonymous,  May 13, 2014 at 1:05 PM    

This solved my Facebook thumbnail problem. Thanks.

myownplace here May 14, 2014 at 5:16 AM    

thanks for tip.

Maria Watson May 14, 2014 at 4:32 PM    

Finally found a solution for my thumbnail issue. Thanks a lot.

pear phone 2014 May 14, 2014 at 8:09 PM    

Thanks for the tutorials!

Syed Qasim May 15, 2014 at 4:28 PM    

Well, I have been using the blogger platform form 2 years ago. Now, i'm using WordPress for my own blog. It is working fine for. Someone told me that Google love WordPress too.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment