How to fix Facebook Post Thumbnail Issue in Blogger

Advertisements
Upon sharing your articles on Facebook, you might have noticed incorrect post thumbnail appearing instead of showing the right thumbnail.  A lot of our users had been complaining about incorrect post thumbnail appearing when we share our articles on Facebook. In this article, we will show you how to fix Facebook post thumbnail issue in Blogger.

Why Facebook Shows up Wrong Post Thumbnail:

There are quite a few reasons why incorrect post thumbnail is shown up. However, one of the most common issues is that multiple images are set to og:image tag that is responsible to show up images as post thumbnail upon sharing a link on Facebook.

This issue revolves around Facebook open graph tags that most of the blogger developers forget to include in blogger templates. It automatically selects the first image from your posts and makes it your post thumbnail.

Let us now fix this issue with all the possible stuff we got.

Adding og:image Tags in your Template:

The very first thing you can do to solve this issue is to add og:image tags to your template. Since we have already written a comprehensive tutorial on how to add Facebook open graph tags in blogger so be sure to read that.

However, if you are less likely to just add og:image tags to your template then go to Blogger >> Template >> Edit HTML and just above the </head> tag paste the following piece of code.

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>

Be sure, you must upload images to your posts from your system hard drive because images from any external source or URL would not be accepted by neither blogger nor Facebook.

Manually Uploading your Thumbnail Image:

If you still face problems that Facebook is not picking up your correct images as post thumbnail, then you can manually upload your thumbnail images while you’re sharing your article on Facebook. As It can be seen in the screenshot below that how you can upload the image you want to show as thumbnail.
This image will be saved in your Photos section. Whenever users will share your posts on Facebook it will continue to display the correct image. However, if users choose to share your post from the Post Address or URL than it will display incorrect images again.

Facebook Debugger Tool at Work:

The best way to figure out or troubleshoot the issue that is responsible for not displaying the right post thumbnail image on Facebook is to use Facebook Debugger Tool.

Just paste the URL of your post in the debugger tool and you will notice a list of errors that you need to fix to make your blog more user-friendly with Facebook.

We hope this article would turn out to be helpful for those who are continuously facing this issue on their blogs. If anyone of our readers has resolved his/her issue with the methods that are not listed above then feel free to share it in the comments below. To allow your readers to share your content on Facebook in just one click try adding social sharing buttons in blogger posts. 
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

15 comments

June 15, 2015 at 7:03 AM

thank you so much, it helped a lot

August 9, 2015 at 5:10 AM

Didn't work at all...

Editorial Team MOD
August 15, 2015 at 10:14 AM

You must upload images to your site from your hard drive not from any other external source.

November 6, 2015 at 10:09 AM

Doesn't work for me, and I upload all the photos from my computer (no external source) :(

Editorial Team MOD
November 12, 2015 at 7:26 AM

Fetch your Post URL using this tool

https://developers.facebook.com/tools/debug/

December 29, 2015 at 10:31 PM

I tried all of the suggessions but nothing worked for me. my blog is nadiyanajib.blogspot.com and everytime I share a post on Facebook, it only picks up the same images which are on my main blog. It never picks up any images from that perticular post which is extremely irritating. I tried inserting the code you gave in template HTML and also debugging tool but nothing seems to be working for me. Please help me out.

Editorial Team MOD
December 30, 2015 at 11:37 AM

Hi,

I am not sure why it is not working for you because I tried myself and it works very fine. I Pick two URLs and it gave two different images (takes the first picture from the blog post).

Take a look at the image below for the result I got:

https://3.bp.blogspot.com/-rZkDbxdT1ao/VoQyKE9z1wI/AAAAAAAAGO8/7L926H1KfFM/s1600/test.png


Cheers
Syed Faizan

January 2, 2016 at 6:28 AM

I tried but it did not work :(

January 31, 2016 at 10:58 AM

hi, made all the changes you suggested, but facebook still picks blog header image instead of image from post. also when i post to facebook there is no 'upload photo' facility. this problem only started and couple of months ago, and is driving me crazy...

February 1, 2016 at 9:09 AM

Please,help! I have the sameproblem.When I try to post an article to facebook, it shows the main picture from the blog not from the article.I tried a lot but it didn't work! This is the blog http://activitatieducativedelasuflet.blogspot.nl
Thank you very much!

February 10, 2016 at 9:29 AM

it didn't work for me too

March 1, 2016 at 1:51 PM

Not at all helpful. I'm generally not uploading photos at all. I just want my background image to be the thumbnail. The screenshot you included matches nothing anywhere that I can find.
How do I make my background photo show up in FB as the thumbnail?

April 1, 2016 at 4:36 AM

It works!
Thank you very much!

May 25, 2016 at 3:18 PM

Thanks!!!

July 27, 2016 at 11:55 PM

It's working fine! And please keep in mind that facebook needs at list 24 hours to generate new data, so, to whom it concerns, don't expect much to see right after you paste the code to your blog ;)
Greetings from Greece!

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.