One of the biggest eCommerce interface collisions between User Experience Gurus, SEO Masters, & Frontend Developers is site navigation. This makes a lot of sense since navigation needs to achieve so many crucial aspects of the structural, functional, & aesthetic goals of any website – especially eCommerce sites. Many online marketers knock Mega Menus as being horrible for SEO but they don’t particularly have to be. There are a lot of positive aspects to presenting a rich navigation experience but nearly just as many drawbacks depending on your individual perspective so I’m going break down some of the standard arguments and my take on them.
Mega Menu Myth #1: They obscure navigation options from small screens and hoverless devices
This is an easy one – it’s 2013, your website should be adhering to responsive design principles. If it’s not, this should be on your roadmap. This means you’ll handle smaller screen resolutions and hoverless devices with intuitive and joyful alternative navigations like dropdowns and static links. Problem solved.
Mega Menu Myth #2: In the face of too many options, users will select none – so mega menus are bad.
This has way more to do with the actual aesthetic design of the mega menu itself. If you render 15 categories across with a 2px font, 2px indent difference in their sub-items – you’ll paralyze even the savviest information consumer; but utilizing top-level category images, distinct styling differentiators, and proportional whitespace & you’ll avoid this pretty well. Just take a peek at the simple differences between Home Depot and Lowes that make a HUGE impact on usability and ease.
Mega Menu Myth #3: They add bulk mark-up to the top of a page before ‘the real’ content and increase page load times
In 2007 this might have been an issue when crawlers only bit off the first 100KB or so of code from a page to summarize their analysis, but today most pages get fully consumed. The last bit about page load time does present an issue if you load these server-side. The additional images, mark-up, and database queries can lean heavy on load times – luckily with the advent of AJAX you can pretty easily load these heavier menus on-demand. Some SEOs will rightfully argue that loading all menu’s client-side means that your site will suffer from a thin internal link structure which is the counter-case for SEO Mega Menu Myth #2…
Mega Menu Myth #4: Rendering a link on every page to every other page confuses relevancy signals and dilutes link equity
If you’re rendering your entire categorical hierarchy of products on every page this actually has some validity in regards to SEO. Especially when it comes to internal link structure, you’re essentially creating a relationship between every page and every other page on your website – this can be great if you’ve got a super-niche market but in the case of larger retailers like Cabela’s it means you’re associating Women’s Casual Tops with Black Powder Handguns. A great strategy to solving this is a hybrid approach of initially loading the current category’s mega menu server-side to make sure you’re establishing those downstream related content link structure relationships and then loading any other category mega menus via AJAX which will minimize load time and maximize internal link structure relevancy.
Answer: The Ideal Mega Menu Sweet Spot
At the end of the day deciding whether a mega-menu is right for your eCommerce website or not has a lot to do with the shape of your product catalog & customer shopping behavior. If you want to give it a try, shoving as much of the navigation mega-menu content load as possible onto the client-side is going to usurp a majority of the technical SEO drawbacks and designing your navigation to be both enjoyable, informative, & compelling hurdles most of the user experience roadbloacks. Next step if you really want to maximize your internal link structure SEO brownie points, try shifting category and sub-category menu loading server-side – such that any page deeper than the root of the product catalog renders awesomely crawlable anchor links just for its child pages. To the end user they’ll never know the difference besides a slightly quicker load of the downstream mega-menu and you’ll notice a bump in link relevancy without diluting it with the entire sitemap.