How do I add a web site search feature?

How do I add a web site search feature? cover image
  1. Home
  2. Web Development
  3. How do I add a web site search feature?

Continuing the five most important points for a web site navigation system which I mentioned in the previous article, here are other ways to improve the navigation on your web site so that visitors are able to locate information quickly.

Adding a search function on a web site

Adding a search function on a web site helps visitors find information really quickly. I am sure you would have come across several web sites where you find the Search this web site or equivalent field, and I am sure you would have used it. So I will not gloss over the benefits of including a web site search function – we all know how useful it is.

Sponsored Links

There are several ways you can go about adding a search feature on your web site. You can write a search program (script) for your web site in a server-side language, download a free or a paid one and install it on your web site, use one of the several services available on the web, including Google search!

Let visitors know where they are on your web site

Another aspect of good site navigation is letting the visitor know where they are on your web site; i.e. the position of a web page on the web site tree. If your web site consist of only a few pages, the navigation menu might be sufficient to delineate the place of the web page. However, if the site consists of hundreds of web pages which have been segregated into sections and sub-sections, it is advisable to display the hierarchical web page position at the top of the web page contents. For example, if you look at this page (or any other page on this web site), you will notice that the hierarchical position of the web page is clearly shown at the top (just below the horizontal main navigation menu).
The position of this page is:

HomepageTips and TricksWeb Design Tips and Tricks – Adding a search function on a web site and other navigation tips

Using this approach, not only have I been able to clearly specify the position of this web page on the web site but I have also provided hyperlinks in the phrases so the visitor can quickly jump to another page or a section with just one click. Assuming the visitor likes to read other web site design tips and tricks I have on the web site, he or she can click on the Web Design Tips and Tricks link and go directly to the main page of this section!
Note I have separated the pages with a dash/hyphen. If you want to use a more visual guide, you can employ an image of an arrow such as this one Web site navigation arrow - hierarchical representation of web pages on the web site tree or the → HTML character entity.

Placing Navigation links at the bottom of the page

To further help visitors locate information on your web site; you can provide the main links at the bottom of web pages. In fact, if the web site navigation system has been developed in Flash or JavaScript drop down menu, text links that correspond to those in the navigation system SHOULD be placed at the bottom of the page. Search engines cannot read links placed in flash files [*] and they have difficulty in indexing dynamic JavaScript based drop down menus, hence, placing links at the bottom of web pages directs the search engine bots go to other pages and add them to their index.

* There have been discussions on web forums that Googlebot can read the contents of Flash files but can it follow links embedded in the flash file?
I wrote an email to Google with this query and the reply I got is below (verbatim):

Reply from Google Support:
The Google index does include pages that use Macromedia Flash. However, this is a new feature, so our crawlers may still experience problems indexing Flash pages. If you are concerned that Flash content on your pages may be inhibiting Google’s ability to crawl your site, you may want to consider using a text web browser such as Lynx to examine your site. If features such as Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.
You may want to consider creating HTML copies of these Flash pages for our crawler. If you do this, please be sure to include a robots.txt file that disallows the Flash pages in order to ensure that these pages are not seen as duplicate content.

So what is the take home message?
Googlebot, at the time of writing (9th January 2005), is not able to properly follow links from Flash files… the support is sparse or not there at all!
Another important point that we can glean from the reply from Google support is that on should check a web site using Lynx text browser.

Back to the top navigation link

If there is a lot of content to be displayed, the web page becomes very long, involving a lot of vertical scrolling. In such cases, it would be better if the content is divided and placed on separate pages. However, if that is not feasible (for whatever reasons), you should remember that by the time the visitor reaches the bottom of that long page, the navigation menu would be hidden from view. If that happens, it is good web design practice to display a “Top”, “Back to the Top” or equivalent link at the bottom so that the visitor can be taken directly to the top section of the page where the navigation system resides. You can create such a link by using the HTML anchor tag. An anchor tag with the NAME attribute can be placed at the top of the page and the “Top” or “Back to the Top” link can then be linked to it. Check the HTML tutorial to learn how to write the required code.

Breaking up very large pages for easy navigation

A web page which spans 2-3 vertical screens might be read by the visitor in its entirety. But pages that are longer need to be divided into parts so that the viewer is not overwhelmed with information. I say this from personal experience – I have seldom (if ever) scrolled down and read a web page which spans more than 3 vertical screens. Thus, for long web pages it is advisable that you break them into parts. You should then place numbers at the bottom of each page so that when visitors reach the end of a page they can understand that the page they read is a part of a collection of pages. Needless to say, the numbers that you place at the bottom of each page need to carry links to the corresponding pages. For an example, look at the bottom of this page. An added advantage of breaking up a long web page is that you get a chance to include additional keywords and thus, optimize a page for a particular keyword/phrase.

Web Development