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.
- Lazy Loading. Lazy loading is where you delay loading content. This is a crazy solution, but I had to do this for a client who was not willing to change anything about the website, but was looking at over 10 seconds of white screen while waiting for the mega menu and its Javascript to load (yes, it was insane). In that case, we hid the menu and showed just a clone of the top-level nav until all the resources needed to load the mega-menu were available, and then we traded out the simple menu for the mega menu. From the site visitor point of view, it made the page look fast (full visual render in 2.5 seconds) even though it still took 11-13 seconds on a fairly fast connection before the menu was fully interactive. That’s what happens when non-technical vice-presidents get to decide how many links and what Javascript frameworks will make up the mega menu (true story).
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.
I’ve visited several pages where people criticize mega-menus from an SEO standpoint. I don’t find the criticisms convincing.
Yes, if you implement mega-menus poorly, it’s a bad idea. If you implement anything badly, it’s a poor idea.
My thoughts: Use some graphics and text in the drop-downs: Don’t just have a list of 4,000 links – that’s bad for bots and bad for people. If you have a top nav bar with widgets as a item, include some text in the drop-down to explain what widgets are. Help the visitor to select which of the limited number of links are provided by the drop down. Maybe offer thumb-nail graphic links of the different widgets.
There are fixes for iPads. Use them. iPads challenge all web developers; we are stuck with them, and we’ll just have to accomodate.
Thanks for your thoughts Karl.
That’s certainly true. Without cars, we don’t have high-speed crashes on the highway, but that doesn’t mean the car is an inherently bad tool, just one that needs to be used properly.
That’s more or less how I feel about Mega Menus and I see most implementations done poorly and few done well. I agree that with proper implementation, Mega Menus can be a decent tool, but I guess I see them used most often because ten departments all think they need 3-5 links each in the navigation and there’s no navigation czar on the team who gets to enforce an intelligent information architecture. So the designer says, “No worries, you can all have your links” and poof! A worst-practices Mega Menu, but it still looks nice, so everyone is happy.
And as for the iPad issue, I emphatically agree that the fact that something currently might have a few issues on this platform or that one is not a reason to take it off the table.
Thanks, Tom,
Actually, all of the jquery (or similar technology) sliders and menus seem to enhance SEO if done right.
Search engines have always loved mountains of text (a 10-page text-only essay is great for long-tail SEO). People tend to enjoy a cleaner design centered on graphics, and free of scrolling. Mega menus (especially if you don’t simply think of it as a pure menu, but as a sort-of AJAX way of offering a mini-page on a subject) let you include far more text on a page and keep the clean layout centered on pretty pictures.
Hey thanks so much for stopping back in Karl with the additional thoughts.
[As an aside to this discussion. I love your company name – Sastrugi Marketing. I’ve always loved the word and it marks you as a kindred (I skied at least once every month in 2011)].
I think we basically agree, but in different language. At the risk of putting words in your mouth, I’m reading you to say that the Mega Menu as a design element is fine, but implementations that go hog wild with the number of links are the problem. Is that fair?
I can definitely see that and I can imagine very effective menus designed using the space effectively while still keeping the number of links reasonable (albeit some of the usability problems of very large menus will not go away no matter what).
Just curious on a technical point. When you say JQuery menus and sliders, do you mean AJAX or non-AJAX implementations? In other words, most JQuery menus (and to a lesser extent sliders) load everything and then use JQuery to hide it, so from an SE perspective, that text is all still there. It’s just a design enhancement.
Only a small number of the implementations I’ve seen use JQuery to do lazy loading, which is to say only top-level menu items are loaded on first request, and the requests for the rest are sent only when triggered by the user (on hover for example). So the second-level menus available to the user are actually not there until the event is fired (and so unavailable to the SEs). Only when the trigger is pulled, say by a hover even, does the AJAX or JSON request go through to load the additional data. That can create usability problems since the menus will have significant delay on a high-latency or a slow connection, but it does get rid of the SEO problem (though not the usability issue) with large numbers of links.
The search engines love mountains of text, but keeping the text on any given page on-target helps with relevancy. Again, this is going to be a design and information architecture question, but I think that Mega Menus tend to include a fair bit of information that is off-target with respect to the content of the current page. The broader the website, the more likely that is to be true. So the large amount of text in the Mega Menu can be confusing the signal sent by that 10-page text-only essay.
Thoughts on that? Agree or disagree (I’m not proud, so don’t feel a need to be polite about it either — feel free to push the BS button if you are so moved!)
“I skied at least once every month in 2011”
The background to my site is a picture I took on Labor Day 2011 Timberline. Summer skiing is the best skiing!
“Mega Menu as a design element is fine, but implementations that go hog wild with the number of links are the problem. Is that fair?”
Exactly. We agree completely. Some non-Mega Menu sites have too many links. Mega Menus simply tempt the ill-disciplined. For most people, a liquor store is a fine business to own. For an alcoholic, not a good plan. Can’t stick to the outline? Don’t Mega Menu!
“AJAX or non-AJAX implementations”
Non-AJAX. As an SEO guy: “from an SE perspective, that text is all still there” matters to me.
“That can create usability problems since the menus will have significant delay on a high-latency or a slow connection”
If the drop-down stuff is properly compressed (and don’t load up your drop-down with large items), I’d recommend normal loading. Then you have that great AJAX feel – new information smoothly in milliseconds, instead of the “1/2 second for the first byte” clunky feel of loading a new page. Without the AJAX SEO challenges.
A concern I would have with slow loading drop down elements is user expectations. Most people assume a new page will take time to load. But, they expect drop down content to load instantly.
The text is just like the links: It’s not the fault of the mega drop-down menu; the content creator/web developer/SEO folks should keep the whole page on track and pointed at a limited number of topics/keywords. Regardless of the technology employed!
The best SEO work I ever did was a 3,000 word (more or less)history of competition in the very, very narrow industry I was working in. The page ranked #1 for many of our competitors names in addition to thousands of long tail search terms! Additionally, it was #2-10 for many more popular search terms. It worked because it stayed completely true to a very specific topic for all 3,000 words.
@Karl Kelman
Is that website online?
I would very like to see it 😛
I had long suspected that the menu system on my website was hindering my SEO efforts. The main menu had links to around 120 of the sites 130 pages and was producing over 200 lines of code before the sites main content. I initially looked for a solution to try and move the menu code below the main page content. While I know this can be done, my limited coding experience and lack of finding a quick fix via Google meant kicking this option into the long grass. I then found your post and it was exactly the information I was looking for. I’m now in the process of pruning the main menu, currently down from 120 links to 53 links and counting. The already makes use of breadcrumbs to assist navigation and other nav methods so the use experience shouldn’t be affected.
Many thanks for your post
John
Hi John,
Thanks for the comment. I would say that since I wrote that Google has started looking at web pages through a headless browser so non-visible items are devalued relative to the situation some years ago. But still, the fundamental point remains – when you link to every page in your nav you are telling users and Google all pages are similarly important (though as I say the visual aspect now makes Google closer to a user and further from a simple keyword and link parser).
So think of the nav as a way to highlight your most important stuff… And this blog is currently a HORRIDLY example. The current nav was in a fit of pique when I saw one too many “How to have a successful blog” articles and I thought “I don’t want my blog to be limited to what I think will be successful, I want to put whatever I want here whether fiction or SEO.” So I purposely made the nav… difficult or perhaps just a bit odd. I might make it more clear some day. Or not
Anyway, I’d love it if you stopped back to say how it goes.
Hi Tom,
Thanks for your reply, I’ll go through the site and as you mentioned hightlight the most important stuff and optimize the nav accordingly. It’s been good to read your blog post it’s definitely focused the mind on what Google and visitors are looking for.
First time i’ve been to your site and only just realized it’s not all about websites and seo, looks a good read 🙂
I’ll update you if I see any serps improvements after making changes to the nav.
Cheers
John
Ha! As far as this blog goes it’s whatever pops into my head at a moment when I have a few free minutes to write it down. I’m quite sure most of it is garbage but hey I’m not forcing anyone to read it!
Not at all, not admitting to being a nerdy type but the blog ‘Limiting Daily Bandwidth on a Home Network with Gargoyle’ was a good read!
There’s also some great information that’ll help me improve the on-site seo and find more backlinks. Searching for good backlinks to affiliate based sites is like looking for the proverbial needle in a haystack so I’m grateful for any useful hints and tips.
Cheers
John