SEO better performance through CSS content positioning


As I’ve written in a previous article called Search Engine Optimization through CSS, some very good search engine optimizations can be done on a page by using the power offered by CSS. One of the most important things – and yet very little known about – for improving your page SEO is the position of each peace of content within your page markup. To get a better understanding of this, let’s follow the steps a search engine goes to read a page.

First, the search engine gets the whole markup of the page, as it is. Next step, it strips all the HTML, CSS, JavaScript tags and any other markup, who’s only purpose is to give the content of the page a visual layout, since the search engines don’t “see” and don’t “care” about how a page looks. All they care about is content. Now that the content is “naked”, striped off of anything else, the engine starts analyzing it. Of course no one knows exactly how this analysis goes, but some things involved in the content ranking process are known.

Apart from the most commonly known things like keyword reach titles, key-phrases density of the content, good meta tags etc. there is one aspect less known: the fact that each part of the content is ranked based on its relative position within the whole content of the page and also on the degree of uniqueness among the content from all the pages of the site. This comes from a simple, natural principle that, if a page wants to “say” something, it will start with it and put the rest of less important things after. So the most important part of the content should be found at the beginning. Also, if a portion of content seems to appear on too many pages (like the headers, menus, sidebars content etc.), then it gets to be considered “common” – which is the opposite of special, unique -, hence less important from the content point of view, bearing less “SEO juice” as it is called.

Translating these principles in a real case scenario, it means that a site whose pages markup is filled at the beginning with menus, advertising, links, statistics and any other secondary data and has the main content of the pages placed only after these will lose a lot of the search engine ranking in front of another site that has the main content placed at the beginning (top) of the markup and the secondary content after.

Of course, you would say you want your header to be at the top of the page and the horizontal menu under it and the left sidebar to be… on the left?! 🙂 Of course! And until the CSS came into play, there was little you could have done to place the markup of these page areas in a different order than the one from the visual layout: top parts (header, horizontal menu) first, left parts (left sidebar) next and only then the main content. Even with good CSS knowledge, few people know how to do this differently and keep using the above type of markup layout.

Let’s see an example of usual coding for a page with header, horizontal menu under the header, left and right sidebars, center (main) content area and footer, everything in a fixed 980px width, similar to the page layout sketched in the image on the right.

I’ll only put the code inside “<body></body>” tags here, since this is what we’re talking about.

<div style="width:980px; margin:0 auto;" id="container">
<div style="height:120px; margin:0; padding:0;" id="header">
This is the header with the logo, the search block,
some links and some advertising maybe
</div>
<div style="height:40px; overflow:visible;"
id="horizontal_menu">
  <ul>
    <li>Main link 1
      <ul>
        <li>Sub link 1_1</li>
        ...
        <li>Sub link 1_Y</li>
      </ul>
    </li>
    ...
    <li>Main link X
      <ul>
        <li>Sub link X_1</li>
        ...
        <li>Sub link X_Y</li>
      </ul>
    </li>
  </ul>
</div>
<div style="float:left; width:160px; margin-right:10px;"
id="left_sidebar">
  This is the left sidebar, with a lot of links,
  advertising and other types of secondary content
</div>
<div style="float:left; width:500px; margin-right:10px;"
id="main_content">
  THIS IS THE ACTUAL IMPORTANT CONTENT OF THE PAGE
</div>
<div style="float:right; width:300px;" id="right_sidebar">
  This is the right sidebar with other secondary content;
  this comes ofter the main content usually
</div>
<div style="clear:both; padding-top:10px;" id="footer">
  Footer content
</div>
</div>

See where the main content is placed? Let’s say the site has a deep, multilevel structure, which would mean the horizontal menu has lots and lots of links, hence lots of secondary content before the main content. Same goes for the left sidebar, possibly the header too. Most of the times the content from the header, menus and sidebars repeats on all or most of the site pages. Which means these areas have very little SEO juice. So… this markup puts our main content way behind the secondary, non SEO pieces of content.

Now, using the power of CSS, we can create the same visual outcome, the same page layout, while getting the most out of our good, unique content, by placing it as close to the beginning as possible.

<div style="width:980px; margin:0 auto; position:relative;"
id="container">
<div style="float:right; width:810px; margin-top:160px;"
id="main_right">
<div style="float:left; width:500px; margin-right:10px;"
id="main_content">
  THIS IS THE ACTUAL IMPORTANT CONTENT OF THE PAGE
</div>
<div style="float:right; width:300px;"
id="right_sidebar">
  This is the right sidebar with other secondary content;
  this comes ofter the main content usually
</div>
</div>
<div style="float:left; width:160px; margin-right:10px;
margin-top:160px;" id="left_sidebar">
  This is the left sidebar, with a lot of links,
  advertising and other types of secondary content
</div>
<div style="height:120px; margin:0; padding:0; position:absolute;
top:0; left:0; width:980px;" id="header">
  This is the header with the logo, the search block,
  some links and some advertising maybe
</div>
<div style="height:40px; overflow:visible; position:absolute;
top:120px; left:0; width:980px;" id="horizontal_menu">
  <ul>
    <li>Main link 1
      <ul>
        <li>Sub link 1_1</li>
        ...
        <li>Sub link 1_Y</li>
      </ul>
    </li>
    ...
    <li>Main link X
      <ul>
        <li>Sub link X_1</li>
        ...
        <li>Sub link X_Y</li>
      </ul>
    </li>
  </ul>
</div>
<div style="clear:both; padding-top:10px;" id="footer">
  Footer content
</div>
</div>

As you can easily see, in the second example, the main content comes first, then the sidebars, which usually have some good content too (comments, links to related posts etc.), then the header, navigation and footer. How exactly did we accomplish that?

We first set the #container to have “position:relative”, so we can “position:absolute” later the header and the horizontal navigation relative to the #container and not to the body. This way, we can place the header and navigation wherever we want inside the #container and we can position these elements visually at top with the “position:absolute” attribute.

Then we have to position the three columns we have in the middle: left, center (main) and right. In order to place the center column first, we group it first with the right column creating the “main_right” column. Now we can easily place the “main_right” column in front of the left column and then, inside the “main_right” column we place the center column first, left floated, followed by the right column. The same way, we can group the left and center column and place on front of the right column, having the center column floated right before the left column. The order of grouping depends mostly on which part of content you want to have first (left or right). For example, many blogs have a lot of content widgets placed on the right sidebar, thus making this one more important than the left sidebar.

This is just an example of how you can improve the SEO performance of your pages by better placing the important parts of content within the page markup while having the page layout the way you want.