When search engines spider your Web site, they may have to go through a lot of code to reach your search-engine optimized content. To avoid this, you can use content stacking techniques: either the table trick or Div tag positioning.

Content stacking is writing the HTML in such a way that the page content is delivered to the spiders before any scripts or navigation elements. A search engine puts the most weight on the first 200 words of a Web page, and then less weight on the remaining words. If the first 200 words on your Web page are all HTML code setting up your navigation and you don’t start with your actual content until about word 580, you might end up with a low rank.

That doesn’t mean you have to chuck your navigation system and start afresh; read on to learn how the table trick and Div tag positioning can ensure that the spider reads the content of your page first.

Use the table trick for better SEO results

A search engine normally reads a page in this order: first, the top navigation; second, left navigation; third, page content; and fourth, footer. That puts two cells of content before your page's nice keyword rich content.

The output for the table trick results in five cells where there were once four.

The table trick pushes your left-side navigation bar down below your body content and pulls up your body content so that it usually is within the first 200 words. The trick is to insert a blank cell after the first cell. The order is now as follows: first, top navigation; second, the blank cell; third, the page content, fourth, your left navigation; and fifth, the footer. You can see how the table trick works in the before (left) and after (right) examples shown in the above figure.

Use Div tag positioning for better SEO results

Unfortunately, using a table trick can cause the left navigation to appear slightly lower on the page than it did before the table trick was implemented. The left navigation may appear to jump up and down ever so slightly when you go from a longer page to a shorter page, or vice versa.

There is an alternative solution that does not create the same style problems as a table trick. It involves using CSS positioning to reorder the content in the code. The easiest implementation involves putting the left navigation content within one Div tag and all of the main body content within another Div tag. Then, using CSS, you would float the left navigation Div tag to the left and the body content Div tag to the right.

Using an inline style, the parsed HTML would be as follows at its most basic level:

<Head>Head Section</Head>
  Global Header Content
  <div style=”float: right;”>Body Content</div>
  <div style=”float: left;”>Left Navigation  Content</div>
  Global Footer Content

By using the Float property in CSS, the page renders the same no matter how you order the Div tags. Obviously, the whole reason for restructuring the code is to get the body content higher up in the source code. Thus, you would opt to put the content Div before the left navigation Div tag.