- Mega Menus: SEO Concerns and Usability Pros and Cons (Intro)
- Usability Advantages and Disadvantages of Mega Menus (Mega Menus Part 1)
- Mega Menus and SEO Concerns and Solutions (Mega Menus Part 2)
I’ve already reviewed some of the usability problems with mega menus, but the SEO problems are another source of concern. There are a variety of solutions thrown out around the web, but most of them are aimed at masking the problems rather than truly solving them. So first let’s look at the nature of those problems, then we’ll look at some solutions to the mega menu problem. In brief, though, this is ultimately not a design or technology problem, but an information architecture problem, so the best solutions lie with better architecure.
Mega Menus and Search Engine Optimization Problems
Ultimately, it wasn’t the usability questions that brought me up short with respect to mega menus. It was the SEO concerns. Mega menus end up putting lots of links at the top of the page, sometimes hundreds. Google itself says in its Webmaster Guidelines that webmasters should “Keep the links on a given page to a reasonable number.” Google’s official Search Engine Optimization Starter Guide (PDF) recommends that webmasters should avoid “creating complex webs of navigation links, e.g. linking every page on your site to every other page” (p. 12). 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, experienced, and authoritative 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 templage create problems? There are a number of possible reasons. Unlike some of the usability issues, none of these are unique to menus formatted as classic mega menus. Instead, they are a simple function of the number of links, but I do believe that once the mega menu tool is available to the design team, the number of links tends to explode. So it is more an enabler than a cause per se.
- Confused Relevancy Signals. It helps the search engines determine what a page is about if you keep it laser-focussed on the topic at hand. Normal navigation adds a handful of keywords that can confuse the signal a bit, but it compensates by helping focus the search engine’s understanding of overall site content and spotlight the most important pages. Mega menus, on the other hand, can add hundreds of keywords that confuse the signal. In information theory, the keywords in the mega menu are “noise” and it make it harder for the search engines to figure out the “signal” (page topic) and therefore figure out relevancy of the page to a given search.
Google is getting better at ignoring navigation and boilerplate content. Some people contend that, therefore, this is not a problem. But Ted Ulle stated in January 2011 that he still believed that a large number of links in the page template is problematic for relevancy. In brief, you are challenging the search engine by adding this much noise to the signal and you have to ask whether or not you really want to depend on the strength of the Google or Bing algorithm to sort out your “semantic chaos” as Ted calls it.
- 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. You can stop passing that equity by using the nofollow attribute on your link, but you can’t preserve the link equity this way. When you add a nofollow attribute to the link, it still leaks equity from the source page, it just doesn’t add it to the target page. So no matter how you cut it, they massive number of links are diluting the link strength of the page and tending to make it harder for the engines to figure out which parts of the site are important.
- 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 a minor issue, but a massive collection of links in the navigation will slow down load times and rendering. Of course, one decent image or a large CSS file will quickly outweigh this, but we do know that load times are or soon will be taken into account in the Google algorithm at least, and we can expect other engines to follow suit.
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.good results with clients by reducing navigation from over 60 links down to 22. By tracking click patterns, Ted and his team found that a single link accounted for 60% of the clicks from the front page and the top ten links accounted for 99% of all clicks. So 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 of course, but buy in will be difficult in any large organization unless you have the data and a strong case. And even then, some doorkeeper with a love of the current layout may block any and all arguments, no matter how reasonable.
- Source-Ordered ContentIt is quite possible to put your menu at the end of your code and get your main page content at the top, but then display the page with the header (and thus the navigation) at the top. This is relatively easy to implement and I used to do it systematically (less so now), but of course, the links are still on your page. So though it mitigates the effects of having all that anchor text and links high on the page, the noise is still there.
- iframe for navigation. I’ve never actually done this, but some people recommend it for boilerplate content in the site footer. The problem with doing this for the navigation is that you’ve entirely removed the navigation as an on-page factor for relevancy and so forth. So yes, you get rid of the noise in the signal, but you also get rid of a lot of the signal and your ability to build link flow throw the site. It seems like a collossally bad idea.
- Use HTML 5 and hope the search engines understand. 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, 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. You still have the fundamental problem that your navigation is a key tool in telling the search engine what your site is about, and by including a massive number of links, you’ve given up your chance to provide signal to help the search engine cut through noise. In other words, at a certain number of links, you’re still adding noise rather than adding signal. So, again, it may mitigate the ill effects of the design, but it still misses out on a great opportunity.
- Lazy Loading. Lazy loading is where delay loading content until the user wants it. So you images that are low on the page, for example, don’t get loaded until the user scrolls down. There are some excellent JQuery lazy loader plugins that let you implement this simply enough. So that would keep it out of the search engines, but the navigation needs to be responsive and readily available to the user, so load on demand seems like a terrible solution in this case.
So in short, it seems like 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. As I mentioned at the outset of this series, in the end, I found great solutions for mega menus in Drupal , but for all the reasons detailed here, have tended to avoid mega menus if possible.