Thursday, April 24, 2014

Blogging 101--> How to fix the wrong image pickup on sharing a blog post on Facebook?



Often we see that when we share a blog post to Facebook it doesn't always pick up the right image. Ideally it should pick up the post thumbnail while sharing so that the post is easily identifiable. To ensure that the correct image is picked up we should first understand how Facebook picks an image.

How does Facebook pick an image from our blog?
Facebook regularly scrapes our post page and saves the data to our servers.They look for meta data information (Opengraph tags and others) in our 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 fetch some other image suiting their criteria of a minimum image size of 200 * 200 px from our Page. Facebook shows a wrong image when their Algorithms are not able to fetch the correct image from our Post Page.

How to fix the wrong image problem?
Step 1: Ensure your post image is a minimum of 200*200 px.
Step 2: Set a default image to be used when no post thumbnail is found.
You can set your blog button as the default image by simply adding the below code to your blog template.

a) Goto Template--> Edit HTML and just above


</Head>


b) Paste the below code:

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

c) Change the highlighted image url with your own image url that you want as the fallback image when no thumbnail is found in the post.

Now go share any post on Facebook and see the correct image. :)

Tip: If, by any chance, you dont see the correct image even after adding the above fix then this is because of the Facebook cache. You can force Facebook to update its cache by using the below tool.

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

Add your post URL in the tool and press Debug.

PS: This can get tedious because you have to enter the URL of every post that isn't showing the correct image and again and again force Facebook to update its cache. It is tedious but it is also the only way. One of the many quirks and drawbacks of Facebook.


I hope you find these steps helpful. Do leave your comments to tell me if this worked for you and what else would you like to know about.

-Njkinny


Follow on Bloglovin

Receive all updates in your mailbox. Enter your email address:

Delivered by FeedBurner

 
Real Time Analytics