SEO Table Trick
Please Note: This is very old information. Nobody lays out web pages with tables anymore. If you’re interested in SEO and design, learn about Cascading Style Sheets (CSS).
Search engine spiders see your web pages in the order that the HTML presents your content. Using tables to control your page layout can put less important information (like navigation content) ahead of your main page content. You can use style-sheet-driven layouts to get around this (see sidebar), but sometimes an old-fashioned table layout works just fine to move your important content to the start of your HTML documents.
(To take a quick look at an approximation of the simple, stripped-down version of a page that a search engine sees, you can look at it with a Lynx viewer.)
NOTE: This is fairly advanced HTML. If you’re a non-technical independent professional who has come upon this page, you might want to just think of this technical mumbo jumbo as one more piece of evidence that I might actually know what I’m doing ;>
The Original Search Engine Optimization Table Trick
I first saw the original search engine optimization table trick several years ago. It works like this: you use a 2-by-2 table with a blank first cell and rowspan=2 second cell to put your main content at the top of your HTML code, like this:
|
Main Content |
|
|
Nav |
Here’s the HTML for this trick:
<table cellspacing=”0″ cellpadding=”5″ border=”1″>
<tr>
<td> </td>
<td rowspan=”2″ valign=”top”><p>Main Content</p></td>
</tr>
<tr>
<td valign=”top”><p>Nav</p></td>
</tr>
</table>
The problem with this trick is that once you get a lot of content in the main cell, the nav cell starts to move down the page as the browser renders the two cells in the left column. A number of workarounds for this problem have been proposed, but I could never get a stable page layout with this trick.
The New Search Engine Optimization Table Trick
My new version of the SEO table trick uses two tables (rather than table cells) to put main content first while still maintaining a stable page layout, with the nav content showing up consistently in the top left part of the page.
Here’s a simple version of this layout. I want main content to show up first in my HTML, then sidebar content, and finally navigation content.
|
First, I create the dark gray, 100%-width “super table” (I know how inelegant nested tables are, but this is a necessary evil, at least for my implementation of this idea) to hold the search-engine-optimized layout. Then I create the white, 80%-width main content table, which I right-align. Finally, I create the light gray, 20%-width navigation table, with no alignment attribute assigned, which puts it to the left of the right-aligned main table (I also use the valign=”top” attribute in the “super table” TD cell to make sure the nav table is always at the top of the page).
Here is a slightly more formatted version of this idea, which shows the basic idea behind the page layout I used to use on this site:
|
[ header/logo ] |
|
Here’s the HTML code for this page layout:
<HTML>
<BODY>
<!– HEADER/LOGO TABLE –>
<table width=”100%” bgcolor=”#666699″ cellpadding=”5″><tr><td>
<p><bold>[ header/logo ]</bold></p>
</td></tr></table>
<!– BEGIN SUPER TABLE –>
<table bgcolor=”#eeeeee” width=”100%” cellspacing=”0″ cellpadding=”0″ border=”0″><tr><td valign=”top”>
<!– CONTENT TABLE –>
<table bgcolor=”#FFFFFF” align=”right” width=”80%” cellspacing=”0″ cellpadding=”5″ border=”0″>
<tr>
<!– MAIN CONTENT CELL –>
<td width=”70%” valign=”top”>
<p><strong>Main Content</strong></p>
<p>Your important main content is right here near the top of your HTML code. </p>
</td>
<!– SIDEBAR CELL –>
<td bgcolor=”#eeeeee” width=”30%” valign=”top”>
<p><strong>Sidebar</strong></p>
<p>Sidebar content comes second, after main content. </p>
</td></tr>
<!– FOOTER ROW –>
<tr><td width=”70%” align=”center” valign=”top”>
<hr size=”1″>
<p><a>home</a>
| <a>site map</a>
| <a>contact</a>
</td>
<td width=”30%” bgcolor=”#eeeeee”> </td>
</tr></table>
<!– END CONTENT TABLE –>
<!– NAV TABLE –>
<table bgcolor=”#FFFFFF” width=”20%” cellspacing=”0″ cellpadding=”5″ border=”0″><tr>
<td bgcolor=”#eeeeee” width=”100%” valign=”top”>
<p><a>Nav 1</a></p>
<p><a>Nav 2</a></p>
</td></tr></table>
<!– END SUPER TABLE –>
</td></tr></table>
<!– BOTTOM TABLE – OPTIONAL –>
<table bgcolor=”#666699″ width=”100%” cellspacing=”0″ cellpadding=”5″
border=”0″>
<tr><td> </td></tr></table>
</BODY>
</HTML>
Attribution
Feel free to use this code however you’d like, but if you do I’d really appreciate a link back to my site. Here’s some HTML code you might want to use on your site:
<p>Thanks to Larry Swanson, the <a href="http://www.larryswanson.com/">best massage therapist in Seattle</a>, for his insight on how to create a search-engine-optimized page layout.</p>
This page created 4/5/03; last updated 11/21/03.
Comments on this entry are closed.