Site   Web

August 27, 2007

SEO Overhauls with CSS: If You Rebuild It They Will Come

As an SEO one of the most common things I find when I sit down to analyze an existing web site is that it was built either a long time ago or with aging techniques. The situation is different every time, but I almost invariably find myself suggesting to the client that some coding changes are in order at the most basic level. This may be as simple as using proper heading tags where aging <font> tags were used to add relevance to the page. I often rebuild image-based navigation menus using CSS and valuable anchor text. In the more extreme cases I’ll suggest to the client that the best bet for on-page optimization is to reconstruct the site layout entirely with more SEO-friendly methods.

Table-based Woes

There are a lot of good arguments on both sides as to whether tables are still a good method to lay out web pages. With the advent of CSS-driven layouts several years ago it became possible to achieve very clean code while still creating vivid visual experiences. However, there are still plenty (and a majority, in my experience) of web sites out there that use tables for layout. Do these sites function more-or-less exactly like their CSS-driven counterparts? More-or-less, yes. The user experience can be identical. When it comes to the source code, however, there are usually some very big differences.

I recently rebuilt a client’s eCommerce site and the result was an estimated 300 less lines of code per page. While it would be arbitrary to argue that this count has a direct correlation to search rankings it certainly demonstrates the level of extraneous code that table-based layouts without significant CSS support can contain. This site was in particularly bad shape with no heading tags to be found and JavaScript-driven rollover images for all navigation.

It took about twelve hours to recode the template and migrate the content. Today this client enjoys much better rankings and traffic. All the result of the CSS rebuild? Obviously not – like any SEO worth his salt I combined this rebuild with ongoing link building and content optimization efforts. I find it hard to discount this, though, since the improvement in the hierarchy and density of content in the code was significant.

CSS and Information Hierarchy

Google openly calls for the proper use of HTML to tag page content and the maintenance of a clear hierarchy in their webmaster guidelines. Ignoring spam filter issues (which you should be effortlessly avoiding by being honest, right?) it makes sense to maintain proper tagging and organization in your source code. What makes CSS so viable a solution for SEO is that it keeps the layout and presentation out of the way. A well-coded page with proper CSS support can have all of the visuals of a table-based counterpart but with source code that is easy, even comfortable, to read for a human being. It isn’t much of a stretch to say that this cleanliness and organization probably improves page relevance in the eyes of Google and the crawl process as well.

Some other ways that a CSS-driven layout offers improvements:

  • Faster page load times
  • Code order flexibility (the ability to move content higher to the top of the source code without altering the page visually)
  • Easier and quicker site updates and maintenance
  • Improved accessibility (for vision-impaired users and otherwise)
  • Link building opportunities (from online galleries for notably-designed CSS-driven web sites)

Crawler Resource Management

Google is running some of the most powerful servers in the world. No doubt, when Googlebot sets out to index pages it is driven by a very quick machine. However, the shear volume of the web as well as the rate at which Googlebot indexes new pages (usually a week or more) suggests that resource management is a big part of Google’s careful measurements. It is reasonable to expect, then, that when Googlebot visits a page that contains thousands of lines of code it doesn’t bother reading through to the end. At some point the crawlers will cut and run – there are, after all, billions of other web pages they need to get to. CSS-layouts drastically reduce the amount of source code needed to present content pages, making it less likely that Googlebot or another crawler will abandon the crawl process and leave your page before scanning all content.

Is rebuilding your site with a CSS-driven layout going to launch you to top rankings for competitive search terms? Probably not, but it should help. Most table-based sites that don’t use CSS support are also poorly optimized from other standpoints – inbound links, content relevance, keyword research, etc. A CSS-driven layout coupled with proper HTML tagging leaves you with the best platform possible to improve your search rankings down the line. It has also, in many cases, brought on an almost immediate improvement in search visibility for established web sites.

Author:  Mike Tekula is the founder and Lead Strategist at Tek Web Solutions, a New York SEO Company that specializes in driving increased web site traffic.