Tutorials

Markup Hierarchy – Advantages in SEO

Tags: Intermediate

Over the past year, we have been researching and testing the effects of markup hierarchy making a difference in search engine results. What I mean by markup hierarchy is that we want the unique and rich content to be at the highest point in the markup.

Why? First Read Chris Casarez’s Article

After several tests and reviews, we did see some improvements in search engine rankings as Chris Casarez (SEO Specialist at the Company) mentions in his article “Content Placement and Keyword Density matter“. The important aspect here is to move what the search engines loves to crawl to a higher point on the markup.

Although this is not recommended for every site out there, a lot of ecommerece sites with heavy headers and side columns may want to look into this technique to see 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 floats and absolute positioning. Lets first take a look at the concept and visual layout of how we will be laying down our markup.

As you can see, our 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;
}

Final Correction of Layout

One major flaw with this technique is that since the header and side nav is relying on absolute positioning, it will ignore any elements surrounding it. This means, if the content is shorter in length than the side navigation, the footer will seep through past the side column and rest below 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--*/

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. If you have any questions, concerns, or suggestions, please don’t hesitate share them!