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 my 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 your 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 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.postImageThumbnailUrl'>
<meta expr:content='"https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&amp;gadget=a&amp;rewriteMime=image&amp;resize_h=200&amp;resize_w=200&amp;url=" + data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/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 post thumbnail is present.
Now when you share posts to Facebook, a proper post thumbnail will be displayed. 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 is because of the caching done by Facebook. You can force Facebook to update the cache by debugging the post URL using this tool.

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.

59 comments :

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

  14. @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

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

    ReplyDelete

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

    ReplyDelete

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

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

  21. thank master....
    its very usefull

    ReplyDelete

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

    ReplyDelete

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

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

    ReplyDelete

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

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

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

    ReplyDelete

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

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

    ReplyDelete

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

    ReplyDelete

  33. Thanks, finally! Works like a charm! :D

    ReplyDelete

  34. Thanks...
    This is Great Tips for me...

    ReplyDelete

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

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

    ReplyDelete

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

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

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

    ReplyDelete

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

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

    if try to look - www.3jaeb.com

    ReplyDelete

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

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

      Delete

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

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

  46. http://consumerwarfareblog.blogspot.com

    ReplyDelete
    Replies

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

      Delete

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

    ReplyDelete

Subscribe to: Post Comments ( Atom )