SEO

How to Structure Your Site’s Navigation for SEO and UX

Caleb Cosper

It struck me recently that while we <em>frequently</em> advise our clients and partners on the SEO potential held in their site’s global navigation, how to structure site nav for SEO and UX benefit is something a lot of marketers don’t immediately consider. And that’s a problem.

My hope after you read this post is that you’ll understand:

  • Why descriptive naming in your nav matters
  • The SEO impact of different navigation structures from simple single-bars to sleek flyout navigation
  • How to balance design with search engine-friendly layout

As somebody who usually blurts out “video games” when asked about favorite hobbies (yes, it’s true, Portent does hire a bunch of nerds), I spend a lot of my leisure time navigating through menus. Anyone who’s had to wrestle with a game just to achieve a simple setup task knows how negatively a menu can impact overall user experience. “Why do I have to go through a six-button sequence just to get to my potions?!”  If that sounds like your company website, this post is for you.

Skyrim inventory showing Treasure Map

I’m lookin’ at you, Skyrim. (Screenshot courtesy Gamepedia)

 

Why Does Site Navigation Matter so Much for SEO?

A website’s global navigation holds what are arguably the most important links on the site. For user experience, the global nav links tell a visitor or prospect which pages you consider the most important on your site. It gives them an easy way to get to those pages and sets the tone for what they’ll find throughout.

For SEO, the global nav links tell search engine crawlers which pages you consider the most important on your site, and gives them an easy way to get to those pages. If you want a little more background on this, read the longer post about smart internal linking for SEO.

But there are countless ways to structure a site’s global navigation.  So which one is the best?

If you’ve read any blog posts about SEO in the past, you should know better than to ask that pesky “best” question, but we’ll take a look at some common nav choices and discuss their pros and cons. But first…

For the Love of the Internet: Be Descriptive

If you were so inclined, you could stop reading right here, and improve your site right away.

You might have the most beautifully and intuitively designed global navigation that has ever graced the internet, but if your nav items consist of only “Products”, “Solutions”, “Resources”, and “About”, you might as well have built your navigation in Macromedia Flash.

<blockquote>Write your navigation links descriptively if SEO is important to your digital strategy. </blockquote>

If your site is all about building model trains, it’d be much better to have “Model Train Parts” than “Products”. Another example: if I were reading a blog post on an unfamiliar site that I’d found through search, and one of your global nav items is “Enterprise”, would I understand what your website is about?  Or who it’s for beyond just “Enterprises”?

For more about this idea, read this post about The Blank Sheet of Paper Test.

This is first and foremost about helping users find the right content and making their experience on your site as positive and effective as possible. As an added bonus:

<blockquote>Using descriptive anchor text in your global navigation means that every page on your website has keyword-rich links pointing to those pages. </blockquote>

Different Types of Global Site Navigation

Single-Bar Navigation

The simplest, while not necessarily most common, global nav design is the single, plain bar. This bar has all navigation links in one row and is usually limited to around 10 links.

Screenshot of Moz.com global navigation
Our friends down the street at Moz  use a single-bar nav menu. In this case it’s fine that they use “Products” since they’re a very well-known, well-understood brand. Also, check out that great, descriptive “Free SEO Tools”!

 

If you’re thinking in purely SEO terms (don’t), this is <em>the</em> ideal navigation. The links are immediately visible to search engine crawlers, there’s no worry of them getting buried in a poorly coded dropdown structure, and there’s a nice, small number of them.

Pros

  • Links are easily crawled by search engines
  • Important pages are clearly outlined to users
  • No risk of diluting link authority  with too many links

Cons

  • VERY limited in the number of links you can use (realistically only viable for small sites, or sites with a small number of important pages)

Double-Bar Navigation

This is only slightly more complex than the single navigation bar. Instead of one bar, you use two. Some might refer to this as the primary and secondary navigation, but for the purposes of this post, I’ll count them as one global navigation.

Screenshot of STAT global navigation
Another from a friend in the industry: STAT uses the double-bar navigation with no dropdowns.

Screenshot of Portent global navigation with dropdown
I might be partial, but I think the Portent double-bar menu is quite elegant. This is before you scroll down.

Screenshot of Portent menu without dropdown
And this is after. The second bar disappears and “Services” appears.

This is a pretty good “best of both worlds” solution. Using two global navigation bars gives you twice the space for links or more, depending on how you style the second bar. And, same as the single-bar solution, you don’t have to worry about a lazy developer (just kidding, I love you all, devs) coding a dropdown incorrectly, making it invisible to crawlers.

Let me restate that because it’s important:  

<blockquote>Yes, you can accidentally make your navigation invisible to search engines by coding a navigation dropdown incorrectly. </blockquote>

But back to double-bar navigation.

Pros

  • Links are easily crawled by search engines
  • Important pages are clearly outlined to users
  • Low risk of diluting link authority with too many links

Cons

  • Design can appear cluttered if done improperly
  • Lack of dropdowns prevents grouping of topics

Dropdown Navigation

A dropdown menu is designed so that when a user hovers over (or, in some cases, clicks) a nav item, a secondary list of links drops down. Dropdown menus are probably the most common way to structure a site’s main navigation.

Screenshot of Seller Labs global navigation with dropdown
Seller Labs, a Portent client, makes good use of the single-bar dropdown menu.

Screenshot of 1st dropdown on Buddy
Buddy, another Portent client, pulls off the rare double-bar dropdown.
Screenshot of 2nd dropdown on Buddy
If you try this on your site, make sure the top dropdowns retract properly to get out of the way.

 

For a lot of bigger sites, this is the only way you can possibly link to all the important pages without overwhelming a user with choices. However, as I’ve alluded to already, if you go this route, you introduce the risk of hiding all of these great, descriptive, sitewide links from search engines.

For instance, some crawlers (not Googlebot!) may run into issues trying to get to your dropdown links if they’re coded in JavaScript. In other cases, users may not know to expand the dropdown with a hover, or they may simply not be able to if they’re using a tablet or other wide-display touchscreen device.

Pros

  • Provides room for dozens of links
  • Related pages can be grouped together
  • Design is less cluttered when dropdowns are retracted

Cons

  • Crawlers may have trouble finding links in dropdowns
  • Poorly done dropdowns make for bad user experience
  • Hover doesn’t work for touchscreen users
  • Link authority may be diluted with too many links

Dropdown Navigation with Flyouts

This is the most complex menu structure, and it’s the easiest to mess up. Flyout navigation menus are just like dropdowns, except that a tertiary set of links flies out when you hover over one of the links in the dropdown.

Screenshot of Amazon flyout menu
Can you imagine Amazon.com without the flyout menu items?

Flyout menus have many of the same benefits and downsides as do plain dropdowns.

It’s about equally as easy for links to be hidden from crawlers by JavaScript with a flyout vs a dropdown, but it’s even easier for users to run into a frustrating experience. To paint a picture, how many times have <em>you</em> hovered over a flyout and moved your cursor just the wrong way only to watch the entire menu retract?

If your flyout menu feels like a maze game you have to win with pixel-perfect cursor moves, maybe you should rethink either structure or design.

Pros

  • Provides room for dozens or hundreds of links
  • Related pages can be grouped together
  • Design is less cluttered when dropdowns and flyouts are retracted

Cons

  • Flyouts are difficult to do well and can create terrible user experience
  • Too many links can overwhelm users and dilute link authority
  • Crawlers may have trouble finding links in dropdowns and flyouts
  • Hover doesn’t work for touchscreen users

A Footnote About Footer Menus

If you’ve been reading this post thinking “But wait!” (index finger in the air), “I’ll put those extra links in the footer.”

<em>No, you can’t just stuff links to the other 100 pages you want to link to on every page of your site in the footer.</em> There’s plenty of evidence that Google devalues links in the footer, and your users aren’t going to be looking there unless they’re weirdos who like reading privacy policies. A footer menu (if you choose to use one at all) is where you can link to less important pages or provide easier-to-read links to pages you’ve linked to in your main navigation.

The Best Global Site Navigation Design is Whatever’s Best for User Experience

Maybe I’m erring on the side of oversimplification, but these days the tenet “what’s good for UX is good for SEO” can be applied to a lot of “what’s best” questions. Not to mention it prevents me from having to give a Holy-Grail answer.

Bottom line: craft a great user experience that doesn’t ignore the many technical considerations which can torpedo your SEO.  Your visitors, both human and machine, will thank you.

And since it’s 2018, I’m all-but contractually obligated to provide a TL;DR.

  • If you have a tight handful of important site destinations, use single-bar navigation.
  • If you need more room for links than a single bar and don’t need to group pages in multiple categories, use double-bar navigation.
  • If you need far more room for links, use dropdown navigation.*
  • If you need room for dozens of links with nested categories (usually an e-commerce site), use dropdown navigation with flyouts.*

*Only if you have a savvy developer who can make it work for users and crawlers, ideally with some professional SEO oversight.

And let me head off the pitchforks and torches before they come out: there are <strong>plenty</em> of variations on these menu styles that we could discuss, as well as many different names for the structures we did cover.

If you vehemently disagree with any of this, let me know in the comments. Oh, and if anybody can get me in touch with Bethesda Game Studios, I’ve got some thoughts on how to make the next Elder Scrolls’ inventory menu better.

Caleb Cosper

Caleb Cosper

SEO Strategist
SEO Strategist

Caleb is an SEO Strategist working for Portent, Inc. in Seattle, WA. He earned a bachelor’s degree in zoology from the University of Oklahoma (Boomer!) and has turned his passion for all things data-driven and scientific into passion for SEO. Outside of Portent, his life consists of games (video and board), food (at-home and in-restaurant), and craft beer (any and all).

Start call to action

See how Portent can help you own your piece of the web.

End call to action
0

Comments

    1. Thank you, Akash! It’s exciting that SEO is more and more about providing a good user experience after someone arrives on a page.

  1. DIG this “dig!” –
    “You might have the most beautifully and intuitively designed global navigation that has ever graced the internet, but if your nav items consist of only “Products”, “Solutions”, “Resources”, and “About”, you might as well have built your navigation in Macromedia Flash.”
    It deserves a pullout quote!

    1. Thanks Jennifer! I figured people would appreciate the “Macromedia” Flash reference (those of us old enough to remember the pre-Adobe days, at least).
      Ultimately, if some readers’ only takeaway is to make navigation links descriptive, then I’d call this post a success.

  2. Good insights Caleb. Websites often default to those generic products/services descriptions but being more specific is a great way to improve the user experience.

    1. Thanks, Patrick! If only I could run around the internet and force sites to change their undescriptive nav links…

  3. “If your flyout menu feels like a maze game you have to win with pixel-perfect cursor moves, maybe you should rethink either structure or design.”
    Um, but Caleb, your BIO say’s you’re a gamer! LOL
    Nice article Caleb. Hope you’re eating lots of seafood!
    Your former partner in crime from BW,
    Stephen D.

Comments are closed.

Close Mobile Menu Button
Close search overlay