Skip to content

Examples of Website Navigation Best Practices

By Matthew Edgar · Last Updated: December 15, 2023

A website’s navigation serves several important roles: it reflects the entire website structure; it communicates that structure to users search robots and visitors; and it helps people surface information available on the website. Although there are several factors to keep in mind, let’s cover the important website navigation best practices and the areas where mistakes can easily be made.

How Google Uses Website Navigation: Supplementary vs. Main Content

First, it is important to understand how Google uses the website’s navigation. Google discusses two types of content on a website in its Search Quality Rater Guidelines: main content and supplementary content. Main content is any content that helps the page achieve its purpose. Supplementary content supports the main content but does not directly relate to the page’s purpose.

Both types of content are important. The Guidelines even say specifically that supplementary content “is an important part of the user experience.” However, only the main content of the page will be used to determine where to rank the page in search results.

The website’s navigation is not the main part of the page, so it is considered supplementary content. That means Google’s crawlers will not treat the website navigation as if it were the main part of the page. As a result, the navigation will not influence where pages rank in search results.

However, when crawling a website, Google will use the website’s navigation to discover links to other pages and will use the website to understand what types of content the website offers. It is important, therefore, to make sure Google can access your website’s navigation during the crawl. If the navigation is hidden from Google’s view, that would make it harder for Google to discover pages on the website.

Elementive's website with main and supplementary content designated
Example of supplementary and main content. The website’s navigation is part of supplementary content.

Mobile and Desktop Navigation Equivalency

The best practice is to make your mobile and desktop website navigation equivalent. Visitors typically want to find similar types of information on your website regardless of what device type they are using. Google crawls your website primarily from mobile devices and will rely on the mobile website’s navigation to discover links and understand the website.

If your navigation presented on the mobile and desktop versions of your website does not contain the same links, then visitors coming to your website on multiple device types may struggle to use your website. If the navigations don’t match, Google may misunderstand the website and not rank the website correctly.

Maintaining equivalency is not the same thing as having the mobile and desktop navigation exactly match. The layout will naturally differ to accommodate different screen sizes. The ordering of the navigation items may shift slightly given differing visitor needs. What you want to make sure of, though, is that visitors and search robots can find everything on your website using either type of navigation.

If you do not maintain equivalency, you need to make sure both versions of the navigation help visitors and search robots find their way around the website. Yelp provides an interesting example. On the desktop version of the website, Yelp has four links in the header navigation, each with a dropdown menu. For example, the “Restaurants” dropdown contains eight distinct links.

Yelp desktop website with Restaurants navigation dropdown expanded
Yelp – Desktop Navigation – as of December 2023

On the mobile version of the website, Yelp does not have the same type of navigation present. Instead, Yelp shows icons with links for some of the items listed in the desktop website’s navigation menus. These icons are not grouped under a hierarchical structure like they are on the desktop website.

Yelp mobile website
Yelp – Mobile Navigation – as of December 2023

As a result, Yelp’s mobile and desktop websites are not equivalent. Each navigation contains different links and the links are presented in distinct ways, with the hierarchy only presented on desktop devices. Even though the navigation designs are not equivalent, both sets of navigation give visitors and search robots plenty of ways to understand what content is offered on this website and plenty of ways to navigate through the website.

Choosing an Appropriate Word Style for Navigation

One of the first choices to make when considering a website’s navigation is what word style will be used in the navigation. There are many different styles to pick from, but the most common styles you’ll find around the web are oriented around actions, audiences, and concepts. Each style has its merits and is appropriate in certain circumstances, though no style is universally correct. Let’s look at examples of each—while I’m going to focus on header navigation, keep in mind the wording style is important for all types of navigation, including sidebar, footer, breadcrumb, and in-text links.

Action-Oriented Navigation

An action-oriented navigation link tells users what they can do if they click the link. BlueCross BlueShield provides a good example of this with links to “Access My Benefits”, “Shop for Insurance”, or “Find a Doctor”.

best practices website navigation for bluecross blueshield
BlueCross BlueShield Navigation – current as of December 2023

There rarely is confusion among users when considering this style of navigation. If I want to find a doctor, then I click “find a doctor” because that’s the page that will help me in my search. This also helps Google know what people can do on this website and helps the website appear in the correct types of search results.

The problem with this style of navigation is that the actions specified are too obscure or that the page you arrive on doesn’t match the expected action. For example, if “find a doctor” didn’t help me find a doctor, that would create a terrible user experience. Avoid this problem by keeping the actions clear and making sure the page linked to helps you complete that action, as is the case on BlueCross Blue Shield’s website.

Audience-Oriented Navigation

Audience-oriented navigations describe different kinds of users. Anthem’s website provides two sets of navigation. The upper navigation, in the blue bar above the logo, has links “For Employers”, “For Producers”, and “For Providers”. With this style of navigation, visitors may not know exactly what they will find or what they can do in each section, but so long as a user can determine what audience they fit into, then the user will know which link to click. Google will also understand what types of people need to see this website in search results.

Anthem’s desktop navigation – current as of December 2023

You need to be very clear in using this type of navigation. It is one thing for an insurance company to use it, where the distinction between audiences is well understood. But if people visiting your website aren’t as clear on what group they fall into this can confuse users.

There is also a concern that users will be afraid they are missing out on important content—you are telling employes one thing, but are you telling providers or producers something else? This is a key thought to keep in mind to ensure you’re following website navigation best practices.

Upwork uses audience-based navigation but does this in a slightly different way to avoid these problems. Upwork could call out the name of the audience in the navigation, such as “Employer” and “Freelancer”. However, that could leave people wondering what Employers see that Freelancers do not. That type of wording may also leave people confused about what they’ll be able to do if they click “Employer” or “Freelancer”. Instead, Upwork provides actions for each audience type. That way, people are clear about where to click and not worried about what they might be missing.

Upwork’s navigation, as of December 2023

Concept-Oriented Navigation

Concept-oriented navigation groups pages around different themes or topics. In the case of WebMD’s main navigation, those topics are “Conditions”, “Drugs and Supplements” and “Well-Being”. Each topic includes a dropdown menu where visitors (and search robots) can find additional links.

WebMD Desktop Navigation, as of December 2023

This navigation does not explain what I can do or who the content is for. In the case of WebMD, though, the navigation doesn’t need to explain either of those things. Other content on the website makes it clear who WebMD’s audience is and makes it clear this in an informational website. The only task for the navigation is to help communicate the breadth of topics covered.

Use Clear & Specific Language That Matches How People Talk

The text in the navigation needs to be written plainly and simply, using words people will quickly understand. For your website, think about what tasks people are coming to your website to complete (or, better than thinking through it, interview actual people who visit your website as part of usability testing). Although there are plenty of corner cases, there are common tasks a large majority of visitors wish to complete easily and those common tasks are the ones your website’s navigation must support.

Once you have that list of tasks, think about the words people might use when describing those tasks. The more your navigation reflects these words, the easier it will be for people to find their way around your website. This is because simplifying the text and matching people’s language reduces the amount of brain power (or cognitive load) required to use the navigation. As a bonus, matching how people talk will almost always match what people type into Google as well (and, hint, you can research organic keyword usage to find what words would make the most sense to use in your navigation).

Bank of America does an effective job of this. A common task people would want to complete on a banking website is researching checking accounts. If I want to open a checking account, it is clear where I need to click in the navigation without much thought involved. The text is clear and specific. And the text matches how real people would describe the thing they are looking for—in this case, people would quite commonly say “I want to open a checking account.”

Bank of America – desktop navigation – as of December 2023

In contrast, 1stBank makes it harder to locate information about checking accounts with language that isn’t as clear and language that doesn’t match how people would talk. Let’s take the same example of somebody looking for a checking account—where do you click? The top navigation lists “Products”. After a little thought, it seems reasonable that is where checking should be located. After hovering over “Products”, the word “Checking” still doesn’t appear though. So a visitor would have to think through it a bit more since the words listed don’t represent how people would describe the task they are trying to complete. Instead of finding a link to “Checking”, a user would have to click to “Personal Accounts” and hopefully could find information about checking accounts there.

1st Bank website navigation best practices
1st Bank Navigation Website – August 1, 2019

This isn’t a difference in style—“Personal Accounts” and “Checking” are both concept-oriented navigation terms—but one concept more closely matches how real people discuss these topics and how people search for these topics. Data from Google Trends shows a clear difference between these two terms.

Google Trends data showing difference between checking and personal

Track Navigation Usage

Finally, not enough companies take the time to measure their navigation usage. When it comes to navigation, you want to make sure each page included in the navigation still should be in the navigation. If pages aren’t getting clicked on that might mean pages no longer represent things people are interested in finding. So, those pages should be removed from the navigation.

Navigation tracking can be setup using a custom event in GA4 through Google Tag Manager. To begin, add a trigger in Google Tag Manager to detect any clicks on your website’s navigation. In the case of my website, my navigation is in a <nav> tag in the <header>. So, my trigger tracks clicks on any <a> tags within the <header> <nav> tag. This trigger will differ for your website. Explore your website’s HTML code to find out how to track navigation clicks on your website.

Google Tag Manager Trigger

Next, add a new tag for header nav clicks based on this trigger. This is a GA4 event tag. Two parameters are setup for this event to track what link was clicked and what text was clicked. These rely on built-in variables. The “link_text” parameter uses the “Click Text” variable and the “link_url” parameter uses the “Click URL” variable. Be sure to add these parameters as custom dimensions in GA4.

Google Tag Manager - GA4 Event for Header Nav Clicks

I’ve been reviewing other companies, so for this final example, I’ll review my website’s header navigation. My website uses a very simple, concept-based navigation. Data from the GA4 event is included in the table below. I can take this data one step further by reviewing engagement or conversion data for visitors who use the navigation. That would help me understand if people are finding what they want to find after clicking on navigation clicks. I could also segment these clicks for mobile and desktop visitors to see how visitors on both devices are using the navigation.

MatthewEdgar.net website navigation.
Header Navigation LinkClicks
Logo (Home)136
About42
Books42
Technical SEO Resources124
Contact30

Website Navigation Best Practices Recap

  • Use an appropriate word style for your navigation links given what people are expecting and given the nature of the content being linked to.
  • Use clear & specific language that matches how people describe the things they are looking for when visiting your website.
  • The mobile and desktop versions of your website should contain matching navigation unless you have compelling data to indicate they shouldn’t match.
  • Finally, make sure to track navigation usage to understand how people are using your website’s navigation.

Need Help?

If you need help optimizing your website’s navigation or making sure Google is correctly understanding your website’s navigation, please contact me today.

Or, if you’d like more help optimizing your website’s navigation and other aspects of your website’s user experience, check out my book, Elements of a Successful Website.

You may also like

How to Use a Headless Browser

Learn what a headless browser is, why you should use a headless browser and how to launch a headless browser on your own computer.

Handling Out of Stock & Removed Product Pages

How do you remove products from your website without harming your users or SEO performance—or at least minimize the harm? In this post, Matthew walks through the different options available.

How to Check HTTP Response Status Codes

Every page on every website returns an HTTP response status code. How do you check the status code for your website’s pages? What tools can you use to test status codes? What do the status codes mean?