Image Replacement Through CSS and its SEO Issues

In our web design training, we were taught about the importance of providing alt attributes to images embedded using the <img /> tag. This is for providing some kind of description to the image when the browser has its display image turned off or so that those visually impaired people can have access as to what the image is all about. And for the logo or banner images (wherein they are embedded in CSS and not through img tag) where the company name and its business tagline is etched, we were taught to provide text equivalent to the lines of text in the image.

The CSS technique of replacing the image with text can be accomplished by using the display:none attribute-value or by making the text-indent equal to outside of the screen display (say, -9999px). Basically, what these techniques do is hide the html text from appearing in the browser (remember that those text are already in the image) yet still providing accessibility  for readers (intended for blind). Those hidden text are not visible in the browser but in the source code they can be read by search engine spiders or crawlers.

When I gain some knowledge of SEO, especially on-page, I came to understand that this technique has been tagged as black hat SEO technique because one can then put hidden keywords in web pages. It is admonished to provide text content (keywords) not visible to users but visible to search engines (cloaking!). Putting invisible keywords may result into getting banned from search engines when they discover it.

In todays websphere, some website owners are struggling to rank their site on major search engines. Ranking keywords for your site requires tremendous amount of effort and patience. It is better to adhere to white hat seo practices than to get yourself banned by search engines.