I’ve already reviewed some of the possible usability problems resulting from poorly implementing mega menus. There are also possible SEO problems from poor implementations. First let’s look at the nature of those problems, then we’ll look at some solutions. In brief, though, this is ultimately not a design or technology problem, but an information architecture problem, so the best solutions lie with better architecture.
Mega Menus and Search Engine Optimization Problems
There is nothing inherently wrong with mega menus. In fact, they can be really useful. But like carousels, they often get implemented when people can’t decide what to put in their menu. Their solution? Put everything in the menu.
I worked on one site with 250 links in the mega menu. The client asked why some of their important pages were ranking below less important child pages. Simply put, but linking to almost everything on the site in the mega menu, they were telling the search engines that every page was equally important.
What Does Google Say?
Google itself says in its Webmaster Guidelines that webmasters should “Keep the links on a given page to a reasonable number” (see also Matt Cutts’ discussion of this). Google’s official Search Engine Optimization Starter Guide recommends that webmasters should avoid “creating complex webs of navigation links, e.g. linking every page on your site to every other page.” When the mega menu gets truly large, it effectively ends up doing just that or very nearly.
Few voices in the Search Engine Optimization community are more respected than Ted Ulle. Back in 2008, Ted had a number of clients with -950 penalties and one of the common characteristics that jumped out was a tendency to have site navigation with tons of links. In internet years, 2008 is a while ago, but Ted continued to see this problem in 2010 and 2011, as we’ll see. Also, in 2010, Jane Copland of SEOMoz said that in her opinion “massive drop-downs certainly aren’t adhering to SEO best practices.”
So why would a large collection of links in the page template create problems? There are a number of possible reasons. Please note: none of these are unique to menus formatted as classic mega menus. Instead, they are a simple function of the number of links. However, once the mega menu tool is available to the design team, the number of links can explode if there isn’t an information architecture cop on the beat.
So mega menus are more an enabler than a cause. The root cause is bad architecture and an unwillingness to decide what is actually important. If everything is important, then nothing is important.
Why Do Lots of Links Create Lots of Problems?
- Semantic Chaos. I stole that brilliant phrase from one of Ted Ulle’s posts. Again, a massive number of links off every page in your main navigation effectively says all these pages are equally important. Bad mega menus can add hundreds of keywords that confuse the signal. This, by the way, is true for huge collections of links in footer boilerplate. Again, it’s not a function of it being a mega menu, but a function of site builders being unable to decide what parts of their site matter the most. In brief, you are challenging the search engine by adding this much noise to the signal.
- Link Equity Dilution. This is similar to the semantic confusion caused by the forest of anchor text in your navigation. Each page has a certain strength and each link passes some of that page rank to the pages it links to. The massive number of links dilute the link strength of the page.
- Crawl Challenges. This was more of an issue in the old days when search engines crawled only the first 100KB of code or so, but even with improvements, you’re putting a bigger challenge before the search engine.
- Page Load Times. Again, this is usually a minor issue, but a massive collection of links in the navigation will slow down load times and rendering. It’s rare, but I have seen bad mega menus add several seconds to page load. This can almost always be avoided though.
Fixing the Mega Menu Problem
So what is an enterprising webmaster to do? You have a number of options, some better than others.
- Reduce the number of links. It’s not uncommon for the top 10 links in a large mega menu to account for 90% of the clicks. With some serious thinking about information architecture and some good analytics, you can simply reduce the number of links which will also improve usability. If you can get buy in, this is the preferred solution.
- Use proper markup. The HTML 5 spec includes the ability to specifically denote part of your document as navigation using the nav element. Of course, this is bleeding edge [update: uh… no, this is now standard practice supported by all browsers], so it’s rather early to expect the search engines to be smart enough to understand this and act appropriately. But let’s just assume it’s 2015 and they all “get” this. Still, at a certain number of links, you’re adding noise rather than signal.
The best alternative is to use your navigation like a lens to focus the search engine on the main points of your site, and you do that by making hard choices. With a tiny bit of discipline, a mega menu can use lightweight graphics and a nice structure to improve usability and SEO. With an utter lack of discipline and too many department heads each getting to claim their section of the mega menu, disaster awaits.