A three column table layout, for SEO content loads first

by Peter

We assume you want a three column or some multi-column layout. And that you want to have the main content in the middle column. Also, as before, we assume that SEO (Search Engine Optimization) is a biggie, and 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 before they meet your menu with lots of links and other non-essential stuff  (this assumption very likely to be flawed, but I will come back to that in a later post).

So the problem is that the crawler or bot reads your site 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. And you may have some asides or more sexy stuff than in sidebar 1 in your other sidebar as well.

So what you want is that the crawler or bot reads 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. And hopefully in a manner that gives better indexing. Previously I illustrated how easy it is to do this in a CSS-based layout. And on the net everybody tells you that this is something that is a very, very important argument in favor of CSS-based layouts as opposed to table-based layouts. I have read it so many times I have lost count of it. And, even so, it is just plainly wrong! It is a platitude repeated ten thousand times, but no more true for that.

It turns out that it is just as easy to manipulate the sequence in which columns are read in table-based layouts as in CSS-based ones. Just look at this code:

<div id="wrap">
<table border="0" width="100%"><tr>
   <td id="sidebar1" style="padding: 0pt; height: 1px;">
        <img src="pics/spacer1x1.gif" alt="" width="1" height="1" /></td>
  <td id="content" rowspan="2">
        <p>Content  is the first to load. Good for SEO!
        </p><p style="padding-bottom: 30px;">Columns are always equal in height</p>
  <td id="sidebar2" rowspan="2">
       <p>The second sidebar</p></td>
  <td id="sidebar1">
       <p>First sidebar</p></td>

It is short and sweet, no more messy than the Faux Columns
or The Holy Grail layouts. Perhaps less. And it reads the middle column first and has columns of equal heights, along with some other desirable qualities.

It rests on a very clever hack that I happened to find in Joe Clark’s Building Accessible Websites, and which according to him is due to Lauri Harpf of the Website APromotionGuide.com.

And it really is devilishly clever and simple: Instead of using 3 cells in a row, we use six. And in the first cell we use a 1×1 px gif. Then we use rowspan=”2″ to not have to bother with the extra cells, and end up with one extra cell that is 1px in height. And nothing looks different because the one-pixel spacer GIF is unnoticeable. But when you experience it serially, you get the content first, then I have let the right sidebar come second (note that I could have used the same hack and skipped the rowbar=2 there as well, to make it come third instead of second), and navigation (left sidebar) third.

It’s so simple and does the job so cleanly. So, using this smart table hack and some CSS (stylesheet here) we get the following result (see the page live here):


And now the crawlers and bots will encounter the content and the important stuff before they get to the navbar and ads and whatnot!

To conclude: I am actually a believer in CSS based layouts, but the choice between tables and CSS is not at all as clearcut and easy to decide as proponents of CSS-layout style tend to make it. You can do just about the same with tables as with CSS. Sometimes one is preferable, sometimes the other. It is possible to use semantic elements and DIVs inside a table, just as it is inside a DIV-based layout. And it is (almost) as easy to end up in a “DIV-ed nightmare” as it is to be tangled in nested table webs.

Related Posts:

Leave a Comment

{ 1 trackback }