Source Ordered Content: SEO Benefits (and Drawbacks?)

July 24th, 2008 by Ann Smarty | 7 Comments

Sometimes it’s very useful to return to basics and refine good old SEO techniques you might forget. SOC (”source ordered content” or “front-loading”) is one such technique that basically incorporates placing content as close to the beginning of the page as possible and using CSS to display page elements where they “belong”.

Here is a very simple example: that’s what you see at the top of a very popular blog: (1) head (+ (2) navigation) => (3) left column => (4) content => (5) right column - that’s the way it is displayed:

SOC example 1

So we expect to see content block going after the left column in the page source…. but instead we see content much closer to the top, right after the head navigation (you can also check that with SEO browser):

SOC example 2

Source ordered content is especially useful for SEO because:

it allows to give prominence to keyword-optimized sections of your site (e.g. content above the navigation);
it allows to show spiders unique page elements first - before sitewide elements (e.g. article before sitewide navigation);
it allows to place search crawlable elements above blocks that are ignored by search bots (e.g. content above flash or javascript elements).

The benefits of this technique include:

no “undesired” elements (e.g. navigation, paging, etc) being shown as a snippet in the search results;
important and informative content loads first (lower bounce rate from slow page loads);
better rankings (priority is given to that content that resides directly after the <body> element).

The only downside (I never felt myself but heard other webmasters report) includes some cross-browser compatibility issues. Can you think of any more method drawbacks? I would be eager to learn about them.

Comments

7 responses so far ↓

sally on Jul 24, 2008 at 10:51 pm

Once again thanks for your post. It is really very informative.

I am not sure about the disadvantages.

Even I have a site in which the navigation bar has many links(its a drop down menu) because of this the content gets pushed down to the bottom of the html page. Even i was thinking the same solution for it. Except home page in other pages placing the navigation menu after the content (using CSS) really am not sure if it is possible or not, lets see.

Thanks
Neil on Jul 30, 2008 at 4:00 pm

This isn’t covered often enough. Excellent post!
Matt on Aug 2, 2008 at 11:17 am

One question though, HOW do we do this? I can’t find a tutorial anywhere.
Tucker on Aug 3, 2008 at 9:22 am

You can change the float direction of your divs. Let’s say you have a left column div and a main content div. Place your main content div before your column div in the html code and reverse your floats.
Matt on Aug 3, 2008 at 9:27 am

Thanks Tucker,

But what about when your site is just centred in a container div. ie, this is the site I am trying to do it for: http://www.elitespeeddating.co.uk
Rahul on Sep 30, 2008 at 1:04 am

Excellent post. I Googled “content before navigation” and came here. I completely redesigned my website after I realized how horrible it looked to a bot - I mean, I had 15+ links before the actual content!
Jeff on Dec 11, 2008 at 3:31 pm

One possible drawback I can think of is this: What if you have alot of content, and it pushes your menu below the 100k (I think thats what I read) limit that spiders stop reading the page at?

If the spiders aren’t seeing your navigation links, you are going to have a problem.