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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDagIXWQTEHmpEDIp81rIfFQZKTD1SbTiVvSNEqMBML-xs-ykEQBL6hczXiELCtV4hUvT9Yi5uqoPiw5V879pSad_H_8yruULCbUwWCmDLIOChAsmBwSUQOgbLdTDvziGhKEXL2WhbJyg/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. :)