Help Your Navigation Help You & Search Engines

You worked long and hard to perfect your site’s main navigation; the slide out menus are just right, the colors change perfectly with a mouse-over, and the font is just what you wanted. And you worked long and hard in Flash.

Now, I don’t mind Flash. I know many a designer that has used Flash in interesting ways to enhance the visual appeal of a site and there’s nothing wrong with a little aesthetic enhancement. There is, however a problem with housing the entire main navigation in a medium that the search engines can’t follow. (There are of course Flash optimization options like SWFObjects and sIFR, but I feel there are much better ways to open up your navigation).

There are of course other technologies beyond Flash (including JavaScript) that close the engines off from this very important linking structure. But instead of dwelling on the don’t’s of main navigation, I’ll focus on the do’s.

First off, text is best. Search engines can follow the links in images, however why not gain relevancy from strong keyword-based anchor text in your main navigation? By using keyword headers in your navigation, you are telling the engines that there are main pages on your site that are relevant for these important keywords. And, if you insist on certain background images for your buttons, there are ways to position text over images using CSS.

Secondly, it can be very helpful to also include drop-down menus containing links to internal pages within the main navigation on every page. This way, no matter where the user, or search engine spider is, they have access to many other pages on the site. This creates a strong linking structure that enhances usability for the user and creates a fluid path for the search engine spiders to follow.

Finally, there are a few ways to create these text-based drop-down navigation systems. I recommend a CSS based version which essentially styles a menu of list items, thus harboring the entire navigation of your site on every page in a simple list format. Now, because upsets can (and usually do) occur when mixing the CSS “hover” function with Internet Explorer version 6, a small amount of JavaScript may be necessary to get this to work in IE6 and ensure happy navigating for users and spiders.

To see an incredible example of a CSS based drop-down navigation, check out Adobe.com.