How to remove/get rid of irrelevant +Snippet thumbnails before everybody can see them in Google+

I just learned that one of the pains bloggers that are using Blogger have to face in Google+ is the appearance of irrelevant thumbnails after readers had share their blog posts in Google+. Thumbnail images that have nothing to do with the shared blog posts were ‘chosen’ by +Snippet and some bloggers find it quite embarrassing, I suppose.


Do not blame +Snippet


Now, there’s one thing that we have remember here. +Snippet scans for images from each link that is about to be added to Google+ and those images could have come from places other than your main content. If you have images in your header or sidebars, +Snippet will grab those too! It is really up to the sharer to choose the best thumbnail. In another word, we as bloggers really have no control over the matter but with a little trick, we can somehow make sure that the first thumbnail sharers see on their +Snippet previews is related with our blog posts. More about this later! :)


Alright, let’s go back to the problem in hand. I got to know about it after reading a comment left by a well known blogger. His name is Mohammad Mustafa Ahmedzai and he’s the blogger behind mybloggertricks.com. In his comment, he said:


Everything is working fine except for the thumbnail image. The image that is being fetched is the header background for all posts and I tried hard to solve it but failed each time. Would highly appreciate if you could guide me on how to do solve the image issue now. :)

Alright, let’s see what his problem is all about.


Irrelevant thumbnails in +Snippet (Google+)




As you can see from the above screenshot, the image of Mohammad’s blog header is the first thumbnail that had been grabbed by +Snippet. There were others of course but one has to click on the < or > button to see or select other thumbnails. Tell me, how many of you actually browse through the selection of thumbnails that +Snippet has prepared for you? :)


I totally understand why Mohammad wanted to get rid of that header thumbnail. It might have significant relevance with his blog but is not at all related with his blog posts.


Alright, let’s learn how to remove of those irrelevant thumbnails.


How to remove irrelevant +Snippet thumbnails before they get into Google+


To the best of my knowledge, there are several ways to do this. Let’s go for the one that offers the quickest fix.


I would advise Mohammad to take a good look at his Blogger template and identify all images that have been tagged with the HTML img tag. You don’t have to identify everything, just those that have been placed before the Blogger Blog Posts widget. The widget should look something like the one shown down below:


<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

This is important because we want to make sure that the first image that +Snippet grabs for our blog posts is the one (or more) contained in our blog posts (our Blogger Blog Posts widgets) themselves. Once identified, find some other ways (use CSS!) to embed those images on your blog. Do not use HTML img tag to embed images on your blog.


I have taken a look at Mohammad’s Blogger template and found that the image of his header is the first HTML img tag element in his blog. Thus, it is not surprising to see his header image being identified as the first thumbnail in +Snippet.


<div id='header-inner'>
<a href='http://www.mybloggertricks.com/' style='display: block'>
<img alt='My Blogger Tricks' height='150px; ' id='Header1_headerimg' src='http://1.bp.blogspot.com/-ktCR4Ak43xE/TdHjKPaxToI/AAAAAAAADbA/SP-P5AlUQqQ/s1600/myblogger-tricks-copy2-copy.jpg' style='display: block' width='483px; '/>
</a>
</div>

I would suggest Mohammad to remove his HTML img tag and replace it with CSS background-image property. It should look something like this:


background-image: url('URL of your header image');

The above steps if followed correctly will help +Snippet. Yes, replacing images that had been tagged with HTML img tags with CSS background-image properties (before your Blogger Blog Post widget) will help +Snippet create thumbnails from images that come together with your blog posts. You can even replace images that had been tagged with HTML img tags, embedded after the Blogger Blog Posts widget if you like but I don’t think it is necessary. Just change those embedded before your Blogger Blog Posts widget.


Conclusion


Anything can be fixed! :) Like what I had said earlier, there are several other ways to get rid or remove irrelevant thumbnails from appearing in +Snippet and ending up in Google+. I will only document those other steps if there are requests to do so. In the meantime, please use the above solution to solve your problems. :)

Subscribe via RSS or Email:

Related Posts


2 comments:

Mohammad Mustafa Ahmedzai said...

Hi saidul,

Thank you for writing such a comprehensive tutorial. I will try to implement it but if img tag was the reason then this must have been the case with all blogger templates then why specifically mine? However I will try yours method too and will do some trial and error and will update you once I get to a solution. Thanks buddy this post means a lot. :)

homebiss said...

Mohammad,

No problem, brother. :)

No, the problem is not specifically yours alone. Many other Blogger templates are having the same problems except those that used the CSS background-image property to embed images. Take a look at Melvin's blog for an example. His problems are identical with yours.

Post a Comment

  • Commenters are encouraged to leave comments via OpenID but if you have problems in leaving one via OpenID, please refer to this excellent guide.
  • Comments that add tremendous value to the blog post will not only get approved but also will be personally tweeted (learn how!) by the blogger behind this blog, giving commenters the opportunity to get even more traffic and gain even more exposure to their sites or blogs.
  • Comments that have links in the bodies of comments will never be approved.
  • Preferably comments should be made in English but comments in other languages are also acceptable.