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

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

To build a successful Web site takes more than being a skilled programmer or user interface designer. You may know all there is to know about Dreamweaver, MS FrontPage, PHP, HTML, or Flash and still not construct a Web site that will be found in search engines or be easily navigated by site users. Fortunately, being found in searches, generating sales and traffic plus showing consideration for site visitors can all be achieved using the same basic techniques.

Structure

1. Use a tag line

In addition to your Web site name, a slogan or tag line helps immediately clarify for the user what the site is about. Avoid cheesy marketing or hyped promotional content. Instead, place a practical sentence with your top keywords in plain text near the top of the homepage. Engines will find it and quickly "know" what the page is about.

2. Provide visual content alternatives (words) to icons such as directional arrows

Words are clues on where the user is and where they can go and are often better than arrows and graphical signposts. Descriptive text goes a long way towards helping engine crawlers categorize the page. Adding captions above or below graphics is another way to include keywords or additional information to users and crawlers.

3. Group elements together and provide information about the relationships between them

For example, if you sell tools, group them by manufacturer, refurbished, sales/specials or use. Textual directions and instructions to users about the groups and their connections provide more opportunities for inserting important keywords on a page. Usability studies show people scan related items in groups before moving onward.

4. Use headings and subheadings

Whether grouping sections into "hubs" or grouping long pages into blocks, subheadings help users scan the pages. Directory editors can quickly get an idea of the subject matter and engine crawlers will easily locate keywords, especially if you use header tags such as H1, H2, etc.

5. Remove blinking stuff

Animation is cool but it interferes with the ability to easily scan a page. Movement is distracting. Ever try to read moving text that's timed too fast? It's nearly impossible and special-needs software can't see it at all.

6. Links

It helps with Google and the other spidering search engines to provide keywords in text-based hyperlinks. In addition, a sentence that says "Please click here to learn more about blah blah" is warm and conversational, plus it provides subject clues and helps the user stay on track while maneuvering around the site. Using standard hyperlink underlines is always a good idea because it's what users expect.

7. Hubs and Buckets

These are great design elements to experiment with. Imagine for a moment, the card game Solitaire. There's a hierarchy, with the Ace, King, Queen, Jack and then all the numbers. Now, imagine hubs and buckets like that.

The Joker is the homepage. A hub is a King, Queen or Jack. The Ace is your sitemap. The buckets are the numbered cards. You can even visualize that all the diamonds are a sub-hub, all the hearts are a sub-hub, etc., with buckets underneath them. The goal is to optimize each of these hubs and buckets according to theme, making it easier for users and engines to locate them.

Let's look at a product-oriented Web site as another example. There's a Homepage, About Us, Contact Us, Sitemap, and Product Catalog page.

The product catalog page is a "homepage" or "jump page" IF there are several product lines such as executive line, small business line, budget line, etc. Those "lines" each have their own hub page launching the product line. Often these well-written pages act as deep linked "doorways" that rank high on searches for their specific terms. They can be divided into "buckets," where each individual product is featured. Every time a new product is added to the line, a new bucket is added to the hub.

When a Webmaster uses templates in their design, the creation of hubs and buckets is that much easier. Each hub can be a template, while each bucket can be a different, but related, template design. I've seen some very nice sites that use color to help differentiate hubs. For example, the executive line would have a template that features the color blue in the background, and the buckets inside might be a lighter shade of blue. Another hub would be green, with its buckets being a lighter shade of green. This is good for usability. Hub and bucket templates that are unique and easily recognizable without their graphics are helpful to your special-needs or color-blind users too. They may not see the color changes, but they learn that the page structure changes depending on the product or emphasis (such as a sale item, for example).

8. Use common language that users will recognize quickly while scanning a page

This same simplicity will help bring better search results since users will be typing in broad terms first, and then drill down to more specific terms to locate what they want. It's also wise for crawlers and users to have the strongest keywords and most important information in the top-middle of a page.

9. "Front-load" paragraphs and sentences by stating the main topic

This helps users and crawlers to locate information faster. In addition, "skimming" with speech synthesizers helps the disabled user jump from heading to heading, or paragraph to paragraph. In this way they listen to just enough words to determine whether that section interests them.

10. Headings, subheadings, column headers and page descriptions are all excellent ways to feed engine spiders clues about the page theme

They also help users scan content or listen to a page using special-needs software. I love to make subheadings stick out with drop shadow images, but hate losing that SEO-edge. So now I only make graphics for words an engine doesn't care about such as "What's New." Adding text to the alt tag behind the image will provide aid to disabled users. When you want to stress a theme, always put it in writing (real text), not images or JavaScript.

A PDF version of this article is available (PDF 72kb).