Why Your Mega Menu Might be Killing Your SEO

Mega Menu is an SEO Don't

You have a content-heavy site and you want visitors to access that content quickly and easily, but is the go-to mega menu approach secretly sabotaging your SEO? It might be.

In recent years, design and UX trends have leaned toward simplifying navigation structure in an effort to make websites easier to navigate across all devices, particularly mobile. Personally, I am not a fan of the mega menu solution (that’s a blog post for another day), but it’s not necessarily wrong to use the approach. The problem is, if you don’t pay close attention to how you structure the HTML markup, you could actually be doing damage to your site’s SEO.

Mega Menus Could Cause Hidden Duplicate Content

I’ll use the example of an issue we recently ran into for a client. While using one of our magical SEO tools to crawl their site, we noticed a very strange result. It told us they had a pretty major duplicate content issue. And so we began by checking all the typical culprits: lack of canonical tags, categories without friendly URLs, posts tagged with multiple categories, and content loading on both the HTTP and HTTPS protocols. But, none of these things were issues on the site. So, what could be the problem?

Strangely enough, as I was viewing the page source on a few pages to verify that canonical tags were being used properly, I began noticing a common thread: the markup for the site navigation was HUGE! In fact, it was over 1,300 lines of code and the average page was only around 1,800 lines of code. That got me thinking, if the first 1,300 lines of code are identical on every single page of the website, could a search engine possibly consider those pages duplicates of one another?

I’ll let you decide for yourself. Here’s Google’s official definition of duplicate content: “Duplicate content generally refers to substantive blocks of content within or across domains that either completely match other content or are appreciably similar.” Seems pretty clear to me that Google would consider the 1,300 lines of markup generated by this mega menu as duplicate content. In this case, what options do you have to remedy the problem?

Addressing the Mega Menu Duplicate Content Conundrum

screenshot of duplicate content warning

Our research didn’t reveal any specific recommendations on how to resolve the duplicate content issue. Plus, Google doesn’t exactly tell you if they’ve detected duplicate content on your site, so it’s very difficult to know whether you truly have a problem or have fixed the issue. We decided to enlist our engineering team to come up with some viable solutions. Here are their five suggested ways to address the duplicate content conundrum.

1 – HTML5 Nav Tags

With the release of HTML5 we can now use markup to distinguish certain areas of the page markup as being a <header>, <footer>, or even <nav>. By implementing these tags we can indicate to crawlers that certain areas of the page markup are repeated or shared elements throughout the site and not an actual part of the unique page content.

2 – ARIA Roles

In an effort to assist in making your site more accessible to those with disabilities, we recommend you begin using WAI-ARIA roles. They are very similar to HTML5 tags in describing the purpose of certain sections of markup to browsers and screen readers. For this specific issue, we suggest implementing role=”navigation” along with your HTML5 nav tag. It would look like this: <nav role=”navigation”></nav>. These tags are now supported by most browsers and even if they are present in a browser that does not support them, they are harmless.

3 – Position the Markup After the Body Content

You could also try using some CSS3 and JavaScript trickery to place your navigation at the end of the page markup while still absolutely positioning it at the top of the page. Our only concern with this approach is that you would still have the same large chunk of duplicate content, however, it’s not the first thing that crawlers would see on every page and thus might help reduce your risk.

4 – Use JavaScript to Load Menu Content Asynchronously

Another way of solving this through code would be to use JavaScript to load your sub-menu content asynchronously. This way, all of your sub-menu content is not actually rendered into the markup every time you load the page. In fact, it will only load certain sub-menus as you attempt to access them via on-click or on-hover actions.

5 – Don’t Have a Mega Menu

As mentioned earlier, many sites are trending in this direction because large cumbersome menus are challenging to navigate on mobile devices. As an alternative to using large mega menus, consider streamlining your information architecture and using section-based sub-navigations to allow users to further refine their searches once inside your website.

The Takeaway

Having a mega menu on your site doesn’t necessarily mean you have a duplicate content issue, but you might. While there doesn’t appear to be one definitive solution to the problem, we recommend you start by using HTML5 nav tags and ARIA roles. It’s good practice, it’s optimal for web accessibility—and it just might help your website’s SEO.

For more SEO strategies and secrets, reach out to our Director of Strategy Matthew O’Bryant.