Tag Archives: Google Images

Optimising Bees for Google Image Search using CSS to Show Part of the Image

Google has changed the way image search results are presented. This is having a major impact on traffic driven to sites from image search results.

With Google trying to keep visitors away from your site, what can be done ?

This post shows one way to make the most of the space Google now gives an image.

The idea is to modify the images on your site so that:

  • enlarge the image to include a call to action in the border
  • then use CSS to show only part of the image on the site

When Google crawls the image, it will take the entire image including the border and calls to action within.

This will enable both brand impressions and marketing messages to be shown to people using Google image search, so even if you can’t get the visit, you can at least claim some mind share.

[An alternative, is simply to add a ‘watermark’ to all of your images, however that doesn’t look so good on your site.]

The following example using an out of focus bee settling on a lavender plant, shows how to use CSS to control the visible area of the photo.

The CSS used for the following image ensures that only part of the image is visible on page:

img.wp-image-363 {
 position:absolute !important;

The html code for the image itself:

<img class="size-full wp-image-363" title="Bees on lavender" 
src="http://www.seoeditors.com/wp-content/uploads/2013/01/bees-on-lavender-google-image-resize-css.png" alt="" >
Bees on lavender - an extract of the whole image
Using CSS to clip images
Click on the image above to see the full size photo of the bees on the lavender, including the additional border.

The border is transparent to maximize the appearance of the CTA within Google image results.

If you try searching in Google for this image, you should see the image complete with calls to action.


Give it a go and let me know what you think about this technique.

SEO Colour Experiment Update

The Google images experiment has been running for 4 days, and so far, just two of the ten images published in the previous post (laying out the details of the experiment) have been indexed; namely the purple image and the gray image.

Getting images indexed in Google
Getting images indexed in Google - purple preferred

Getting Google to own up to indexing the gray image requires advanced search options, it is revealed for searches of black and white and gray images:

Indexed images revealed using black and white filter
Indexed images revealed using black and white filter
Indexed images revealed using gray filter
Indexed images revealed using gray filter


There are some early takeaways from the experiment so far:

  1. Google chose to index just two of the available images in the post, a purple image and a gray image. This might suggest that galleries of images are not a good idea for SEO, as some of those images might not make it into the index. This could have been caused by the naming convention I used in the test – most images had very similar filenames – so perhaps the indexing of just two of a page full of test images is to be expected ? Galleries may cause Google to make a choice about which image to index and relate to the content…
  2. Looking back at the number of results in Google for different coloured images, it is interesting to notice that there were only 55k purple results and 61k gray results… perhaps this is why those two images were chosen and indexed by Google, to boost the number of available search results for those colours (purple and gray)? As with keyword research for universal search results, picking under-competed image types could provide quick wins…

What else is interesting so far ?

Searching using the keyword ‘experiment’ and then filtering for ‘large’ images and selecting ‘purple’ images shows our test image in #1 as might have been predicted ! After all, it was a large purple image with ‘experiment’ in both the filename and alt text.

Results for search 'experiment'
Results for search 'experiment' with large/purple filters set

The other images in the search results had the following filenames:

#2 http://i259.photobucket.com/albums/hh289/LynnViehl/Experiment2.jpg

#3 http://www.eu-atp.org/wordpress/wp-content/uploads/2009/07/experimento-1024×768.jpg

#4 http://4.bp.blogspot.com/-_34x_4u4wgM/TzBW2aQ0SzI/AAAAAAAAAp4/yr-2nm5TeXI/s320/the%2Bgolden%2Blight%2Bexperiment%2Bpurple%2B%2526%2Bhay%2B%2528preview%2529.jpg

#5 http://www.tablix.org/~avian/blog/images2/2012/02/two_spectrograms_recorded_at_the_crew_munich-t.jpg

So the obvious difference is that the test image had the keyword ‘purple’ as well as well as the word ‘experiment’ in the filename.

What about the gray image ?

It appears in position #4 in SERPs when using the same filters:

Keyword experiment and filters 'large' and 'gray'
Keyword experiment and filters 'large' and 'gray'

The competitive images for this search have the following filenames:

#1 http://jn.physiology.org/content/103/6/2938/F10.medium.gif

#2 http://www.sns.ias.edu/%7Ejnb/JohnphotosHtml/images/John%20Bahcall%2C%20Homestake%20mine%2C%20Cl%20Solar%20Neutrino%20Experiment%2C%20SD%2C%20%7E%201964.jpg

#3 http://arkansasagnews.uark.edu/Eason_rdax_250x345.jpg

#4 http://www.seoeditors.com/wp-content/uploads/2012/05/gray-seo-colour-experiment.jpg

#5 https://share.sandia.gov/news/resources/releases/2006/images/mat-celina_nr.jpg

So, on closer inspection the images at the top of the SERPs are all from authority sites… Journal of Physiology, two .edu sites and a .gov

The test image from this blog for the keyword ‘experiment’ performs quite well given the competition here !

By searching specifically for ‘gray experiment’, the image performs better and is returned in #1:

Search specifically for gray experiment
Search specifically for gray experiment

Positions #2 and #3 discuss the YouTube ‘gray’ channel theme.

At this stage, not many more insights are possible so I will return to this experiment in a few days time when more of the original set of images may have been indexed.



Enhanced by Zemanta