CSS and SEO: 3 column frontloaded layout

by Peter

SEO (Search Engine Optimization) is a biggie. But it is seemingly extremely complicated, in the sense that a huge number of factors affect how a given page ends up in searches.

One of the factors some authors and discussants on the net point to, is how well your page is designed. Some point out that it is desirable to have a design where the content column is the first to load, so that crawlers and bots indexing the page meet the content you want to be indexed on first. So the problem is like this:

design-2That is, you have a nice layout (much nicer than my illustration). And when the crawler meets your site’s HTML, the first thing it sees is all the stuff you have in your left sidebar. Perhaps a navigation menu, some news, some advertisements, or something. That’s number 1 in the figure. But all your content, or most important content, the stuff you really want to be indexed on, is in box 2.

So what you want is that the crawler read the page like this:

design-3Here the crawler reads first the main column, then the left sidebar, and finally the right sidebar. Just as you want. Andd hopefully in a manner that gives better indexing.

To achieve this turns out to be very easy. Here is a picture of how it could look:

frontloaded-3-column-designAnd here is a link to the 3 column frontloaded (or content-first) web page (use view source to see the HTML). This is the CSS for it – just the barebones. You can replace the fixed widths in the CSS with percentages and turn it into a flexible, strechable layout.

Please note that all this does is to show a way to make the content load first – there are other problems that have been solved elsewhere by far better CSS-ers than me that are not addressed here for the sake of simplicity, such as getting columns of equal length, and so on.

There is another way to achieve the same result – to load the content column first with a margin big enough for the left sidebar (eg. “margin-left: 185px”), and the later move the left sidebar into the content margin. If this is done with  sidebar-wide margins on both sides of the main content DIV, it opens up for hybrid layouts with fixed sidebars and a flexible content area (“negative margin designs). Personally I don’t like these designs because of the Dreamweaver rendering bug, but they are perfectly ok and display properly in all CSS-compliant browsers.

Related Posts:

Leave a Comment