A Match Made in Heaven: CSS & SEO

Believe it or not, CSS (Cascading Style Sheets) can make a tremendous difference to your website’s search engine rankings. Simply put, CSS simplifies the code on your website, making it more readable or “indexable” by search engine spiders.

One example of “un-indexable” code is your site’s images. Search engine spiders are pretty smart, however, they are still not smart enough to read the text in your images. With CSS, you can convert your textual images into selectable text while still retaining most of its graphic look. Check the heading and navigation text on your website by doing what I call the “Selectable Test.” Here’s how to put your images against the Selectable Test.

Try selecting the text below with your cursor. Do you notice any difference between the two boxes?

Search Engine Spider

One of the headings is an image while the other is an actual heading with CSS styling. Even with the proper alt attribute (alt=”search engine spider”), the first, selectable heading receives higher approval by search engine spiders. Why? Search engine spiders have a hard time trusting that what is placed in your alt tags are relevant and not spammed with keywords. Headings are not inherently hidden from web browsers. Therefore, they can receive more trust.

There are oodles of quality on-site optimization techniques such as passing the Selectable Test. Talk to your website developer. If any answers to the following questions are yes, provide the following solution to your website developer:

Have you used images instead of an unordered list for the navigation links?

I totally buy the reason to move to CSS for purely IT reasons (separation of presentation, logic and design is good etc etc), but does it really have that much of an impact on SEO? I read that a bunch, but wonder who has any hard data on that. Seems like the search engines are pretty good at pulling out the text among the HTML objects by now. So I wonder. (again – css is still a good move just for more disciplined development).

Yes, Adam – I have yet to find hard evidence about CSS organization making a major difference on search engine rankings. However, you’ll notice that I focused most of my post on using CSS to create textual images. It is becoming easier, especially with the use of SIFR, to use selectable/indexable text in images, no matter how graphically advanced the image may be. My text above which reads “search engine spiders,” has a background shadow and gradient, and yet it is still indexable. A heading tag is far more important than an image only with an alt attribute.

I must admit, (I was a website developer long before I became a Search Engine Optimist) that I am always partial to clean and organized code. It cuts down expensive maintenance time and makes SE on-site optimization much more efficient. As a matter of professionalism, websites should meet w3 standards anyway.