Search Friendly HTML and CSS Menus

Most Webmasters, when first building their Web sites, worry about creating effective landing pages and designing eye-popping graphics in hopes that these site elements will convert into sales. While these are important aspects of creating a storefront, any long-term online business should spend a portion of its initial development time on the architecture of the Web site, including its navigation menus. One of the first things our SEO project managers do when taking on a new client is to examine a site’s main navigation areas to ensure they are search engine-friendly.

Smaller Web sites tend to utilize search-friendly navigation from the get-go because they may have only 10 - 15 pages on the site. With such a small number of pages, it is easy to create a vertical or horizontal menu that can get users to where they need to go without sacrificing style or user-friendliness.

If, however, a Webmaster is dealing with a large Web site consisting of hundreds, or even thousands, of pages, then a more dynamic approach to menu design needs to be applied. The Web designer needs to take into account several factors before beginning to develop the menu.

Here are a few tips to help you to create an SEO drop-down or slide-out menu navigation system for your Web site:

1) Outline Your Menu

Break your menu into categories. This can best be achieved by creating an outline of sorts. This is going to help you keep your menu (and Web site) organized, give users an easy way to get around your Web site and keep the search engines in the loop on any updates or additions to the site.

Example: Once we have identified a need for a menu update on a client’s Web site, we ask them to send us something like the following. In this step, we tell them to create their optimal menu layout, with their preferred menu text. Some clients are savvy enough to understand the importance of keywords and integrating them into the menu, but from a development standpoint, we often save this step for later.

HOME

PRODUCTS [Drop Down To:]
      -HTML Menu Products
      -CSS Menu Products
      -DHTML Menu Products
      -JavaScript Solutions
      -Custom Scripts

 INFORMATION RESOURCES [Drop Down to:]
      -The Basics of HTML Menu Creation
      -Guide to Beginner CSS
      -When to Use Java
      -Our Daily Menu-Style Blog

CONTACT US

ORDER

2) Optimize Keyword Phrases

Step 1 (above) gives us a rough outline to work with. The outline usually only takes the client an hour or two to come up with, as most business owners come out of the gate with an idea of what information they want on their Web site.

In Step 2, our SEO project manager reviews the menu outline and compares this information to the keyword phrases that the Web site is being optimized for. We utilize keyword research tools like Wordtracker, Google Keyword Tool and SEO Book Keyword Suggestion to help us identify short but effective keyword phrases that we can use in the drop-down menu.

This step can be one of the most important steps you take when creating the menu layout. Because most Webmasters will also be employing off-site search engine optimization, it is important to have an internal navigation structure that matches this optimization effort. If you are creating articles for submission or distribution and using the keyword “HTML and CSS Menu” as an anchor text, pointing it to a specific URL on your Web site, then it is important to have this same keyword phrase, or a close derivative of it, built into your internal menu. This way, both search engines and humans can easily locate the information which you consider to be important for the “HTML and CSS Menu” phrase.

3) Find the Right HTML/CSS Drop-Down or Slide-Out Menu

Once the menu outline has been finalized and you feel comfortable with the keyword phrases, it’s time to have the Webmaster, designer or coder identify the right kind of menu for your Web site. While menu styles may vary, the important thing here is that your menu must be spider-able by the search engines.

For many start-ups, it is hard enough to build a Web site, let alone implement a drop-down or slide-out HTML/CSS menu. But it’s not as hard to do as you may think! There are many FREE search engine-friendly HTML and CSS menus available for download from Web sites online. Simply do a search at a major engine and you’ll be able to find one.

If you happen to find a menu on another Web site that you like, take a look at their source code and see if you might be able to spot who created the menu-Webmasters will usually leave the author credit commented inside the code. Make sure that if the menu is copyrighted that you get permission to use it, or purchase the menu from the author. We have a core list of menus we work with because they are so scalable.

Take a look at the following menus. They utilize HTML and CSS that are most definitely readable by search engines, while using a little bit of Javascript to give them the drop-down or slide-out functionality:

Glidemenus from DHTML Kitchen (Used on this very website!) ($50.00)

Pop Menu Magic (Dreamweaver MX Plugin $90.00) (Example: Insight Journal)

Chrome Menu by Dynamic Drive (Free!)

If you’re an HTML/CSS coder, you should have no problems implementing these on your Web site. If you don’t have much experience, then don’t worry-the WeWriteIt, Ink. team can help you do this for a nominal fee. It takes about 1 - 3 hours to implement the menu, depending on the style requirements and existing structure of your Web site.

Contact us and we’ll be happy to build it for you!

4) Verify that Your Menu is Search Friendly

Make sure that any menu you choose is search-friendly. I can’t tell you how many times we have made a recommendation to a client who either: 1) tried to install their own menu; or 2) had another service install the menu because our consulting rate seemed a bit high for them. In the end, they spent either 10 hours trying to build their own, or $300 having another service install the menu for them. (Not to beat a dead horse, but WeWriteIt, Ink. can do this for you, and for less than $150 in most cases!)

In any case, whether you install it, we install it or someone else installs it, you must verify that your menu is search-friendly. How does one do this? It’s easy if you use the Poodle Predictor tool. This tool will run a diagnostic on your Web site and show you how the search engines see it. If you run the tool and it shows all of the items within your menu, all linked correctly, then you are good to go. If you run the tool and can’t see your menu anywhere in the report, then your menu is not SEO’d.

5) Make Your Menu Easy to Update

Make your new HTML / CSS drop-down or slide-out menu easy to update! The first couple of Web sites that I launched back in 1997 were very, well, rough. They were small sites, so they didn’t require all that much development. But, as we began to market our businesses online, we began to require more and more information. More site pages. More Web sites. This led to the problem of content management and menu updating on, sometimes, hundreds of pages. We’d add a new category, and then have to update the menu on 100 pages to reflect the change. It took hours. Be sure to implement technologies that can automate this process for you. Wordpress, which is the application that powers this Blog, is an excellent example of a tool that automatically updates the menus with the click of a button. The horizontal menu at the top of this Web site is being implemented utilizing PHP includes. What this means is that we build the menu and save it as a file called “themenu.php.” Then, we include this “themenu.php” file inside our templates. So, when we update an item in the menu or add a new drop-down to it, it automatically updates across the entire Web site. It took me many months to finally come around to implementing this technology back in 2002, even after many attempts by Ron Wicker (now CEO of Linkworth) to show me the benefits. Let me save you about 250 hours of work right now: Use dynamic content management and menu management.

Oh, and did I mention that we can do this for you right here at WeWriteIt, Ink.?  :) 

I hope this insight into creating search-friendly HTML and CSS menus will save you some time, and even more importantly, that it will help you to improve the delivery of information on your Web site. Effective, organized menu navigation systems are quite important for both search engines and humans. When you begin developing this portion of your Web site, use these tips to create a menu that makes both search engines and human users happy!

Thanks for reading.

Sincerely,

Mark Holy
Director of Operations
WeWriteIt, Ink.

© Copyright 2007 WeWriteIt.com.