Practical Ecommerce

SEO: Harness the Power of CSS

Cascading Style Sheets (CSS) is a technology popular with web developers who care about web standards and accessibility. But it should also be a technology embraced by anyone who cares about SEO.

It’s amazing

You can do amazing things with CSS. For example, you can completely eliminate all use of HTML tables and transparent 1-pixel spacer GIFs for layout (that’s so ‘90s!), replacing all that “code bloat” with succinct, streamlined HTML and stylesheet code. Using tables-based layout not only subjects your customer to longer page download times, it also lowers the keyword prominence of the body copy. In fact, you should strive to completely separate the presentation layer from the content layer (as much as practical) and move all the presentation “stuff” into an external style sheet –– in other words, into a separate .css file. An additional benefit of this approach is that the .css file gets cached by the user’s web browser and doesn’t have to reload with each new page, further improving the customer’s experience.

You can further boost your keyword prominence with a more advanced CSS technique. You can reorder page elements in the HTML without affecting what the page looks like. So, you can place your content above your navigation in the HTML and still display that navigation exactly where you want it on the rendered page. Have you ever seen a left navigation bar coded at the end of the HTML? It’s a thing of beauty (at least to us SEO geeks).

Alt tags not so important

You may recall from my previous articles that search engines have discounted Alt tags (the text that is displayed when you hover your cursor over an image) to the point that they do little, if anything, to improve rankings. Thanks to CSS though, you have an alternative method for associating text with graphics –– one that is more effective in SEO than Alt tags. This CSS technique is dubbed “image replacement” and allows you to incorporate not only text, but also HTML tags including heading tags (H1, etc.) and links. This alternate HTML code will appear to the spiders but not to humans unless they deliberately turn off CSS in their browser. In effect, the CSS code pushes this alternate text and HTML aside (e.g., outside of the margins of the web page) and inserts a graphic in its place.

In general, I strongly encourage the use of text-based navigation rather than graphical navigation, which would make “image replacement” unnecessary. I understand there will be cases where your company’s branding guidelines or other considerations will prevent you from doing that. So in those cases, image replacement is a viable workaround. For example, www.northland. edu uses this technique well to replace its logo and its navigation buttons.

I have a couple of warnings about image replacement. First, this is not a green light to start keyword stuffing. Search-engine spamming is never a sustainable SEO strategy. Second, in time, I expect that search engines will look at CSS files and disregard text that is off-screen because it can be abused by spammers. Therefore, the long-term effectiveness of this approach for SEO is in question.

The way most image-replacement techniques work is by physically moving the text off the screen (e.g., by setting “display” to none or setting “text indent” to a large negative number). This is not ideal. Over time, search engines will look at it with suspicion. Thankfully, there are methods of image replacement that don’t do this and are still accessible, namely the Leahy/Langridge Method, the Gilder/Levin Method and the Shake Enhancement. Each of these methods has its pluses and minuses, which the article from Mezzoblue outlines quite well.

Good mouseover method

CSS also provides an alternative method for creating mouseover navigation that is still search-engine friendly. With JavaScript-based mouseover navigation, spiders can’t access the links underneath the mouseover because they don’t normally execute JavaScript. You can accomplish the same mouseover effect with CSS. Turning off CSS in your browser will then reveal all the links hidden underneath within the mouseovers, so all these links will be accessible to spiders. Ideally these links are text and not graphical so the search engines will associate your anchor text with the pages to which you are linking.

Stephan Spencer

Stephan Spencer

Bio   •   RSS Feed


Sign up for our email newsletter

  1. Legacy User November 1, 2007 Reply

    Nice article! One method that also helps with CSS is absolute positioning. You can easily position your "core" content at the top of your source above any header and left navigation elements as most general "90'ish" tabled layouts currently provide. What this allows is your content is indexed at the top of the source file before any redundant menu's and header content.

    — *B00MER*

  2. Legacy User November 29, 2007 Reply

    I love this article. This is why our free storefront application ( uses CSS to drive the designs of the stores.

    Michael Levine

    — *RealStores*

  3. Legacy User May 5, 2008 Reply

    Great article, once you start using absolute positioning… it becomes difficult to get the rest of the elements to play nice. Absolute positioning the top banner and top nav above the content is easy.. but then the left nav (which is after the content in dom) needs to get to the left of the content… and right column… then the footer to play nice below an expanding left nav, content, and right column…

    Know any sites that have a good example of 3 column layout with header and footer???
    (css zen garden do not have the nav content able to keep the footer in place – rather the footer is only within the supportingText area)

    — *Frost*

  4. Legacy User July 15, 2008 Reply

    css layer examples / properties and layer attributes

    — *sezer*

  5. Mona Pennypacker March 16, 2009 Reply

    I know this is an old thread… but since I stumbled upon it and found it interesting I thought I might answer the last question for the example of the three column layout using good SEO HTML/CSS flow that does not use the absolute positioning.

    Note how the code in the HTML flows as follows: