Archive for August, 2009

Web Page Structure for Great SEO

Thursday, August 20th, 2009

I have recently been putting together some websites and have been using the Sitepoint book “Designing without tables” as a guide to some of the CSS techniques. What I noticed was that the author was structuring pages as follows for a 2 column layout: –

  • Header with navigation
  • Sidebar (floated to the side)
  • Main content (positioned using margins)
  • Footer

The trouble with this layout is that if you read the HTML from top to bottom, as a search engine or screen reader would, the sidebar content is higher up the page and is therefore given a higher priority than the main content. What this can mean is that Google misinterprets the information on your page, and in some cases what your site is about, which is obviously a big problem.

A simple solution is to use the same techniques to float the main content and the sidebar so that the main content can come first (have a look at the webxopt home page to see how this is done, and you can get the css from http://www.webxopt.com/styles.css).

This is all easy stuff, but on a 3 column layout you have the problem that you need to float something to the right, something to the left and have something in the middle too. That makes things difficult, but using the old trusty nested tables technique, you can do it as follows: –

  • Header with navigation
  • Div to contain main content and left hand sidebar. This is floated left. Inside this div there are two more divs, the first contains the content which is floated right, the second the sidebar which is floated left. The end result is a left hand side bar, and central content area.
  • Div to contain the right hand sidebar, this is floated right
  • Footer

The end result of this layout is a 3 column view with your most important information (your main content) at the top of the HTML document. An example of the code is shown here: –

<div id=”header”>
<p>Strap Line<br /> for the site</p>
</div><!– header –>
<div id=”wrapper”>
<div id=”navbar”>
</div><!– navbar –>
<div id=”content”>
<div id=”main”>
<div id=”copy”>
<h1>Main Heading</h1>
</div><!– copy –>
<div id=”image-bar”>
</div><!– image-bar –>
</div><!– main –>
<div id=”sidebar”>
<div id=”sidebar-content”>
<h4>News</h4>
<p>Here is some news</p>
<a href=”#”>Link</a>
</div><!– sidebar-content –>
</div><!– sidebar –>
</div><!– content –>
<div id=”footer”>
</div><!– footer –>

and the CSS is: –

#header {
margin: 10px auto;
position: relative;
height: 80px;
}

#header p {
width: 920px;
margin: 0px auto;
padding: 10px 18px 0 0;
position: relative;
color:#f8992b;
font: 16px Arial, Helvetica, sans-serif;
text-align:right;
}

#wrapper {
width: 920px;
margin: 10px auto;
position: relative;
background-color:#FFF;
border:#000 1px solid;
min-height: 450px;
}

#navbar {
width: 100%;
height: 22px;
margin: 0;
}

#content {
margin-top: 0;
}

#main {
margin: 20px 0 0 20px;
width: 645px;
padding: 0;
min-height: 300px;
float: left;
}

#copy {
margin: 0 0 0 20px;
width: 455px;
padding: 0;
min-height: 300px;
float: right;
}

#sidebar {
width: 220px;
float: right;
margin: 0 15px 0 0;
min-height: 300px;
}

#sidebar-content {
width: 220px;
float: right;
margin: 0;
padding: 20px 10px 0 10px;
min-height: 200px;
}

#image-bar {
margin: 0;
width: 170px;
padding: 0;
min-height: 386px;
float:left;
}

#footer {
clear:both;
width: 100%;
height: 22px;
}

The drawback to using this approach is that to reposition the different divs in the document is slightly more difficult, however for most simply respositioning such as print and mobile style sheets, this shouldn’t really be too much of a problem.

In my view the SEO advantages far out-weigh the downsides.

Tags: , , ,
Posted in SEO | No Comments »