Why Your Mega Menu Might be Killing Your SEO

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

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 Labels

In an effort to assist in making your site more accessible to those with disabilities, we recommend you begin using WAI-ARIA labels. When used along with the proper HTML5 element tags, they can add a layer of distinction to sections for screen readers. With this specific issue, we suggest implementing aria-label="[description]" along with your HTML5 nav tag. It would look like this: <nav aria-label="Primary"> if this were the primary navigation for the page. If your footer uses another <nav tag, you might label that <nav aria-label="Secondary">. Do not add the word “navigation” as a screen reader will announce Primary navigation when it encounters the <nav> landmark.

3 – Visually First but Markup Last

You could also try using some CSS 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. We don’t love this idea, as 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 risk.

This would also be confusing for a keyboard user, potentially, who sees the navigation at the top but will not be able to use the tab key to get into it until the tab through the entire page. Procees with caution.

4 – Use JavaScript to Load Menu Content Asynchronously

A better 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.

The caveat here is that most crawlers also parse JavaScript, so this might not actually help search ranking.

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.