How many times have you seen a hot looking navigation structure, only to discover it is practically useless when you tried to actually use it? Or when you are trying to find a site in the search results, but the site’s entire Google snippet consists of nothing but the list of categories taken from the site’s navigation?

When designing a site’s navigation structure, it is one area where it is crucial to carefully balance the needs of usability with the needs of search engine optimization. And unfortunately, it is one area that non-SEO web designers tend to excel on one or the other, but rarely both. There are several things you need to consider when designing your site’s navigation structure, so that you don’t discover problems with it down the road when wondering why your bounce rate is so high or why your pages aren’t being indexed as well as they should.

So first, let’s look at the structure. Where is your navigation going to be on the page? Usability-wise, people look for the navigation on the left-hand side of the page, and it is the best placement. Along the same lines, because the left sidebar is a spot that attracts a lot of eyeballs looking for the navigation, it can also be a great place to place advertising, swapping a left sidebar navigation system for a right sidebar one.

Another popular placement is having a row of links across the top, underneath the logo and header, which works well for a small site but can be cumbersome for anything larger. If you have more than five or six categories or directories to link to, then unfortunately you need to start making rows of links or making drop down menus underneath each… both which are a bad idea.

Most drop down menus tend to be created in either javascript (bad) or flash (very bad). From a usability perspective, drop down menus can be very easy to use or they can be created in such a way that they are a usability nightmare, especially when extremely precise mouse movements are required to use it. And not everyone has the control – nor the desire – to do that. And if a user must navigate the drop down menu where a slider menu then pops out the side of each choice on the drop down menu, even worse. It is not to say that this cannot be done, however, it does take usability testing to ensure that it is being done correctly.

You also need to consider cross-browser compatibility when designing javascript navigation. Some web designers only test in one or two browsers, but there are other browsers out there that your navigation could break in, meaning all those visitors not using IE or Firefox are left floundering on your site without a way to get beyond the page they initially landed on.

Now, have you ever turned javascript off? Try it and then go to a site with javascript navigation and see what happens. It isn’t pretty. And not only can users not find their way deeper into your site other than what other text links you happen to have outside of navigation, but keep in mind that is also what the bots see.

The same thing applies to flash navigation. Uninstall flash and see what happens when you go to your favorite site with flash navigation. It isn’t pretty either! Either nothing shows up or the visitor starts getting warnings to either install flash or upgrade from their current version. And just like javascript, bots can’t read links imbedded in flash either.

From a search engine optimization view, drop down menus in flash or javascript can be a downfall of a site. The main index page of your site is the most important page on your entire site, and you want to ensure that the search engine bots can in fact parse all the deep links you have to your site. But if you are hiding them within javascript or flash, it is not giving those pages an added post in the search engine’s eyes.

And what is worse, Google, Yahoo or MSN might not even be able to find those pages if the only links to them are embedded within flash or javascript. And yes, there is evidence that Google is extracting URLs from javascript, it doesn’t seem to be using it for deep crawling a site. While some web designers can create javascript or flash menus with an alternate navigation system for the bots, use a lynx browser to double check that the URLs actually are accessible to the bots.

Using additional breadcrumbs is also a good idea to complement any navigation structure. Think of it as a “you are here” pointer on a map, which tells a user exactly which directory or subdirectory they are in, and includes breadcrumbs from each level up to the home page. So if a user lands on a page deep within the site from a search engine referrer, they can easily find similar articles by jumping up to the directory the original article was found in.

Are you fighting against a designer or company CEO who insists he or she wants the fancier, yet not search engine friendlier, javascript or flash navigation systems on the website? Ask them to name important sites on the web that are using these systems, ones that are performing well in the search engines. The big well-known brands on the internet are not using them. Just look at sites like Amazon, CNN and eBay for starters.

Still having trouble convincing… or being convinced yourself? Also look at the top competitors in your market area and unless you are in a completely non-competitive market area, you will likely find that none of them are using flash or javascript navigation either. And that can be a big motivator if you are trying to convince the powers-that-be that text navigation is the best solution.

Lastly, consider the placement of your navigation code within the HTML code. Placed at the beginning of the part of the HTML code that actually begins displaying text on the page, you will discover that the search engines will consider that content is the most important part of the page, giving a greater emphasis on those words. So be sure to use CSS so that your navigation HTML actually is at the end of the code, rather than the beginning, so that the actual content of the page appears higher up.

This will help place emphasis on the main content of the page rather than the keywords in your navigation structure. Using a lynx browser will also show you the text that is highest up in your document, so make sure it is the content and not the navigation. This will also help avoid the snippet problem where you see your navigation categories showing up as your site’s snippets in the search engine results, particularly when one of the keywords that was searched for happens to be one of those navigation categories.

Creating a navigation system that pleases both users and the bots can be a tricky balancing act, especially when so many prefer to go the “fancy” route. You can definitely run into problems when you create a navigation system without considering the impact and consequences of doing so, both from a search engine optimization viewpoint and also from a usability perspective.

Don't miss a single post! Subscribe to my RSS feed

Press my buttons!

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 

Written on March 31, 2007 at 8:23 pm and filed under Search Engine Optimization, Usability. You can make a comment, or trackback from your own site.