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.

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). A good example of this in action is CSS Zen Garden; notice how the HTML doesn’t change between this layout with left-hand side nav, and this one with right-hand side nav. It is only the CSS that is changing.

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 Shea Enhancement. Each of these methods has its pluses and minuses, which the article from Mezzoblue outlines quite well.

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.