How To Impress Search Engines and Users - Focus: Web Site Navigation

The following article has been kindly supplied by our usability consultant, Kim Krause from cre8pc.com.

Search engines and directories are seeking "quality" pages to present to their users. By consistently using a few simple design techniques, you can reward them by having a site that's easy to scan and effortless to purchase from. If you take the time to implement the simple navigation and coding tips below, you will present your visitors with a user interface that is immediately understandable and navigable.

Navigation for Usability and SEO

Never design a user right out of your Web site; do everything to keep them there, browsing around. If you follow this rule of thumb, search engine crawlers will also "run around" the Web site looking for pages to add to their database.

1. Be consistent and consolidate wherever possible

"Help," "FAQ," "Information" and "Instructions" can be all put into one page or one "hub" that is devoted entirely to assisting your user. Break the info up inside the hub if necessary, instead of having four pages that mean basically the same thing. In addition, saying "Information about blah blah," uses those all-important keywords, whereas "Information" isn't helpful to engines.

2. Always use breadcrumb trails

This type of navigation is similar to a popcorn trail. For example: Home > Hub> Bucket A > Bucket B > Bucket C, or

Home > HubA > HubB > HubC with sub-breadcrumb trail navigation for buckets. (See Part 1 of this article for more information on hubs and buckets: (Structure)

Breadcrumbs are used in conjunction with regular navigation. They don't replace it. They're nearly always text links, in a smaller font. Large sites should have top-of-the-page navigation pointing to the top-level pages and hub navigation on the left with breadcrumb navigation inside, and footer navigation should be placed at the bottom of the page.

3. The footer of your pages is also important

When all else fails, there must be a fast way "Home" or to the "Contact" page, at the very least. The footer is a good place to feed text-only links that are redundant to the top-level navigation, so your user doesn't have to scroll back up to the top of the page. Supplying this added convenience also allows another shot at keyword insertion, and helps users who have their graphics turned off.

4. Use keyword phrases within your main content links

These links may go to the exact same place as top-level navigation links but they're labeled with keywords related to the same topic. For example, a top-level navigation link may be labeled "Search Engine Optimization," while a text link lower down on the page from inside a paragraph (pointing to the same page) might say "Search Engine Marketing." Since users and engines use both terms heavily, you're covering your bases by taking this extra measure.

5. Always use a sitemap

Create a content-driven sitemap containing links to the inside pages of your Web site (or in the case of huge sites, links to the top-level pages). A Table of Contents is also helpful in some cases. Be sure to link to your sitemap or TOC near the top of the homepage as it will be picked up by crawlers, and also appreciated by site visitors. Hint: Pay to have this page included in any search portal that offers a regular refresh, if you add new pages on a regular basis.

Behind the Scenes

You've probably heard this before, but it's worth repeating. Be extra careful with "What You See Is What You Get" (WYSIWYG) HTML editors. The generic code they create will often not meet the needs of all users or search engines.

1. Never underestimate the value of your Title tag

Each page must have its own descriptive Title tag that matches the topic of the page exactly. This text appears whenever someone bookmarks the page, and it provides important information for the search engines. Remember that Meta keyword tags are nearly useless these days but are known to be somewhat helpful when the content of the page strongly supports those keywords. Therefore, be selective with what you put in that tag. Don't waste time calculating density and meeting Meta keyword character specifications. Just focus on backing up the actual content on the page, or using synonyms and misspellings.

2. Build a pyramid with your code

One of the easiest ways to satisfy search engines and users is to quickly get to the point of a page by designing it like a pyramid. Put the most important information at the very top of the page, in text or text links that go to top-level pages. Content should be placed so that the most important, useful information is at or near the top of the page, above the "fold." The least important information and links should be lower on the page.

3. Whenever possible put your CSS and JavaScript into separate files rather than having the script on the page

Otherwise, it could interfere with the crawlers' ability to quickly find keywords within your content. Watch out for JavaScript that is used for navigation menus that special-needs users can never see and search engines cannot follow.

4. Get into the habit of placing keywords in your "image alt tag" text and "link title" text

For example: <a href="seo.html" title="Learn more about Search Engine Marketing and Promotion">Search Engine Optimization </a>.

Who says you can't be creative while trying to adhere to search engine optimization or usability standards? Just remember to offer instructions on how to work any new site features, or ask your visitors if they had any trouble navigating, ordering, searching, etc. Some of the best ideas are based on good old-fashioned customer service feedback (i.e., user testing). Though it may seem like a lot of extra work now, with a little practice, designing for searches, sales, traffic and users can become second nature to you.