Web site designers should always consider their target audience first when they create a site's navigation scheme. Navigation schemes should enable visitors to find what they are searching for as quickly and as easily as possible. Many web sites use multiple navigation schemes. For example, a site might have a series of navigation buttons down the left side of a screen and have corresponding text links at the bottom of a screen (see Figure 2.16). Figure 2.16. Dee Concrete has multiple navigation schemes to ensure that the target audience can find the concrete form or accessory for which they are searching. Dee placed text links at the top and the bottom of the screen, and it has navigation buttons at the top and the left side of the screen. For usability purposes, Dee also placed text links within the actual body content.
Common navigation schemes include the following:
In the following sections, I go over each type of navigation scheme, its advantages and disadvantages, and how the navigation scheme you select can impact your site's search engine visibility. Hypertext LinksA hypertext link is a word or set of words placed inside an anchor tag. Hypertext is the text placed between the <a> and </a> tags. Consider the following HTML code for a simple hypertext link: <a href="oolongtea.html">Oolong tea</a>
All search engine spiders love text links because they can record the text in and around the link and follow these links from web page to web page. In fact, search engine marketers use a specific term that refers to the HTML text inside a hyperlink: anchor text. Many search engines consider anchor text relevant because webmasters generally link to pages that contain information in which their target audiences are interested. Therefore, anchor text is deemed as important. Usability experts also like text links because they provide the target audience with valuable information about visited and unvisited pages. Your target audience automatically understands that a blue, underlined word (or just an underlined word) indicates an unvisited link and that a purple or faded color indicates a visited link. Furthermore, usability experts often recommend breadcrumb links. Breadcrumbs are text link schematics on every web page that let people know where they are and where they have been. Breadcrumbs are commonly used at the top of a web page and are hierarchical in nature. Figure 2.17 shows how breadcrumbs typically look on a web page. Figure 2.17. Evolution Design Systems uses breadcrumb links as part of its navigation scheme.
Many directories, including Yahoo!, use breadcrumbs as a navigation scheme, as shown in Figure 2.18. Figure 2.18. Yahoo!'s breadcrumb links are shown at the top of the screen. Home > Business and Economy > Shopping and Services > Food and Drink > Drinks > Tea > Organic are all breadcrumb links.
Because breadcrumbs are generally placed at the top of web pages, search engines consider the text placed inside the breadcrumb links important. Therefore, if you have a site that uses breadcrumbs as a navigation scheme, try to use keywords consistently in them. Absolute and Relative LinksIn general, there are two types of links: absolute and relative. An absolute link defines a specific location of the web file or document. The location information includes the protocol to use to get the document, the server from which to get it, the directory in which it is located, and the name of the document itself. The following is an example of an absolute link: <a href="http://www.tranquiliteasorganic.com/oolongtea.html">Oolong tea</a>
With a relative link , the search engine spider or browser already knows where the current document is on a server. Thus, if you link to another document in the same directory, you don't need to write out the full URL. Only the filename is necessary. The following is HTML code for a relative link: <a href="oolongtea.html">Oolong tea</a> Because it makes no difference to the search engine spiders whether you use an absolute link or a relative link, use the type of link with which you are most comfortable. All search engine spiders can follow both types of links. Best and Worst Places to Use Text LinksBecause all search engines can index the text and follow the links in a hypertext link, for maximum search engine visibility, I highly recommend using them as either the primary or secondary navigation for a web site design. Figure 2.19 highlights the best and worst places to put text links, using a page from my own web site as an example. Figure 2.19. Various places on a web page where you can place navigation schemes.
Potential Problems with Hypertext LinksOn the surface, a text-link navigation scheme might seem like an ideal solution because all the search engines prefer this type of link. Additionally, a web page full of text links tends to download much faster than a web page full of graphic images. Thus, using text links as a main navigation scheme can satisfy both the search engines and your target audience. However, too many text links can interfere with keyword density. If you find that you have more words in your text links than you do in the main body content, you might want to consider using graphic images as part of your navigation scheme. The web design team at About.com uses a text-link navigation scheme at the top of the page and in the sidebar (see Figure 2.20). Figure 2.20. The web design team at About.com uses a text link navigation scheme at the top of the page and in the sidebar. Because there are so many text links on this page, they can dilute the keyword density and interfere with keyword prominence. One way About.comretains keyword prominence throughout their site is the use of breadcrumb links at the top of the page.
Another disadvantage of using text links as the primary navigation scheme is that they are often the first body of text that the search engines read. Because this text tends to be the same on many web pages, the first text introduced (in this particular layout) to the search engine spiders is not unique. Furthermore, if a search engine does not use the meta-tag description to display in the search results, it generally takes the first text found at the top of a web page. Generally speaking, a series of text links does not accurately describe the contents of a unique web page, and they usually don't have an effective call to action. To your target audience, the description can appear as a bunch of unrelated words. Too many text links on a single page can also interfere with a page's legibility. The whole point of writing a web page is to have your target audience read it and perform a desired action. People like simplicity and ease of navigation. Thus, find ways to make your text links more visually distinct, easy to find, and legible, such as placing them in a colored table cell or a colored sidebar. If you find that your text links are interfering with search engine visibility and page legibility, consider using graphic images as an alternative means of navigation. See Figure 2.21. Figure 2.21. Evolution Design Systems uses text links as the primary means of navigation. Because the text links do not dominate the site's main content and utilize targeted keywords, this is an effective, search engine “friendly navigation scheme.
Navigation ButtonsA navigation button is a graphic image, generally in a GIF or a JPEG format, that links to a single URL. Corrugated Metals, Inc. utilizes navigation buttons as its main navigation scheme. The webmaster chose to place navigation buttons at the top of the screen and along the right side of the screen (see Figure 2.22). Figure 2.22. Corrugated Metals, Inc. utilizes navigation buttons as its main navigation scheme. The webmaster chose to place navigation buttons at the top and along the right side of the screen. Even though the navigation buttons appear to be a single graphic image, when you right click and select the Open Image in New Window option, you will see that there is one navigation button per link.
Navigation buttons give your visitors a visual representation of how to navigate your site right away, especially if the navigation buttons are visible on the top part of the computer screen. They are visually appealing and can easily draw attention to important parts of your web pages. Peoples' eyes are naturally drawn to a splash of color or a change in dimension. ARCH Venture Partners' web designer used contrasting colors to highlight the on and off buttons on the site (see Figure 2.23). Figure 2.23. ARCH Venture Partners' web designer used contrasting colors to highlight the "on" and "off" buttons on the site. This use of color draws attention to the navigation scheme and lets site visitors know what page they are on, visually.
Web designers and graphic designers, in particular, like to use navigation buttons because they know that a site's target audience is viewing the font/typeface exactly as intended. With graphic images, fonts do not need to be installed on the end users' computers to view them as the web designer intended. Navigation buttons should always contain alternative text in the event your target audience cannot or chooses not to view your graphic images. As long as the navigation buttons have alternative text in the HTML code, visitors can click that text to navigate your site. The Corrugated Metals site utilizes alternative text (see Figure 2.24). Figure 2.24. The Corrugated Metals site utilizes alternative text. The Materials button is not loading. In its place is the alternative text. Site visitors will still be able to click on the alternative text and go to the Materials page.
Potential Problems with Navigation ButtonsAll the search engines can follow the link surrounding a navigation button, as long as the navigation button does not contain JavaScript within the anchor tag. JavaScript can pose problems with search engine spiders; therefore, not all search engines follow this type of link. This type of link is search engine friendly: <a href="oolongteas.html"><img src="images/oolong.gif" width= "60" height="20" alt="Oolong organic teas"></a>
This type of link, a navigation button with a rollover effect, is not as search engine friendly: <a href="oolongteas.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('images/oolongon.gif','','images/ oolong.gif',1)"><img src="images/oolong.gif" width="60" height= "20" alt="Oolong organic teas"></a> When you look at this code, what is the primary difference you see? There is additional code inside the anchor tag: onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage ('images/oolongon.gif','','images/oolong.gif',1)" When you begin to add too many attributes to the anchor tag, such as a rollover script, the attributes can make links less search engine friendly ”though some rollover scripts are more search engine friendly than others. Currently, the major search engines prefer straightforward link coding without any type of script. Thus, if you know your site is utilizing rollover effects on navigation buttons, it is best to include an alternative navigation scheme that the search engine spiders can follow. One effective search engine “friendly layout is to use navigation buttons (with or without JavaScript rollovers) and corresponding hypertext links at the bottom of a web page. With this layout, designers can place keywords in multiple places: both within the hypertext links and in the alternative text of the navigation buttons. Many search engine marketers recommend this combination because of the dual benefit. Image MapsAn image map is a single graphic image that enables users to access different web pages by clicking different areas of the image. Figure 2.25 shows an example of an image map. Figure 2.25. The Tesko Enterprises Web site uses image maps as a main navigation scheme. On this page, there are two image maps: the side navigation and the graphic image in the middle of the screen.
Many search engines do not follow the links inside an image map because of the possibility of image spam. Thus, if you choose to use an image map as part of your site's navigation scheme, always use text links or navigation buttons elsewhere on your web pages. Many search engine marketers mistakenly believe that because many search engines do not follow the links inside image maps, they should never use image maps in site navigation. This belief is not always a credible conclusion because in many situations, a single graphic image downloads much more quickly than multiple graphic images. For example, if a site has 16 navigation buttons that are 2K each in file size, the total for these graphic images is 32K. A single image map might only be 8 “10K in size , much smaller than the set of navigation buttons. With the image map, there is only one call to the server, as opposed to 16, which speeds things up regardless of file sizes. Important
Furthermore, sometimes search engine spiders have an easier time accessing the main body text on a web page if the navigation scheme is a single graphic image rather than multiple ones. Some of the HTML code for an image map can go at the bottom of a web page, below the main body text, rather than at the top. For example, some of the HTML code for the image map can be placed at the bottom of a web page, right before the </body> tag, as shown in the following code for the Tesko Enterprises site: <map name="imagemap"> <area shape="rect" coords="0,180,164,194" href= "metalcomponents.html"> <area shape="rect" coords="0,195,164,208" href= "laserfabrication.html"> <area shape="rect" coords="0,164,164,179" href="conceptart.html"> <area shape="rect" coords="0,150,164,163" href="interiors.html"> <area shape="rect" coords="0,133,164,149" href="exteriors.html"> <area shape="rect" coords="0,111,164,132" href="gallery.html"> <area shape="rect" coords="0,288,164,312" href="contact.html"> <area shape="rect" coords="0,263,164,287" href="links.html"> <area shape="rect" coords="0,238,164,262" href="tips.html"> <area shape="rect" coords="0,213,164,237" href="faqs.html"> <area shape="rect" coords="0,86,164,110" href="benefits.html"> <area shape="rect" coords="0,61,164,85" href="services.html"> <area shape="rect" coords="0,36,164,60" href="about.html"> <area shape="rect" coords="0,4,164,35" href="index.html"> </map> </body> </html> For web designers who use Macromedia products, particularly Dreamweaver, the HTML code for image maps is automatically placed at the bottom of a web page. When is it not a good idea to use an image map? If the only navigation scheme on your web site is graphic images, it is best to use navigation buttons because all the search engines can follow the links surrounding navigation buttons. However, if you are using both graphic images and text links as a navigation scheme, consider the pages' download times. If the image map downloads more quickly than a set of navigation buttons, the image map might be a better choice. Remember that an image map is a graphic image. Always place alternative text in the HTML code of an image map, especially if the image map is at the top of a web page. Drop-Down and Pull-Down MenusFigures 2.26 and 2.27 show examples of two types of drop-down menus: an HTML and a DHTML menu. Figure 2.26. An example of an HTML form drop-down menu on the Sure Fit Slipcovers site. Two HTML drop-down menus are located in the left navigation. Any HTML editor can automatically generate drop-down menus.
Figure 2.27. A DHTML drop-down menu, which was coded using JavaScript and Cascading Style Sheets (CSS).
The main advantage of using drop-down menus in a navigation scheme is screen real estate. Drop-down menus do not initially take up as much screen space as a series of navigation buttons or text links. Furthermore, by freeing up screen space, web site owners are able to place more content that their target audience wishes to read above the fold. Potential Problems with MenusDrop-down menus are generally not search engine friendly because they require either JavaScript or a CGI program to work. Because search engines generally do not follow these types of links, you should always have an alternative form of navigation for the search engines to follow. Additionally, usability experts do not always recommend drop-down menus as a navigation scheme because people decide what they are going to click before they view the contents of the menus. Web designers can use a combination of drop-down menus with corresponding text links at the bottom of a web page for search engine visibility. Dynamically Generated URLsDynamically generated web pages are usually created using a technology such as Active Server Pages (.asp), Cold Fusion (.cfm), Hypertext PreProcessor (.php), Java Server Pages (.jsp), or Perl. Often, search engine marketers state that search engines cannot follow the links inside dynamically generated web pages. This statement is partially true. A more accurate statement is that search engines might not like the URL used to retrieve web pages. If a URL contains a question mark (?), search engines do not automatically reject the URL. Rather, the question mark is seen as an indicator of dynamic content. Other symbols also act as indicators of dynamically delivered content. These symbols include &, $, =, +, and %. Why don't search engines like these characters in URLs? Basically, there are three reasons:
Search engines are progressing in their capability to spider dynamic URLs. In the meantime, web designers should focus their efforts on delivering web pages to the search engines that do not contain stop characters in their URLs. Robots Exclusion ProtocolThe Robots Exclusion Protocol is a text file that you place on your server to instruct search engine spiders not to record the information in specified areas of your web site. In other words, the protocol tells the search engine spiders which sections of your site are off limits. With the Robots Exclusion Protocol, web site owners can instruct search engine spiders not to index individual web pages, subdirectories, or even an entire site. Instructions can also be tailored for individual search engines. For example, Google and FAST Search currently are the only search engines that index Flash sites. A web site owner can use the Robots Exclusion Protocol to instruct Google to index the Flash site and tell the other search engines not to index the Flash site. When to Use the Robots Exclusion ProtocolSome web files, such as items in a cgi-bin directory, are not important to the search engines. When your target audience searches for information, they are not interested in the programs that generate your forms or your drop-down menus. They also are not interested in a web page that is under construction. Your target audience is interested in the products and services you are offering on your web site. Using the Robots Exclusion Protocol ensures that unnecessary pieces of information, such as pages that are under construction, are not shown in search results. Be sure that the Robots Exclusion Protocol is placed on your server before you place any excluded content. Why? Sometimes, the search engine spiders come to your web server before you have had a chance to place the Robots Exclusion Protocol. It only takes seconds for a search engine to gather information about your web pages. Dynamically generated pages that could present a spider trap are also good candidates for the Robots Exclusion Protocol. The Meta-Tag Robots ExclusionOne way to instruct the search engines not to index the content of a specific web page is to use the meta-tag robots exclusion on every page that you do not want the search engine to index. The proper HTML coding for this meta tag is as follows : <html> <head> <title>Page title goes here.</title> <meta name="robots" content="noindex, nofollow"> </head> Some web developers like to place the following robots exclusion meta tag on web pages: <html> <head> <title>Page title goes here.</title> <meta name="robots" content="index, follow"> </head> Actually, this meta tag is a waste of time because this is the default setting. Furthermore, not all search engines honor this type of meta tag. Thus, it is best to use the robots.txt file. The robots.txt FileThe robots.txt file is a simple text document that instructs the search engines not to index parts of your web site. You can easily build this file in Notepad (PC) or SimpleText (Mac). The robots.txt standard should be placed in your server's root directory. In other words, put your robots.txt file in the same place that you put your home page, as shown in Figure 2.29. The URL for all robots.txt files looks like the following: Figure 2.29. The robots.txt file is always placed in the same directory as your site's home page. In this example, the home page is named index.html.
www.companyname.com/robots.txt . A search engine respecting the robots.txt file asks for the file before trying to index any page within your site. For example, if your entire web site is under construction and you do not want the search engines to record any of the information on the site until you are finished, type the following text into a text editor: User-agent: * Disallow: / Be sure to name the file robots.txt and to not use any other file extension. If you save the file as a Word document and call it robots.doc, the search engines ignore the instructions in the file. In the preceding example, User-agent enables you to specify the search engine engines or browsers that should follow the directions on the second line. The way to exclude all search engines is to use the asterisk symbol ( * ), as shown. The Disallow portion enables you to specify the directories and filenames on your server that you do not want the search engines to index. In the example, the forward slash (/) instructs the search engines to ignore everything in your root directory. In other words, the search engines will not index the pages in your entire web site. Generally, most web site owners do not want the search engines to ignore an entire site. Instead, they want specific sections of a web site ignored. For example, sites that use drop-down menus commonly use a cgi script or a JavaScript in the menu. Because this is the type of information in which search engines are not interested, you can create a robots.txt file that instructs the search engines to ignore the contents of the directories that contain these scripts. To create this type of file, type the following text into a text editor: User-agent: * Disallow: /cgi-bin/ Disallow: /scripts/ Be sure that all your JavaScript is placed in the /scripts/ subdirectory. The search engines respecting the robots.txt file do not index anything in the site with these URLs: www.companyname.com/cgi-bin/ www.companyname.com/scripts/ Pages that are under construction or pages that might present spider traps, such as a Calendar page, are also good pages to place in the robots.txt file. To exclude an individual web page, type the following text into a text editor: User-agent: * Disallow: /calendar.html In this example, search engines respecting the robots.txt file do not index anything in the site with this URL: www. companyname.com /calendar.html . Details on how to further use the robots.txt file are discussed in Part 3, "Page Design Workarounds." Internal and External Search Engine OptimizationIf you have site search engine or some kind of search function, how well your own pages show up in your own search results indicates how effective your internal search engine optimization is. How well your pages show up in the search engines outside your site (Google, Inktomi, FAST Search, AltaVista, and so on) indicate how effective your external search engine optimization is. By comparing the two sets of data, you can determine the total effectiveness of your site optimization strategies. Site search engines are a valuable place to collect keyword data because you can compare (a) what people are typing into the search engines to find your type of site and (b) what people are typing into your site search engine after they have arrived. For example, if you find that your end users are able to find a popular product or service using your internal site search engine but are not able to find that information using the major search engines, it might be a good idea to place a dynamic URL into a paid inclusion program. If your site has its own search engine, the following is a list of terms that marketers should track:
If you find that the most popular searches on your site search engine yield little or no results, you know you should be adding web pages that give your target audience what they are searching for. In fact, according to User Interface Engineering in a report titled "Getting Them to What They Want," top usability expert Jared Spool determined that users who found content were far more successful when they navigated by using categories and text links than by using a site search engine. Users were far more likely to find their target content when they didn't use the site's search engine than when they did use it. Thus, if your site's visitors are using your site search engine too much, it is an indication that they are having difficulty finding information using the site's normal navigation scheme. Another good item to check is your meta-tag description. If the meta-tag description is displayed in Inktomi's search results, and your site ranks well in Inktomi, you know that you probably have written an effective meta-tag description for the external search engines. Compare that data to your site's search engine data. Many site search engines use the meta-tag description for display on search results. If a site search yields targeted pages in the search results but very few people click those links in the search results, the meta-tag description and the title-tag content might not be effective for your target audience. |