CSS Positioning

CSS Layout - Why hide it at the back?

When you go into a shop, and find a really good item stashed somewhere in the back, you feel lucky to have found it. Unfortunately this is not the way search engine spiders work. Most shopkeepers will put their best stock in the window to bring people in. Why don't you do the same with your content? Using CSS Layout, you can bring your content to the front of the code, without changing the look of your site.

CSS Layout - Positioning Layers v Tables

Although CSS positioning has been around for some time now, but not many web designers use CSS divisional layers, preferring tables. This is because using CSS positioning layout is more complicated and many designers simply don't know how. This being the case, most sites are written in tables, not by utilising the more spider-friendly CSS layout. Let's take an example of a really simple site. It has an image header, a left text based navigation bar, the main content and a footer.

Before you get to the body tag, you have your head tags. Optimized head tags should make your body tag open around line 12. So if the body tag is on line 12, you open the main layout table on line 13. You then open the row within this table on line 14 and a cell within that row on line 15. You place the code that calls in the image for your header on line 16, followed by closing your cell on line 17 and closing the row on line 18. Bear with me.....

Opening the second row on line 19 and the cell to hold your navigation on line 20, you then get to write the navigation links, witch we will say is 5 lines long. You close this cell on line 26. On line 27 you open your content cell and finally get to write the content on line 28.

Please remember that this is a very simple site. Most sites don't have optimized head tags. If they have inline JavaScript or inline CSS, the head tags could go up to 100 lines. The header may not only be an image. Some people have a customer login in a separate cell for example. Unless your site is 5 to 10 pages, your navigation down the side is going to be much longer than 5 lines. Especially now that the standard is to use rollover images. In the average web site in this form, the content will start on line 150.

Using divisional layers and CSS positioning, after the body tag, you open the DIV, on line 13 and the content starts on line 14. With this CSS layout, the search engine spider gets straight into the content, and doesn't have to go to the back of the shop to search for the treasure. Taking the simple example, there is a difference of about 14 lines the search engine spider extra to go through. On a normal site, this is normally well over 100 lines and in some cases, up to 500.

Using CSS Positioning Layout - Why?

Ok, so the content is near to the top of the code. So why else should I take the time to learn CSS Divisional layer positioning and use CSS Layout?

  • Using divisional layers, rather than tables, brings the web page content higher in the source code, making it more spider friendly and gives the content more relevance

  • CSS layers reduce the amount of code dramatically, making the web page load more quickly

  • Using Positioning CSS layers increases the percentage of content to code on your webpage, increasing content relevancy

If you would like to know how Kenkai can help your site achieve better positions on the SERPs, by rewriting the code on your existing website, contact us now.


Web Design and SEO ArticlesWeb Design and SEO Articles

Most of the articles we write nowadays are featured in the Big Man's Blog, as it is optimised so that a properly optimsed article is featured on the front pages of Google within minutes. The article featured below was originally written a few years back, but the information in the article is still accurate in today's marketplace.

If you have any questions regarding this, or any other article featured on the site, don't hesitate to email your question to bigman@kenkai.com.