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.)
Search Engine Optimization Table Layout
This 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. You want main content
to show up first in the HTML, then sidebar content, and finally
navigation content.
| TABLE
1, CELL 1
Main content. Extra words
added to pad this sample copy to illustrate
why the "super table" is sometimes needed
to make things look right.
Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore
magna aliqua. |
TABLE
1, CELL 2
Sidebar content. |
|
First, create the dark gray, 100%-width "super table" (We
know how non-elegant nested tables are, but this is a necessary
evil, at least for this implementation) to hold the search-engine-optimized
layout. Then create the white, 80%-width main content table,
which I right-align. Finally, 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 (You can
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:
| Main Content
Your important main content
is right here near the top of your HTML code.
|
Sidebar
Sidebar content comes second,
after main content. |
|
|
|
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
Thanks to Larry
Swanson for the ideas and content in this article.
|
