A lot of sites are designed with the navigation menus either on the left hand side or at the top of the page. While this has logic from a user perspective, it’s not great from an SEO perspective as the search engine “spiders” dump all your HTML and read the text. That text includes link anchors, alt tags on images and title tags etc etc. So clearly if your links come before the page content itself, chances are it’s going to mark down your content relevance a little.
However there are a couple of tricks that allow you to keep your site navigation at the top or to the left, yet make sure it appears to the search engines after all your much more relevant text.
Let’s assume that you want to keep your navigation where it is, and deal firstly with links at the top of the page. The trick here is to use “absolute positioning”. This is slightly easier if you use a fixed-width site but can be achieved with fluid designs. More often than not, you will be able to easily work out how far from the top of the screen your links should be, so that’s one problem made easier. For “left positioning”, this will depend on your design. The key is to put your links in a DIV with exact positioning specified, thus:
<div style=”position:absolute; top 100px; left 100px;”>links</div>
Once done you want to move that DIV to the bottom of your HTML, but because positioning is absolute, it will reposition itself when the page loads. You may need to use absolute positioning on a placeholder DIV for the whole page for this to work, so something like this after your BODY tag:
<div style=”position:absolute; top 0px; left 0px; height:100%; width:100%;”>everything</div>
For fluid widths you may have to get a little more creative, but it’s still achievable with the same method, perhaps using % placement raher than pixels (px).
Now let’s look sidebar links to the left of the page. You can use the same method as above, but if you use tables in your design then it is a bit easier. Typically you define the links first in your table. You might have something like:
<table><tr><td> <a href=”/”>link</a> </td><td>content</td></tr></table>
The trick here is to use spans in your table tags and make it 2 rows deep on the right hand side where your content is, but only show one row on the left by closing up the top row to 1 pixel high, this ensuring the 2nd row rises to the top on the left hand side. Like this:
<table> <tr><td height=”1″> </td><td rowspan=”2″>content</td></tr> <tr><td><a href=”/”>link</a></td></tr></table>
So as far as your HTML goes the content now appears before the links to search engine spiders, however to your visitors, the sidebar remains as it was.