Improve Search Engine Optimization (SEO) By Coding Page Content At The Top Of Your HTML

While I haven't personally found any proof that keeping content as close to the top of your code as possible can improve SEO, I have seen a few articles attesting to its merit. It is a commonly held believe that the technique can improve SEO.

Improve Your Search Engine Optimization Through Good Code

There is this article as an example of the belief, again without actual proof. There are examples of top-ranking sites for tough keywords like "lingerie" which bring you to a top site, Pampered Passions. If you examine the source of this lingerie site you'll see the <h1> right at the top which is the start of this page's content. Notice its not buried halfway down the page like most sites that have navigation, search, logos, etc all in the header that comes visually before body content for most sites.

If you view source on the Way Cool Web Design site you'll see something similar. The <h1> is very near the top of the code while visually the layout suggests there should be a header with navigation, search and logo above the content.

Some immediate difference on the Way Cool site is "top of page" and "skipnav" anchors. The top of page anchor is one I find a lot of people use so I build it into every template I create so that in the event someone needs it they don't have to be concerned with going back to a template to add it into an entire site. The skipnav is also built into every template, although in the case of this site specifically we don't actually need a skipnav because we've put all the nav at the bottom of the code and so there is no nav to skip in order to get to content.

So, why not build every template this way? Well, it makes for some heavy duty browser testing - it's a challenging technique. Most clients just don't want to pay for all the extra time it takes to get it perfect just what is not a proven benefit. Those that are concerned about SEO however are often interested to learn more, and some are willing to go that extra mile with their budget.

Coding Middle Column Body Content At The Top Of Your HTML

Let's assume in a 3-column layout like this site, you have subnavigation to the left, body content in the middle, and callouts in the right column. A few years ago I may have code this as LEFT, RIGHT, MIDDLE, with LEFT and RIGHT being floated arounf the MIDDLE which has margins on the left and right. But this doesn't help our cause since it makes MIDDLE come last in the HTML. We want MIDDLE to be first.

The way I normally code columns these days is LEFT, MIDDLE, RIGHT all floated left since that is, theoretically speaking, "correct" from a top-to-bottom, left-to-right coding standpoint. I code templates this way since that is a common solution for accessibility purposes - code appears in the HTML as we would view it on-screen top/bottom, left/right.

To achieve the middle column at the top we need some CSS tricks. Code it MIDDLE, LEFT, RIGHT. First float MIDDLE to the right and LEFT to the left, with those two columns in "Container A". Then inside "Container B" float "Container A" to the left with RIGHT floated to the right. Container B now holds MIDDLE, LEFT, RIGHT. Push Container B down with a margin to make room for the header. After Container B, code the header info, position it absolutely and make it appear at the top on-screen.