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

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?

    Solution: Rebuild menus with CSS

  • Have you used tables in the underlying website layout?

    Solution: Rebuild the layout with CSS (it is theorized that clean, concise code, capitalizing on indexable content, may positively benefit your search rankings)

  • Do you have CSS styles and JavaScript in the body of your site?

    Solution: Use script and link tags to reference to JavaScript files and stylesheets.

  • Have you used an extensive amount of flash? (Yes, I know Google indexes flash content but I’m not yet convinced of its quality as pertaining to search engine rankings)

    Solution: Use Google’s swfobject to add proper text.

  • Do you have any hidden text on your website? Have you matched colors of your text to the background color?

    Solution: Remove hidden text!

Feel free to tweet me if you’d like me to take a look at your website. You can also post it on the forums and get some advice from our expert forum members.

Get Internet Marketing Insight For Your Company - SEO.com


  1. Jacob Stoops says

    Nice tips. What CSS code did you use to make the first ‘Search Engine Spider’ image appear as highlightable text?

  2. David Scoville says

    Hi AgentSEO, the code is fairly simple. I used a background image for the shadow and set the font to Lucida Sans Unicode, which is a web safe font. Notice that I used a heading tag as well.

  3. Another Adam says

    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).

    • David Scoville says

      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.

  4. Another Adam says

    Thanks for the response. I tend to agree with you in general, and especially on your textual image point.

Leave a Reply

Your email address will not be published. Required fields are marked *