Saturday, May 23, 2009

-> SEO friendly images using CSS

CSS or image replacement is a technique that uses image via CSS and hides some text behind images.

Normal usage of image,
<h1 class="imageclass">
<img src="images/testImage.jpg" alt="test image name" />
</h1>

Method to use image via CSS
h1.testImage{
width: 300px;
height: 50px;
background: url(images/testImage.jpg);
}
and then you can display image on website like this,
<h1 class="testImage">Logo name</h1>

The visual effect is same but CSS image has "Logo name" as hidden text on the website. Search Engine bots reads CSS image better than the actual displayed image.
There are some controversies using these technique becasue site can be exploited for SEO purpose by stuffing more keywords as hidden texts.
Google webscam team says,
"If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad."
So, according to them this should be used more appropriately not to call this technique spam.

There are different assumption to above technique if its blackhat or whitehat seo method.
and one important point for SEO, if you are using this method you should know that,
"Alt text outweights image title". That means pages which have same description in alttext are better indexed that pages which have same description as title.
The problem with using alttext is mouseover on image(on IE) shows the alt text. The solution to above problem is add a emtpy title attribute with its value as empty string and alt text with its value as text required for SEO.

Granted it does work, but you're asking for trouble. Search engines catch you doing something like this and chances are good it's going to hurt your site. Most likely the search engines will never catch you on their own, but you can be sure that one of your competitors will be more than happy to file a spam report on you once you start to outrank them if content is irrelvant to your image.

Good news is google ask you to add relevant description to alttext if your image.
http://www.google.com/support/webmasters/bin/answer.py?answer=40349&ctx=sibling

Let me know your comments.

1 comment:

Comments