Navigation Menus Using SSI
Copyright 2004 Fabian Lim
A navigation menu is an important element of a website.
A good navigation menu helps your visitors navigate through your website efficiently - in as few mouse-clicks as possible.
You can think of a website navigation menu like the "Table of Contents" of a book.
And the greater the number of web pages on your website, the more important the role of a website navigation menu.
Another important benefit of a navigation menu is it optimizes the internal linking structure of your website and allows the navigation menu links to rank better in search engines, since all web pages will be pointing to it.
(For example, if your website has 1000 web pages, each navigation menu link will have 1000 web pages pointing to it. This will result in the navigation menu links ranking higher than the other web pages)
Here's how you can use this knowledge to improve the search-engine rankings of selected web pages - Simply include the selected web pages as links in the navigation menu and you'll automatically have the rest of the web pages pointing to them.
And finally, here's one method you can use to easily create a website navigation menu - Using Server Side Includes (SSI).
What are Server Side Includes?
Server Side Includes (SSI) are simply instructions (also known as "directives") that are included in a HTML document to execute a specific command e.g. inserting the content of an HTML file.
The SSI directives are "processed" at the Server side, before it reaches the requesting browser (hence the name Server Side Includes).
As a result, the "processed" SSI directives merge seamlessly with the HTML file.
Here's an example of SSI in action at a website (i.e. the left navigation
Notice the left navigation menu is made up of static HTML links.
This is to allow search-engine spiders to crawl through the website to discover other web pages (via the navigation menu links).
An alternative solution to get your web pages spidered by search-engines is to use a sitemap.
A sitemap is simply a webpage that contains links to every webpage on your website and should be linked from your home page.
This will provide the search-engine spiders a path to follow and will ultimately result in your web pages getting fully indexed.
You can learn more about sitemaps here:
Note that most, but not all servers have SSI's enabled. Please check with your web host to find out whether SSI is enabled in your server.
How to Easily Create a Navigation Menu Using SSI?
Step 1# - Create an HTML Navigation Menu File
This is the navigation menu file that will be inserted into your HTML pages and is also your HTML navigation menu template.
A simple horizontal text HTML navigation menu can look like this:
Home | Products | Pricing | About Us | Contact Us
(You'll need to hyperlink each of the above text to make these navigation links clickable by using your favorite HTML editor e.g. FrontPage or Dreamweaver)
You need to save this file with a
.shtml extension once
this file has been created e.g.
Step 2# - Insert Navigation Menu File into HTML File
Open up the HTML file (e.g. products.html) and place the cursor on the location where you wish to insert the navigation menu.
Click here to view the SSI directive:
And copy and paste the above SSI directive at the cursor.
(Be sure to replace "
your_navigation_filename.shtml" with the
name of your navigation menu file)
Note: You CANNOT use absolute path with an SSI directive:
e.g. do not use http://yourdomain.com/topnavi.shtml
And finally, save the HTML file with a
.shtml extension e.g. products.shtml
Step 3# - Upload Files onto your Server
The last step is to upload the newly created .shtml files onto your web server and check to make sure the pages display properly.
And if you view the HTML source code of your HTML file on a live internet connection, you'll notice that the SSI directive would have been replaced by the actual HTML navigation menu code.
Maintaining your navigation menu is now a simple matter of changing the contents on the navigation file.
That's all there is to it. Give it a go!