Optimize HTML Tables for Search Engines

How To Optimize HTML Tables for Search Engines and keep your
navigation on the left while maintaining SE Optimization efficiency!

by Stephen Mahaney

article reprinted with permission from Search Engine News

Perhaps you've heard that HTML tables reduce search engine optimization efficiency. The truth is, it isn't the HTML table layout that reduces the efficiency, it's the content order of appearance within the table that auses the search engine problems.

Specifically, it's when site navigation is placed inside the first cell of the table that causes search engines to erroneously catalog the navigation links as the theme of your site.

Simply put, site navigation utilizes words like Home, Products, Services, Contacts Us, About Us, Privacy Policy, etc. Such words are certainly not the primary "keywords" that an online business wants a search engine to index. However, when such navigation is placed into the first cell of an HTML table, as is typically the case, those are exactly the words a search engine sees first, and indexes -- much to the dismay of search engine optimization strategists.

Without a doubt, this is a top design concern that catches most webmasters between their understandable desire to build easily navigable pages and their company's need to score well in the search engines.

Here's a simple solution...

If you've faced this dilemma, fret not. We have a clever, yet simple solution to one of the most common search engine optimization problems known to site designers. Now you can use HTML tables to achieve a tastefully pleasing and predictably consistent design layout AND fully optimize your pages to score high in the search engines - here's how.

The technique involves using a blank table cell along with an appropriate rowspan specification on the subsequent table cell. Doing so allows you to set the contents of the main section of your webpage as the very first body text a search engine will "see" in the page's source code.

Then, by placing the navigation column within the next table cell, the webpage displays navigation on the customary left side in spite of the fact such navigation physically exists after the body text of the main section in the source code.

This strategy gives you the best of both worlds -- design appeal AND search engine optimization efficiency. Here's what it looks like...

Place your page contents and keywords here. Take a close look at the code below and you will notice that this text appears first in the source code and above the text that appears in the table to the left. Therefore, a search engine will see this text and index it before it sees the text that is located lower in the source code of the page. To prove it, copy and paste the code below and save it as an HTML document. Upon viewing the page your end result will look exactly like this green and yellow table combination you see here giving you a ready-made search engine friendly table-template.

Place your navigation links here. Although it LOOKS like it is the first text when viewing a page, in the eye of the search engine it isn't because the text contained in the cell to the right actually appears first when viewing the source code. (see below)

<table border="1" cellpadding="5" cellspacing="0" width="450">
<tr>
<td valign="top" bgcolor="#eeeeee" align="left" width="140"></td>
<td valign="top" align="left" bgcolor="#efefff" width="450" rowspan="2">

Place your page contents and keywords here.

Take a close look at the code below and you will notice that
this text appears first in the source code and above the text
that appears in the table to the left. Therefore, a search
engine will see this text and index it before it sees the text
that is located lower in the source code of the page.

To prove it, copy and paste the code below and save it as an
HTML document. Upon viewing the page your end result will
look exactly like this green and yellow table combination you
see here giving you a ready-made search engine friendly
table-template.
</td>
</tr>
<tr>
<td valign="top" align="left" width="140" bgcolor="#eeeeee">

Place your navigation links here.

Although it LOOKS like it is the first text when viewing a page,
in the eye of the search engine it isn't because the text
contained in <B><I>the cell to the right</I></B> actually
appears <u>first</u> when viewing the source code. (see
below)
</td>
</tr>
</table>

Copy the example in green above and then insert your own text into the format. I'm sure you'll see right away how easy it is to place your keyword content strategically in the path of the search engines even when using HTML tables. Don't you wish all your optimization problems could be solved so easily!

Question: How much money could a tip like this mean to your company's bottom line. $100? ...$500? ...more? ...because it improves your positioning on the search engines, maybe a LOT more! If you answered yes then you owe it to yourself to check out Search Engine News.

Pandia Search Central calls Search Engine News, "....probably the best newsletter on search engine promotion in the world."

Return to Beginning HTML Tutorial Index