This SEO topic examines cases with different positioning of template elements within the page content. Template elements represent the various sections of a page. The header, footer, left and/or right navigation columns, menu navigation are all template elements.

Changing the template elements order so they appear with a different order in the HTML source code while displaying an identical layout for SEO purposes is the target of this topic. Our aim is to mesure the page ranking of two different sample page that include different ordering of various template elements. Positioning of the HTML source code is the variable that will change within the code samples we present here.

An experiment exposing different HTML code layouts while keeping the main page content layout fixed in terms of rendering and then exposing the test pages to search engines may give answers to many who question whether or not the page structure plays a role for page ranking.

We will begin the technical discussion with a simple example listed here to better understand the aim of the template elements. We will then expose few different external HTML pages to search engines each having the same content and template elements by with different ordering of the HTML sections to influence SERPs and finally examine the results.

Two different layouts are listed here one with a traditional linear positioning, the other reordering the various HTML sections and positioning the elements of interest, to the top of the page. For the shake of simplicity we bypass the CSS details in the given code below. The actual layout of the sample pages is identical and few CSS properties can be used for the content relocation.

1. Linear positioning of template elements in HTML

<div>header content</div>
<div>navigation menu</div>
<div>left column</div>
<div><h1>content title</h1></div>
<div>main content</div>
<div>footer</div>

2. Reordering template elements to expose content first in HTML

<div><h1>content title</h1></div>
<div>main content</div>
<div>header content</div>
<div>navigation menu</div>
<div>left column</div>
<div>footer</div>

The main question is, will the second case offer better ranking with search engines than the first? Search engines have improved their algorithms and can extract the page content reliably. But what is the difference or importance of sections that precede the main page content, basically the text that intends to describe a page?

If you know PHP you can write a couple of lines of code that will strip the HTML tags right away from a page content and identify the main page text. Search engines use a similar mechanism to extract the actual description content, analyze and store keywords and parts of the page (title, summary etc) in a database.

We want to get over the bulk of CSS details from the sample code, yet give the reader a better understanding of the layout structure, so we will use absolute positioning with DIV selectors to structure the pages, so the page layout is identical when the page is rendered, while the HTML source order is different.

The first external page sample is here:
http://www.asymmetrics.com/samples/ext_sample1.php
Linear positioning of template elements is used. Viewing the HTML source code shows the header is at the top of the HTML, followed by the navigation menu and left column before hitting the main page content. This is what most sites typically expose to search engines. In the real world the main page content may be hundreds or thousand of lines from the top of the HTML source code subject to Javascripts, CSS expansion and HTML code involved in the header, menu, left column etc.

The second external page sample is here:
http://www.asymmetrics.com/samples/ext_sample2.php
Re-positioning of the template elements takes place here with an H1 title is located first, followed by the page content. The header, menu and left column are positioned after the main content. This way, viewing the HTML source code with a browser, shows the main content begins just few lines after the document BODY tag.

Viewing the layout of the 2 different pages now with various browsers shows identical. The stylesheet file, uses the absolute positioning property for the DIV tags to re-position the elements the way we intend to. The header element that shows first, when viewing the pages, contains a predefined unique phrase so we can locate the pages in SERPs. The header phrase and the H1 title phase will be used as the keywords analyze ranking.

If ordering of the template elements plays a role in ranking, then by searching for the H1 title as the keyword in search engines should list the second sample (ext_sample2.php) first, once both pages are indexed. We will also search for the header phase that has different positioning in the two page samples and see if the first sample page (ext_sample1.php) comes first for the header phrase.

Also note within this page, the classic ordering of template elements sample is mentioned first (that is the (ext_sample1.php). We expose it like this to ensure the found link order doesn't play a role in our tests.

And as it was expected, ext_sample2.php ranks higher than ext_sample1.php when various content keywords entered. The distance from the start of the document to the actual keywords searched is a factor when setting up templates. Depending on the type of website and page focus intended, HTML content relocation is an important factor for page SEO in SERPs.