Advantages in SEO - Markup Hierarchy

Ponerah- What mean by markup hierarchy is that we want the unique and rich content to be at the highest point in the markup.

Why ?

Chris Casarez (SEO Specialist Company) mentioned in the article "Placement of Content and Keyword Density of matter." Aspects important to move what the search engines like to crawl into a higher point in the markup.

Although this is not recommended for every site, a lot of ecommerece sites with heavy headers and side columns may want to look into this technique if it has any positive effects on their rankings.

How can this be achieved?

We can achieve this effect by relying on a combination of floating and absolute positioning. Let's first look at the concept and visual layout of how we will put the markup.

As you can see, image markup begins with the main content first, then it is followed by the header / top navigation, side navigation, then footer.

Development (CSS/XHTML)

I don’t want to bore you with every single detail of this technique, but lets go over the foundation of how this layout works.

HTML

<div id="main" class="container">
 <div id="content"><!--Unique Content--></div>
 <div id="header"><!--Header & Top Navigation--></div>
 <div id="sidecol"><!--Side Navigation--></div>
</div>
<div class="container">
 <div id="footer"><!--Footer--></div>
</div>

CSS

#content {
 float: right;
 width: 685px;
 margin: 120px 0 0 0;
 padding: 20px;
}
#header {
 width: 970px;
 position: absolute;
 top: 0; left: 0;
}
#sidecol {
 width: 235px;
 position: absolute;
 top: 150px; left: 0;
}
#footer {
 float: left;
 width: 970px;
}

</div>

Final Correction of Layout

One major drawback with this technique is that because the nav headers and the relying on the absolute position, he will ignore all the surrounding elements. This means, if the content shortens the length of the navigation, the footer will seep through the side and the rest passed through the column under the shortened content. How can we fix this?

Set a minimum height on the wrapper that contains the side nav / content

#main {
height: 100%;
min-height: 724px;
background: url(stretch.gif) repeat-y;
position: relative;
overflow: hidden;
}
*html #main { height: 724px; overflow: visible;} /*--If content is larger than 724px, IE6 will allow the content to break out of its element--*/

</div>

You can also use javascript to calculate the height of the side navigation / content and apply it to the #main wrapper. One issue I have run into before when doing this is that, anytime you use an accordion or toggle effect in the content, the script also calculated the max height of the content before the accordion/toggle collapses which lead to some massive white space towards the bottom.

Conclusion

There may be concerns with accessibility with this technique (most likely for text readers), since the content will be showing first, so I would recommend you research your visitors well and see if its appropriate for your situation.

Test throughly before you implement this on your/client’s site. The advantages we have gained with our ranking was pretty significant so it is definitely a plus for those who are optimizing their sites.


Credit by sohtanaka

Read more »