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.

Example of mega menu

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.

Mega menu example with graphic

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.


Related Articles

26 Responses to “SEO Mythbusters: Are JavaScript Menus an SEO No-No?”

  1. If you are using an internal linking structure, you may wish to limit some mega menu tags with “rel=’nofollow’” attributes which will inform search bots not to use a link for the purpose of Page Rank.

    Why would you do that? You’re intentionally “disintegrating” a part of the PageRank that would otherwise flow back to the important pages. I’m not sure if I’m clear enough… You should only use rel=nofollow on your internal pages when you really don’t want the linked URL to get indexed (and even in this case it’s optional thing, you have to put “noindex” on the URL anyway and the result is the same no matter you used the rel=nofollow on the link to this URL or not).

    Internal PageRank Sculpting using the rel=nofollow is impossible since Google will simply count all of the “do follow” and “nofollow” links on URL and divide page rank among them, than the PageRank that would be sent to “nofollowed” link gets “disintegrated”.

  2. I may want someone to build me a SEO friendly mega menu. Is there someone you can suggest doing that for me?

    Let me know…………thanks.

    • Jason Day says:

      The great this is that there are a lot of scripts pre-made – most in jQuery (a javascript engine for ease of use). You can find them at htmldrive.net, dynamicdrive.com or search for jquery megamenu.

  3. Matt says:

    Navandising is becoming more and more common in my opinion… we actually host the Roots site here at PFSweb (it uses the Demandware platform) and it has been really interesting to see the site evolve over the years.

  4. Matt M. says:

    I just implemented a mega menu in my online art store.

    @Audio Bible and everyone else, here is a great mega menu tutorial using jquery and nested unordered lists. You really can include any html you please. Products on sale, etc.

    According to Jakob Neilsen larger or “mega” menus are more usable than regular drop downs.

  5. David Minor says:

    @Toni, yes, talk about perpetuating SEO myths!

    PageRank is divvied up regardless of nofollow. Nofollow links simply don’t pass it on.

    • SEO Joe says:

      Google still passes on Page Rank on nofollow link, it just doesn’t give as much. I built a site that had nothing but nofollow links to it and was able to move it up in the ranking. Google has a tendency to try and get other search engines to follow their new ideas and then turn around and not use it themselves.

  6. As long as the h ref’s are crawlable in the raw HTML code mega menus are fine.

  7. Pavlicko says:

    Hey, I’m not going to be all down on you like the others. Sure, I doubt using nofollow would do much of anything really but water down the rest of the juice – I’d just make sure the internal linking structure for the hot pages gets siloed correctly, i.e. more links pointing to the hot content than the mild content.

    In the cases you showed off above, any loss any pagerank is almost certainly offset by an increase in usability for the visitor. The faster they can find the info they’re loooking for, the more likely you are to get a sale.

    Still, the premise of the post is valid. Always start with straight HTML, then add JavaScript, or CSS, etc.

  8. Rob Woods says:

    I’d recommend never using a nofollow on an internal link. It does actually evaporate some link equity from your site. Additionally, placing a nofollow on a link does not ensure the page that it’s pointed at will not be indexed. If you don’t want a page indexed the best practice is to use the meta robots tag on the page itself with a value of noindex. Again, this doesn’t mean the page won’t be crawled, it just won’t be indexed. If you still want the page to flow link equity to the rest of your site use a meta robots value of noindex,follow. There is simply no reason to nofollow an internal link, unless you think you have too much link equity :)

    In general I wouldn’t worry too much about the number of links you have in a nav menu. Google has become quite adept at parsing a page and knowing when a link is a header, navigation, or footer link and they place very little value on such links. Unless you have hundreds of links in your nav menu, which isn’t a good user experience in the first place, there isn’t really a need to worry about diluting page rank due to nav menus. Make sure you have some written content on the page with some text links to your best category pages and you’ll generally be fine. If you really want to focus your link equity flowing from pages with nav manus you can always use flash for the nav and the engines will generally ignore the links completely. That can however increase page load times and the menu won’t render on Apple devices. In that case you need to be very careful to ensure every page on your site has the correct text links to flow link equity and to ensure the bots can effectively find each page on the site.

  9. SEOP.com says:

    Just to be sure, why not put an XML sitemap on your website. This will give you more assurance that your website gets crawled by search engine bots properly.

    • Shawn says:

      XML sitemaps are great for getting noticed, but you still need links on your pages to pass around link value from page to page. A very ‘noticed’ page with no value still has no value.

  10. awesome article, you deserve a free iPad: http://bit.ly/freeipad6

  11. nancy killian says:

    Nice post. Just putting it out there, if you need a yacht transporter, look up Yacht Exports. They do a great job.

  12. Thanks for your comments, in particular I want to point out this article which is a blog reaction to this post
    http://inchoo.net/ecommerce/why-relnofollow-in-ecommerce-menus-is-a-bad-idea/

    I will now update this article to correct the reference to nofollow in the menu so future readers are not misled, as not everyone reads the comments.

  13. The best way to build these menus is CSS + HTML. In doing so you alleviate all potential crawl issues.

    Sure, Google can crawl javascript, Heck, they can even submit web forms. HOWEVERM, that does not mean the other search engines can, or do nearly as good a job.

    Further, search engines allot a certain amount of time to crawl your website and you definitely don’t want them wasting time trying to parse less-friendly navigation.

    CSS+HTML = GOLD

  14. You can build search engine friendly mega menus, but that doesn’t mean a mega menu is good for SEO. More nav links means more site target dilution. Instead of being about a handful of verticals, it’s a plethora verticals (which is no vertical at all). My preference is to only show subnavs when I’m in the related section. That way it at least reinforces the vertical I’m trying to emphasize for that section. I realize that people think that showing mega subnav options is best for usability, but I don’t agree with that. If naming schemes and IA are done well, it makes it unnecessary. And yes, it’s okay to add an extra click to the user experience, just like it’s okay to have content below the fold (another ridiculous myth).

  15. AJ Kohn says:

    As you state, the ability for search engines to see and crawl these drop down or mega menus is less of an issue these days.

    However, drop down menus do add a lot of links to a page and dilute the trust and authority it passes on to all subsequent pages. Google advises to limit the number of links on a page to 100. Now, clearly this isn’t a hard and fast rule but if you can reduce links, why not?

    In addition, if you have a diverse site, you’re driving links (with anchor text) to and from unrelated topics with mega menus. In essence you’re making it a lot more difficult for a search engine to understand what each page is about. I’d also argue that less is more and having these menus actually chases people away instead of engaging them.

    I’ve actually done tests with drop down menus and found that less than 5% actually use them! I tell me clients to get rid of drop down menus right away. It’s a convention that simply hasn’t proven useful from a UX perspective and clearly has negative SEO impact.

  16. Help Desk says:

    I am so glad you shred this. It organizes a website, makes it compact. Fixes all the clutters. Will I be able to use this in my blog? :)

  17. Hi guys, great article and comments. There seem to be a mixed opinion regarding java menus. I currently have a large number of sub categories which I want to add onto a java menu to make it easier for users to find products, however I am worried about losing page rank. I currently have around 160 links on my homepage as it is, which is against what google recommends. Will another 100 or so sub categories affect my page rank, and read the sub categories as more links on the homepage? I like the sound of Rob Woods comments, if this is correct I cant see it being an issue, but as there are a bunch of mixed opinions here, im not too sure what to do. If any of you can take a look at my site and see the sub categories maybe you can advise on whether I should or should not add a java menue on the site. Thanks!

  18. Hello. Very interesting site and you lead a very interesting discussion. There is a nice atmosphere here and I’m sure I will often read your posts.
    From time to time I will also try to write something interesting.

  19. Tchupa says:

    Just to be sure, why not put an XML sitemap on your website. This will give you more assurance that your website gets crawled by search engine bots properly.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS