SEO Mythbusters: Are JavaScript Menus an SEO No-No?

JavaScript enabled, dynamic menus allow you to pack a lot of information in a tight space and make it easier for shoppers to find what their looking for. But for years, SEO professionals have advised against using JavaScript menus, warning that search engines can't read JavaScript. In times past, that was true. But search engines have come along way since. Unfortunately, old information still exists on forums and in blogs, and many are confused about JavaScript and SEO, and how to do things right.

Examples of fly-out or mega menus

The most common form of JavaScript enabled menu is what designers call a "fly-out" or "mega" menu. Fly-outs can be seen on hundreds or even thousands of online retail sites.

The key features of this sort of menu are that:

1. Only top-level product or site categories are displayed by default
2. Sub-category information displays when a user hovers over a top-level label
3. All of the sub-categories are anchors, linking to very specific product category pages

Mega menus may also be used for "navandising" - including images or graphics that cross-sell or up-sell related products, services, or offers.

Benefits for shoppers

Some online retailers have a significant number of product offerings or variations across many product lines. While that variety is often a boon for shoppers and merchants alike, it can make finding specifically what you're looking for something of a challenge. Fly-out menus make it easier to sort through available products.

SEO-friendly mega menus: it's all in the code

It is true that JavaScript can be written in a way that hides anchor tags from some search engines. For example, if we built a mega menu that was added to the document object model by the JavaScript, some search engine bots might not be able to "see" the menu.

But most mega menus include all of the links and tags in the actual HTML markup, typically in the form of an unordered list. These lists are then hidden from view with a cascading style sheet (CSS), JavaScript, or a combination thereof.

For example, Aldo Shoes' mega menu sub-categories are coded directly into the HTML, creating several rich, text-based links for search engine bots to spider and index:

In fact, the HTML for a mega menu can look surprisingly similar to the HTML for a site map, which most SEO pundits praise.

For more information on how to build an SEO-friendly JavaScript menu, check out my previous Get Elastic post, Build SEO-Friendly JavaScript Menus.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.