When you share a post on Facebook, it will display a thumbnail picked from the post page along with a short description of the post. But in many cases Facebook fails to identify the correct image and description that it should use. This leads to irrelevant images and description coming up in Facebook when you or your readers share the post. This is totally annoying, and I had got many queries regarding this on our Facebook page and via email. So for those who are trying to figure a way out of this, here is the solution :)
Which image and Description does Facebook pick from your Post Page
Facebook regularly scrapes your page and caches the data to their servers. They look for meta data information(OpenGraph tags and others) in your post page. The meta data can explicitly specify the image and the description to use when the page is shared.If Facebook doesn’t find any meta data, then their algorithms will fetch some description and image from your Page. Facebook shows a wrong description or image when their Algorithms are not able to fetch the correct image and description from your Post Page.We will solve both of these issues using two different techniques.
1. Fixing the Wrong Image Problem.
You might have noticed that comment avatars, and other irrelevant images from your sidebars come up when you share the post on Facebook . The solution to this is to specify the image in the page meta data. We will be using open graph tags for the same.Go to Template > Edit HTML and just above
</head>Paste the following code snippet.
<b:if cond='data:blog.postImageUrl'> <meta expr:content='"" + data:blog.postImageUrl' property='og:image'/> <b:else/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQH0uxzKByizU0T3Nz150ubS9kUzqO0JD9JaSVAriP3oKO-M2-Uua4aGs0tRMJ_UemwMwGPHkMzYtmD0gih4ORG0eGlL1ErQfIhnOy57zc15_EMY0n-yBZDR8TyxRSSixVlTL_pxtHBVo/s200-c/default.png' property='og:image'/> </b:if>
You can alter the image URL in the above snippet. That image will be used when no images are present in the blog post. Now when you share posts to Facebook, the first image in your post should show up on Facebook as a thumbnail. If the post doesn’t have images, then the fall back image which we have specified in the snippet will be used. If you don’t see results right away , then it might be due to the caching done by Facebook(Facebook caches the metadata). You can force Facebook to update the cache by debugging the post URL using this tool and selecting the "Fetch new scrape information" option. If you want to make sure that the thumbnail shows up correctly, the first image in your post should be atleast 200 x 200 px in size(that's the minimum size which Facebook expects). If the first image is smaller, then Facebook might ignore the OpenGraph tags and use it's own algorithms to find the post image.
2. Fixing the Wrong Description Problem
Wrong description comes up when Facebook is not able to recognize the content and structure of your page. This also can be rectified by adding a search description while creating your post(You can even update the search descriptions of your existing posts). This description will be added as meta data to your post page and Facebook will pick this up.
If meta data is not found, then Facebook normally uses the First paragraph in your page(which is big enough). So it will be a good idea to get used to the paragraph HTML tag <p>content</p>. The Blogger Post Editor doesn’t use paragraph tags but uses lots of line break tags instead. So if you really don’t want to use Search descriptions, then you will have to go into the HTML mode of the post Editor, and make sure that you use paragraph tags Third party Publishing Tools like the Windows Live Writer which has superior Editing Controls uses paragraph tags wherever appropriate . After updating the search description(or updating your post with paragraph tags), use the Facebook debugging tool and debug the post link to force a cache refresh.
3. Scripts coming up in the Facebook Description
I had seen a couple of cases where JavaScript snippets come up in the Facebook Description. Facebook somehow mistook the script for content, and this is probably because of the way you have added the script. Go to your template and see if there are any special characters in front of that particular script tag. If you find one, then remove it, and force a Facebook Cache Refresh.If you found this tutorial useful, then do share it with your Facebook Friends who use Blogger :-). If you have any questions do ask here in the comments or the forum or on our Facebook Page.
This very useful master..
ReplyDeleteAwesome work! well done! :)
ReplyDeleteThanks a lot :D
Finally! Works like a charm!!! :D
ReplyDeleteThanks bro :D
ReplyDeleteThanks a lot! :D
ReplyDeleteAwesome work
ReplyDeleteto snippet post an article a little hard pieces..xixixi
ReplyDeleteHi i hv a prblm hw can i upload a pic 2 my blog spot?
ReplyDeletenice post,thanks.
ReplyDeletegreat post thanks :)
ReplyDeleteThis has been a bane of mine for awhile, but couldn't figure it out. Thanks!
ReplyDeleteThanx...
ReplyDeleteSO frustrating. This still doesn't work. I've added p /p to my post and the description section on the facebook link is still blank. I've been trying to solve this for hours. Makes me think I should search for an alternative to Blogger.
ReplyDelete@Aaron - Which post are you trying to share? As I have already mentioned in the post, FB caches data on their servers. So if you have to see the result right away, you will have to use the Facebook debug Tool.
ReplyDeletethanks i will try it on my blog...
ReplyDeleteHello, I have tried it now... but seems like my problem doesn't fixed... what will I do?
ReplyDeleteI will try it
ReplyDeleteHey, I am still needing help. I can't figure how to fix this problem on my blog. Can you assist further?
ReplyDeleteI use meta itemprop on each post just to display a customized keyword and description tag on facebook and in search engines however I find it hard to place each post a crafted description and kewyword and also I have notice that my html is getting bigger and bigger. I'm starting to worry that my blog wouldn't be indexed because of big html size is there other way to post a crafted description that will post on facebook and in search engines?
ReplyDeleteThis case have come to me for a long time since I first posted my blog's links on Facebook. Some likes coming from readers also showed wrong descriptions on Facebook. And thank God, now I found this post. I have added the snippets and it works well on Facebook, after debugging its cache. Thanks again, my Brother.
ReplyDeletethank master....
ReplyDeleteits very usefull
oh wow i was looking for some fix for my blogger meta graph thanks a million for this article.
ReplyDeleteCan you Help me (i am albert / indonesia )
ReplyDeletemy blog ( http://dknet-clan.blogspot.com) maybe have a little problem
can you help me
i just add some like face book plug in, the plug to comment on blog by using their facebook profil/acount. after i add, its working but in comment box display some text in box (yellow)
the text is " Warning: http://dknet-clan.blogspot.com/2012/02/my-title-weapon.html is unreachable. "
so can you help me...send me email to albert.ansta@gmail.com
thank you
It still doesn't work, can you help me? www.b2p.ge
ReplyDeletegreat work, great tutorials
ReplyDeletethis is not working,still snippet is not coming when i am sharing my blog url on facebook.
ReplyDeletemy blog url is www.trickytech.org,
please chek it out and reply me as soon as possible.
It was working a few days ago and now it its not. I just add an ad banner a few hours ago, it that the reason?
ReplyDeletewow, thats work dude..
ReplyDeletethanks :)
I have tried it..unfortunately this doesn't work :(
ReplyDeleteI have a blog at http://mytopfreeware.blogspot.com/
ReplyDeleteand I'm using firefox.
When I share my post on facebook, it only share the link and post subject but there isn't any
description.
I saw on the web something with P tag to add but it didn't work.
Any idea way?
Thanks for sharing it, After the ccTLD updates FB wasn't recognizing the POSTs Images.
ReplyDeleteStill not worked. What happen with my blog? please tell me how to solve
ReplyDeleteThanks, finally! Works like a charm! :D
ReplyDeleteThanks...
ReplyDeleteThis is Great Tips for me...
does'nt work for me neither.
ReplyDeleteand...lately NO content shown on G+.
so now, sharing is just the post' title on Facebook and on G+
:-(
Wow, can't thank you enough for this!
ReplyDeleteHi, unfortunately did not work for me. I added the above code to the html above the head tag (did not expand widgets as you didn't say I had to) and its still giving me choice of only 3 images and none related to the blogs I am posting to my facebook page. Anymore tips?
ReplyDeleteFacebook's algorithms have now changed. Blogger generates a thumbnail image which is of size 72x72 pixel. Facebook now needs an image which is at least 200 px. This is the reason why it's not being picked up.
Deleteupdated the code so that the 72px image will be re-sized to a 200px one. Image will be slightly blurred but that is the best we can do
DeleteHow do you update the coding to achieve this? I need to do that as well but don't know how to "update" the coding
DeleteAdd
ReplyDeleteexpr:content='data:blog.metaDescription'
to solve the problem in the description without using the paragraph tag
I don't think it's required as
Delete<b:include data='blog' name='all-head-content'/> will automatically render the meta tag with the search description. The only thing is that the user should add Search Descriptions in the post so that that gets rendered as meta tags.
it's not worked for me :(
ReplyDeleteblog url please
DeleteI added the code and it worked but removed my latest blog update title. Please help - www.shadowandhoney.com
ReplyDeleteThis works for me now when I post my url directly to my Facebook page manually. But when I use the share button for Facebook on my site, the wrong image is still showing :( Help? http://canadianangelxo.blogspot.ca/
ReplyDeleteHi, please help it not work for me , only google plus can handle it facebook not.
ReplyDeleteif try to look - www.3jaeb.com
I followed the instructions you gave for the thumbnail, and it didn't work for me at all. :(
ReplyDeleteIf you try to post your latest blog post onto facebook, you can see that it's picking the image properly and is setting it as the first available thumbnail.
DeleteYes, thank you Aneesh. It appears to be working now. I recently posted an article and it picked up the correct thumbnail.
Deletethat's good news :-)
DeleteYes it is. Thank you for sharing your knowledge. :)
DeleteAneesh,
ReplyDeleteJust changed my profile thumbnail but it still picks up the old one. I believe I've debugged. Any suggestons? consumerwarfareblog.blogspot.com
Hello Kate, I am sure you will get a reply from Aneesh soon, but the same thing happened to me. However, after a day or two it appears to be working now. I recently posted an article and it picked up the correct thumbnail.
DeleteH Kate, are you trying to use your Blogger Profile pic when you post to FB. Then this post won't help you. If you implement the above solution,it will pick the first image in the post if any.If no image is added to the post, then Facebook will decide what to pick.
DeleteIf it is still showing your old pic instead of the new one, then that means that it's cached on FB servers. You can force a cache refresh by running the debug tool for that specific page(which you are going to share to FB) or wait for sometime so that FB refreshes the cache on it's own
Thanks all. I did run the debugger and the image that comes up is my new logo and yet the old one shows up when I try to share to my facebook page.
ReplyDeleteAlso have a few items I hope aren't a problem when running the debugger:
Inferred Property:
The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:
The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:
The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
Otherwise everything else is correct and I will wait another day and see if it catches the change.
what's the URL you are trying to share on FB?
Deletehttp://consumerwarfareblog.blogspot.com
ReplyDeleteit's working fine at my end - http://i43.tinypic.com/5ee2l1.jpg
DeleteThank U very much, it works.
ReplyDeleteit was really a big pain for me before.
Thanks again.......
Thank you. It worked.
ReplyDeleteI tried for www.alphainterbiz.com/index_new.html but the thumbnail image is still showing twitter one.
ReplyDeletePls tell me what to do.
Thanks! I tried all the ways to fix that and i couldn't! English is not even my first language, I tried to find a solution in Portuguese but there was nothing! Thanks again! =)
ReplyDeleteIt works thank you, but still the image on the share is blurred :( why? what can i do?
ReplyDeleteI'm getting the following statements in the 'Open Graph Warnings That Should Be Fixed' section when I attempt the change.
ReplyDelete--
Inferred Property:
The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:
The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property:
The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
--
My blog URL is www.shrugnet.com. When use the tool to force the Facebook cache update, the proper og:image is displayed in the Object Properties portion of the Facebook developers page, but Facebook does not update the image or the description. Should I wait a few days?
Any insight appreciated!
After a few days' wait. It works! Thanks for this post!
DeleteBrother when I add Search Description It just removes the Facebook share and all other share buttons from by blog?? give me solution please
ReplyDeleteThanks man! you finally came up with the right way to fix it :)
ReplyDeleteAwesome... Was getting confused for a long time. Very good fix and thanks a lot. I have added the code in http://mrgolmaal.blogspot.com.
ReplyDeleteThanks again...
@Aneesh great post!!! Greetings from Uruguay.
ReplyDeleteI had been looking for this solution everywhere!
Have you found a way around to improve thumbnail resolution? As the picture is resized from 72 to 200 it loses quality.
This worked perfectly - - thanks for your help!!!
ReplyDeleteWe use Blogger. Our posts are often photos, the only text being a copyright notice. Photos in posts are always larger than 200px x 200px. (Our photos are not hosted by Blogger.)
ReplyDeleteRecently, when sharing post links on Facebook or Twitter, the preview image is pulled from the sidebar (those images are also hosted elsewhere), not the post itself. Usually the preview images are the top images from the sidebar. Inexplicably, on occasion the preview image IS correct, though the HTML in those posts appears exactly the same as in posts where the preview is wrong.
Accompanying preview text is more consistently incorrect - i.e., same wrong text every time - and is pulled from rather low on the sidebar. So not only is the text not from the post, it's not even the top text from the sidebar. (Including text in the post's "Search Description" box solves this, but why is it not simply using the post's text? FYI, the previews' default text is consistently pulled from the sidebar's EVERY DOG'S DAY link near the bottom of the page.)
Here's a post with a functioning preview image:
http://newtextureblog.blogspot.com/2013/08/blog-post.html
Here's a post with a malfunctioning preview image:
http://newtextureblog.blogspot.com/2013/08/shopping-trips_20.html
Thank you in advance for any insight you can provide!
Thx
ReplyDeletethank you so much, thats work in my blog..., lovely this tutorial..
ReplyDeleteHave you found a way around to improve thumbnail resolution? As the picture is resized from 72 to 200 it loses quality.
ReplyDeleteyes the post has been updated to make use of the full size image and not the thumbnail. So you shouldn't have any issues with the image quality.
DeleteNothing is solving my problem. My photo at the top of my blog post is 400 x 266 pixels, plenty big enough for Facebook, so why is it that Facebook tells me that the image is too small? It seems that Blogger somehow alters the image to be smaller and thus facebook overlooks it. How do it fix this?
ReplyDeletehere is a link:
http://www.wayfinderali.com/2015/02/traveling-light-ultimate-guide-to-mens.html
couldn't find the required code in your template. Have you followed step 1?
DeleteThank you!!!!
ReplyDeleteUsed the above code and it is not working. Facebook is pulling an image from the sidebar. I have even removed this image from the sidebar and it is still pulling it. Any advice? I want facebook to pull directly from the post, not from the link I am specifying, and not from the sidebar. Frustrated over here. Any help appreciated!
ReplyDeleteAs mentioned in the post, Facebook caches the metadata and it will take some time for the changes to take effect on new "shares" of your existing posts.Your new posts should show the correct thumbnail when you share them.
DeleteYou can force a cache refresh by using the Facebook debug tool. Another point to note is that the first image in your post should be atleast 200 x 200 px in size.
it doesn't work for me too..same like katrina case..and my image is 200x200 definitely.....but sometime on my own facebook it take right image even before adding ur code but in grp sharing it jus take any photos from my previous post...
Delete@Cindy - I don't see the og:image (the code mentioned in the post) in your blog's HTML.
DeleteThis post is so great! I have been searching for HOURS trying to find a solution for my fb link to stop picking up something from the sidebar! This helped so much! Thank you thank you thank you!
ReplyDelete