Boost your SEO using CSS
With large amount of websites online all competing against each other for business you have to start to look at more than just the basic SEO techniques to achieve results in this day in age.
The technique I am going to discuss in this article also has many other benefits to a website, and is one we strongly recommend to suitable clients.
The principle is quite simple really, it is optimising the code which makes up the pages on your website.
This code is called HTML and consists of instructions that a web browser, such as Internet Explorer or FireFox, reads and uses to display a particular web page. Often this HTML code can be hundreds or thousands of lines long to make up more complex pages, this is not in itself a big problem. The problem comes once you realise that the actual amount of information which is text for a site user to read is only a small percentage of this.
To illustrate this point, a large UK News Broadcasters website has a homepage file size of 105Kb while only 5Kb is actually text which a human or a search engine will ever read. This ratio is often called a ‘Code to Text’ ratio and is displayed as a percentage. Going back to the newspaper example it has a code to text ratio of just under 5%.
Why Does This Matter?
You may be thinking that this surely doesn’t matter with regards to SEO, a search engine doesn’t care about the other code does it?
Well it seems that they do, I have found many times over that rebuilding a website with optimised HTML code can give an underperforming website a boost.
Although nobody knows for sure how search engines index and rank websites here are my theories on why this is an important aspect for websites:
- Although a search engine spider reads the text aimed at site users, it has to be able to read the code part of a page to understand where the actual content is. If any part of your HTML code is incorrect or faulty, a search engine spider could misinterpret part of your site, or miss large sections of content altogether.
- A well constructed page with optimised code may give a better sense of trust or authority than a site with large sections of poorly constructed HTML.
- It is well known that Google in particular put a high emphasis on content, a page with a low text to code ratio offers a smaller amount of content to the user for a larger bandwidth hit.
- It could be that if two different sites offered similar content, but one had a better code build behind it, then a search engine might choose to give the better produced site an advantage.
- Google also have a search engine which ranks accessible sites higher: http://labs.google.com/accessible/ , a side effect of having poorly constructed HTML pages is that they often fail to pass even the basic accessibility tests. If Google have gone to this trouble, it could be an indicator of a factor they look for in the main results.
The above points are simply theories, some of which have been discussed before in SEO circles. They may be incorrect, or inaccurate, and I may be missing the mark completely, however I have seen first hand evidence of the effect of a code optimisation numerous times.
Supporting Evidence
A site I looked after for a client was around 9 - 10 months old, it had come out of the ‘SandBox’ effect and was achieving fairly decent rankings, around the bottom of page 1 / top of page 2 for many targeted terms.
The site had initially been constructed with HTML tables to control layout, these table layouts use lots of code to achieve desired layout effects and tend to create large pages in terms of file size. I rebuilt the site using a technique called CSS for layouts. Although CSS is not a new technique, it is still not used by many web designers and can take longer to construct initially.
After the rebuild the actual pages looked identical to how they originally did, a user would not notice any changes in the layout. The text to code ratio went from around 7% to over 42% for most pages.
After just a few weeks SEO results began to improve and the average position gain across 15 selected keywords was 4 - 5 positions. This bumped page 2 results to page 1 and page 1 bottom results to mid / top positions.
Other websites we look after have managed similar improvements, the actual position gains tend to be greater with sites that are currently achieving poor results initially, i.e. page 5 jumps of 20+ positions.
Other Benefits
Redesigning pages with CSS has numerous other benefits as well as the SEO ones above:
- Pages are easier to maintain and update, full site redesigns are achievable without changing content pages at all.
- Web pages tend to be smaller in size, leading to faster download times for users and less bandwidth usage for hosting charges.
- As mentioned above CSS designs generally tend to have code which passes accessibility tests without too much modification being required. Seeing as this is an increasing topic of conversation in UK legal circles, this can be quite a major benefit.
Final Thought
For businesses and users looking to invest in their website, or if you feel your site needs that final push up the rankings you should definitely consider this option. Depending on the scope of your site many web designers charge a lot more for the design work than the technical HTML coding, if your happy with your sites look, a CSS rebuild could be more affordable than you might think.
If you’re considering having a new site built, you should definitely enquire into which methods your designers will use to construct your web pages. In my opinion every new site should use CSS for layouts as a matter of course.
Popularity: 100% [?]
Darren Atkinson @ April 19, 2007