The Best SEO Page Layout

We have received a number of emails with questions regarding the best practices in SEO page design. This article contains numerous tips and examples of some of the most effective SEO layouts for your site. You may freely download and reuse any code presented at this page.

We hope that everybody has come to understand by now that SEO, in most cases, is all about keeping things simple. Although every major search engine has been and will be working non-stop on improving their indexing algorithms, we cannot expect them to be able to catch up with all the innovations that come to the web.

Separating content from the structural elements of HTML code, reading PDFs, even making sense of Flash animations, images, video and audio files is something that any decent search engine can do these days. And while they become so scary-good in such advanced areas just to get any additional piece of information presented on a web page, the most important thing for success of your site is still the ol’good text. And that is what you should always bet on – making your text accessible and well structured.

THE OPTIMAL PAGE STRUCTURE

The following page structure is what has proven to be the best order for content presentation :

Page Title > Content > Main Menu > Additional Navigation > Footer

But wouldn’t it be boring if all pages looked the same, layout wise? Sure thing, it would! But… With the help of CSS formatting one can have various visual layouts and preserve search engine optimized HTML structure. Let’s look at the following example.

SEO Page Layout with a Right Sidebar (Two Column)

Let’s say that you wan to create a page layout with a header, following by a main content area, a side bar on the right side of the window and a footer. Something similar to the layout on the image.

Header: Usually a page header will contain menus or links to the most important pages on our site because we want our visitors to be able to navigate our site conveniently and find the information they need right away.

Main Content: Often it will make sense to present the main content of your page right underneath the header. If people come to our page, hoping to find certain information and we make them scroll all the way to the bottom, it may soon annoy them or they won’t looking at another page or come back to our sites.

Sidebar: Often contains comprehensive menus and additional content or information related to our Main Content.

Footer: Then goes footer. Perhaps we will include a copyright and additional navigation there.

We also recommend to finalize your page with a unique, subject-related textual string. Yahoo and other search engines may use a few of the first and last words on your page to make an info snippet, that will be presented along with the page title on their search result pages. Especially when your pages are newly indexed. So, consider “a call to action” type of wording.

So, if we were to translate the optimal page structure (see above) in terms of selected page layout we should be positioning our elements in the following order:

Main Content (Proceeded With the page title) > Sidebar > Header > Footer

And here’s the code for such a layout (You may copy and try it on a sample page):

<html>
<head>
<style>

h1 { text-align: center; width: 100%;}
p {	padding: 40px 0; text-align: center; width: 100%; }

#outer {
	width: 800px;
	margin: 0 auto 0;
	padding-top: 120px;
}

#float-wrap {
	float: left;
	width: 800px;

	background-color: #000;
}

#content {
	float: left;
	text-align: left;
	width: 600px;

	background-color: #ff6666;
}

#sidebar {
	float: right;
	width: 190px;	

	background-color: #66cc66;
}

#header {
	margin: -120px 0 0 -800px;
	float: left;
	width: 800px;
	height: 120px;

	background-color: #66ccff;
}

#footer {
	width: 800px;

	background-color: #ffff66;
}

</style>

</head>
<body>

<div id="outer">

	<div id="float-wrap">

    	<div id="content">
            <h1>Main Content</h1>
            <p>This Part Comes First</p>
        </div>

        <div id="sidebar">
        	<p>Sidebar</p>
            <p>This Part Comes Second</p>
        </div>

    </div>

    <div id="header">
    	<p>Header comes third</p>
    </div>

    <div id="footer">
    	<p>And Finally Footer... Our fourth and last element</p>
    </div>
</div>

</body>
</html>

Here you will notice that the div elements are placed in the order in which we want them to be placed within our HTML code. So to say, h1 title + content, followed by the sidebar, header and footer. And this is exactly how search engines will see and index your page content. However, if you create this page and open it in your browser, you will see that the elements seem to be placed in a slightly different order: header > h1 title + content > sidebar > footer. This is how your visitors will see the page.

More examples to come…

One should keep in mind that when search retrieve the descriptions of your pages (a.k.a. page snippets) displayed along with page titles in search results, part of the text from the bottom of a page may be used as well. So, it may be a good idea to alternate text within the footer section for every page of your site. It is not crucial, but may help increase response rates from the people browsing search results.

The Best SEO Page Layout

SEO Page Layout with a Right Sidebar (Two Column)

Blog SEO Project