How to make a table based page layout search engine friendly
A table based webpage layout – how to get it right for the search engines
A purely css based layout is obviously ideal. That’s all part of the push to separate styling from structure, on web pages. So in the perfect world, we keep a table for holding tabular data.
But not everybody is a css wizz. Many people find a table based layout easy to work with and modify. And there are some things that are just so simple to do with a table, that require complex coding when using css.
If you’re going to use a table based layout for your page (preferably with an off page stylesheet, but that’s the subject of another post) then you need to get it right for the search engines. this page will show you exactly how to do that.
the WRONG way to lay out a content table
What’s wrong with the table above?
I have seen many people design their content pages like the diagram above. And its wrong. Never have your table laid out like this, or not if you want to rank well with search engines that is!
So why is it bad? Think about how a search engine reads a table. It starts at the top left, and continues across any further cells in that row. It then moves down to the next row, and repeats the process. So, it’s left to right, top to bottom, starting from the top left. The diagram is numbered in the order that something like Googlebot sees and reads the table content.
It’s quite abovious that in the diagram, the navigation column is going to be seen before your main content. And thats a bad thing. the higher to the top of your page you have your main content, the more relevance and importance the spiders will give your content. Stick navigation links, affiliate ads, or whatever in front of your content, and you won’t rank as well as you should.It won’t kill your site to do this, but you are certainly NOT as well optimized as you could be.
The RIGHT way to lay out your table
The difference between the 2 diagrams
In the first one, search engine spiders saw your main content (in cell 3) after the navigation column.
In the second example, a spacer cell has been placed in the table. This has the effect of moving the content up ahead of the navigation. Although to the eye, it appears exactly the same. So a viewer will see the navigation as appearing on the left, before your main content, while a spider will see it on the next row down, after your main content.
How To Do It
it’s simply a matter of making sure that each individual cell has the correct colspan and rowspan….see below for the HTML to do this.
<table width=”90%”>
<tr><td colspan=”3″> Your header goes in here </td></tr>
Ok thats for the header, the colspan has been set to 3, so it will stretch the full width of the table, which is 3 columns. Next: the spacer.
<tr><td height=”1″></td>
I realize height is deprecated as an attribute for tables, and to be more correct, we should define that with css. But deprecated doesn’t mean it won’t continue to work for many years to come…..and we want to make this simple as we can. So, I have put a height in – this will ensure the cell doesn’t take on a mind of its own as far as height goes. We don’t want it to take up any more room that it has to, and 0px will not be recognized….it needs to be 1px at least.
<td rowspan=”2″> Main content goes in here </td>
We have given the main content area a rowspan of 2. You need this, to ensure the table formatting stays correct.
<td rowspan=”2″>Right column content goes in here</td></tr>
This also has the rowspan=”2″….this is the last cell in the column, so the <tr> has been closed off.
<tr><td valign=”top”> navigation links here</td></tr>
This is the navigation column. Because it is on a lower row than the main content, search engines see it after the main content.
<tr><td colspan=”3″>footer info is in this area</td><tr></table>
The footer is given colspan=”3″, the same as the header, as it spans the full width of the table.
Wasn’t too hard, was it?
And that’s it. Design you content tables this way, and you will see an improvement in your SERPs. You can add in all the extra attributes to the <td> tags of course, I have only given a basic version to demonstrate the layout.
Have fun, and catch up next time.
Have you ever tested this? My guess is there’s no difference in rank because you’ve added an extra table cell… At least, not in 2009. This trick *might* have worked in 1998, but not today. The spiders are much smarter now and they know the difference between content and navigation.
There is no doubt search engine spiders are getting smarter by the day. Is that any reason not to make things as easy as possible for them? As you say, its “your guess”….you don’t know. There are 100s of criteria that go into how a page is ranked in search results. And the layout of a page is only one of them, a definitive test would be almost impossible to make.
Good keywords, titles, a decent linking strategy etc is far more important. But that is no reason not to do this, is it? Look at it this way….at the very worst, it wont make much difference. But it might have a positive effect. So NOT placing your content as close to the start of your page means your page MAY not be as well optimized as it could be.