Fix: Wrong Description and Image on sharing posts to Facebook

wrong-image-and-description-on-sharing-posts-to-facebookWhen 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.

search-description

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.

84 comments :

  1. to snippet post an article a little hard pieces..xixixi

    ReplyDelete
  2. Hi i hv a prblm hw can i upload a pic 2 my blog spot?

    ReplyDelete
  3. This has been a bane of mine for awhile, but couldn't figure it out. Thanks!

    ReplyDelete
  4. SO 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
  5. @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.

    ReplyDelete
  6. Hello, I have tried it now... but seems like my problem doesn't fixed... what will I do?

    ReplyDelete
  7. Hey, I am still needing help. I can't figure how to fix this problem on my blog. Can you assist further?

    ReplyDelete
  8. I 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?

    ReplyDelete
  9. This 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.

    ReplyDelete
  10. thank master....
    its very usefull

    ReplyDelete
  11. oh wow i was looking for some fix for my blogger meta graph thanks a million for this article.

    ReplyDelete
  12. Can you Help me (i am albert / indonesia )
    my 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

    ReplyDelete
  13. It still doesn't work, can you help me? www.b2p.ge

    ReplyDelete
  14. this is not working,still snippet is not coming when i am sharing my blog url on facebook.
    my blog url is www.trickytech.org,
    please chek it out and reply me as soon as possible.

    ReplyDelete
  15. 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?

    ReplyDelete
  16. I have tried it..unfortunately this doesn't work :(

    ReplyDelete
  17. I have a blog at http://mytopfreeware.blogspot.com/
    and 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?

    ReplyDelete
  18. Thanks for sharing it, After the ccTLD updates FB wasn't recognizing the POSTs Images.

    ReplyDelete
  19. Still not worked. What happen with my blog? please tell me how to solve

    ReplyDelete
  20. Thanks, finally! Works like a charm! :D

    ReplyDelete
  21. Thanks...
    This is Great Tips for me...

    ReplyDelete
  22. does'nt work for me neither.

    and...lately NO content shown on G+.

    so now, sharing is just the post' title on Facebook and on G+
    :-(

    ReplyDelete
  23. Wow, can't thank you enough for this!

    ReplyDelete
  24. Hi, 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?

    ReplyDelete
    Replies
    1. Facebook'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.

      Delete
    2. updated 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

      Delete
    3. How do you update the coding to achieve this? I need to do that as well but don't know how to "update" the coding

      Delete
  25. Add

    expr:content='data:blog.metaDescription'

    to solve the problem in the description without using the paragraph tag

    ReplyDelete
    Replies
    1. I don't think it's required as
      <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.

      Delete
  26. I added the code and it worked but removed my latest blog update title. Please help - www.shadowandhoney.com

    ReplyDelete
  27. This 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/

    ReplyDelete
  28. Hi, please help it not work for me , only google plus can handle it facebook not.

    if try to look - www.3jaeb.com

    ReplyDelete
  29. I followed the instructions you gave for the thumbnail, and it didn't work for me at all. :(

    ReplyDelete
    Replies
    1. If 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.

      Delete
    2. Yes, thank you Aneesh. It appears to be working now. I recently posted an article and it picked up the correct thumbnail.

      Delete
    3. Yes it is. Thank you for sharing your knowledge. :)

      Delete
  30. Aneesh,
    Just changed my profile thumbnail but it still picks up the old one. I believe I've debugged. Any suggestons? consumerwarfareblog.blogspot.com

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. H 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.

      If 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

      Delete
  31. 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.
    Also 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.

    ReplyDelete
    Replies
    1. what's the URL you are trying to share on FB?

      Delete
  32. http://consumerwarfareblog.blogspot.com

    ReplyDelete
    Replies
    1. it's working fine at my end - http://i43.tinypic.com/5ee2l1.jpg

      Delete
  33. Thank U very much, it works.
    it was really a big pain for me before.
    Thanks again.......

    ReplyDelete
  34. I tried for www.alphainterbiz.com/index_new.html but the thumbnail image is still showing twitter one.

    Pls tell me what to do.

    ReplyDelete
  35. 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! =)

    ReplyDelete
  36. It works thank you, but still the image on the share is blurred :( why? what can i do?

    ReplyDelete
  37. I'm getting the following statements in the 'Open Graph Warnings That Should Be Fixed' section when I attempt the change.

    --
    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!

    ReplyDelete
    Replies
    1. After a few days' wait. It works! Thanks for this post!

      Delete
  38. Brother when I add Search Description It just removes the Facebook share and all other share buttons from by blog?? give me solution please

    ReplyDelete
  39. Thanks man! you finally came up with the right way to fix it :)

    ReplyDelete
  40. Awesome... Was getting confused for a long time. Very good fix and thanks a lot. I have added the code in http://mrgolmaal.blogspot.com.

    Thanks again...

    ReplyDelete
  41. @Aneesh great post!!! Greetings from Uruguay.
    I 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.

    ReplyDelete
  42. This worked perfectly - - thanks for your help!!!

    ReplyDelete
  43. We 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.)

    Recently, 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!

    ReplyDelete
  44. thank you so much, thats work in my blog..., lovely this tutorial..

    ReplyDelete
  45. Have you found a way around to improve thumbnail resolution? As the picture is resized from 72 to 200 it loses quality.

    ReplyDelete
    Replies
    1. yes 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.

      Delete
  46. Nothing 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?
    here is a link:
    http://www.wayfinderali.com/2015/02/traveling-light-ultimate-guide-to-mens.html

    ReplyDelete
    Replies
    1. couldn't find the required code in your template. Have you followed step 1?

      Delete
  47. Used 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!

    ReplyDelete
    Replies
    1. As 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.

      You 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.

      Delete
    2. 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
    3. @Cindy - I don't see the og:image (the code mentioned in the post) in your blog's HTML.

      Delete
  48. This 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