Website menu. Best practices for SEO

Excellent site navigation is a very important element for two reasons. The first is its impact on user experience – it helps users find what they are looking for, and this translates into more conversions.

Secondly, it is helpful for search engines. Good navigation makes it easier to understand how you have organised your content and to ensure the flow of PageRank to the most valuable pages.

What is website navigation?

Website navigation is a system of tools and features designed to help users find information and move around a site smoothly. It includes menus, links and search bars that are important for improving the user experience. These elements provide easy access to different sections and content.

There are standard elements that improve user-friendly navigation. Here are some of them:

• breadcrumbs,
• sidebars,
• mega menu,
• drop-down menu,
• tabs,
• accordion menu. 

1. 01Tool systemMakes it easier to find content
2. 02Improved experienceSmooth navigation
3. 03Key elementsMenus, links, search

It provides easy access and an intuitive path, including elements such as breadcrumbs or mega menus.

How do people move around websites?

Before we look at navigation elements and how they help users move around websites, it is important to understand how users use sites.

There are three basic types of navigation shown below.

Forward navigation

This type of navigation helps users dig into a site hierarchy, usually in order to find more specific content within a given topic area.

This means that a user can go deeper, starting from a broader topic such as documents, to more specific subtopics such as payments and withdrawals.

1. 01Horizontal menuHeader or footer
2. 02List of linksTopic-based organisation
3. 03Drop-down menuHidden content on click

The key is a simple and clear organisation of links for the user.

Side navigation

Secondly, there is side navigation. It helps users discover content related to what they are currently viewing. However, this content is not a subtopic.

Back navigation

There is also back navigation. This type of action helps users return to the previous page or step in a process.

1. 01Broad topicComplex area, many aspects
2. 02Many nuancesEvery element matters
3. 03Knowledge and experienceYour key foundations
4. 04Informed decisionsOptimal choice of elements
5. 05Effective navigationThe user at the centre

Your knowledge and experience are key to sound decisions and effective navigation.

Popular website navigation styles

When you create your own site, you think about its navigation elements and menu layouts. Here are a few types of site menus worth considering:

Navigation menu

Let’s start with a simple navigation element – the menu.

You can see the site’s navigation menu in different areas. It is usually horizontal and located in the header (sometimes it is called the site menu bar). In addition, it can be placed horizontally in the footer or in sidebars.

Sometimes the appearance of such a menu may change. However, the concept remains the same – it is a list of links arranged vertically or horizontally, often organised by topic.

Drop-down menu

A key element of a dropdown menu is that it is hidden. It is displayed when a user hovers over a specific element or clicks it (e.g. the navigation bar in the header).

Dropdown navigation is usually very simple and contains a single, vertical list of links.

Mega menu

The term mega menu refers to a more complex dropdown menu. Both menus are displayed in the same way (by hovering the cursor over them or clicking). The main difference lies in the amount of content/links included.

Mega menus are better for websites than simple dropdown menus. Here are the arguments in favour of these solutions:

• in a mega menu on your site, you can place more links,
• you can group related links more easily,
• you can place photos and illustrations.

Hamburger menu

A hamburger menu (or mobile menu) is similar to a dropdown menu, but sites hide it under an icon that looks like a hamburger (hence the name).

This type of navigation is often found on mobile sites. However, it is also appearing increasingly often on desktop sites.

Such hidden menus should not be used as the primary navigation method for users. Hidden navigation is harder to discover, so by default it should be visible if it is important.

Tab-based navigation

Tab-based navigation replaces content when the user chooses to browse a subset of information.

Sometimes websites have tabbed navigation in a mega menu, and the content appears when you hover over the relevant element.

Accordion-based navigation

Accordions are similar to tabs, but there are two key differences:

• there is an option not to display content,
• it is optionally possible to open several accordions at once.

Tabs and accordions can be a challenge in the case of JavaScript SEO. If you want the content to rank, the HTML source should include the content rather than relying on JavaScript to load it on click.

Faceted navigation

Faceted navigation (also known as filtered navigation) allows users to choose different filters to see subsets of information on the site. Filtered navigation is quite often used in online stores.

Anchor-based navigation

Anchor links are a navigation element that helps users jump to a specific part of a long page. They are usually used on websites and blogs with long articles.

Hierarchical navigation

Hierarchical website navigation helps users move forwards and backwards through the site hierarchy. In practice, this can usually be seen in breadcrumb navigation, where the current page is shown to the user.

Hierarchical navigation can also be observed in the form of links in the sidebar.

Related navigation

Related navigation allows you to move sideways in the hierarchy, to other related pages (sometimes called sibling pages). Here are a few methods used by websites to implement this kind of navigation:

• pages with the same taxonomy – for example, if two products in an online store were in the TV 4K category, they will be displayed as related products,
• pages with the same parent page – for example, if the TV 4K category and the TV 1080p category have the parent category “TV sets”, links connecting these pages will be added,
• pages with similar content – sometimes related navigation is created based on the site’s content index, and then links are automatically added between pages depending on content similarity, 
• products that are often bought together.

You can manually add such types of links. However, it is best to automate this process to reduce the burden on administrators.

Pagination-based navigation

Websites use pagination to show a subset of content on a page. In the past, it was used on sites with links to other pages or in Google search results.

Numbered pagination is no longer used. Instead, buttons appear, such as for example “read more”.

SEO best practices related to navigation

Once you know how people move around websites and you are familiar with common navigation elements, it is time to move on to navigation best practices that will be positively received by users and search engines.

Planning navigation using a sitemap

When creating a website, it is worth thinking a little ahead. Determine which functions and pages your site needs and what their hierarchy should be. Do you need an “About us” page, a blog or a frequently asked questions (FAQ) section? Which of these pages are most important or most valuable to users?

To develop such a hierarchy, a common practice is to create a sitemap. The sitemap should include a list of all the main elements of your user interface and the subordinate categories that form part of them. This will form the basis of your navigation menu, so this practice will help identify which pages are most important to users.

To create such a map, you can use whichever method is most convenient for you. Write it down manually, present it in the form of a diagram or enter it into a spreadsheet.

Creating a hierarchical site navigation

So you have a list of your pages. They need to be grouped to create an information architecture/hierarchy.

At the outset, you should group them into a few broader page types, such as top-level product categories, articles, company information and other pages that fit your site. They show what types of content you have.

Next, you should create a page hierarchy within a given page type. Hierarchies become more specific as you go deeper into them. In the case of an online store selling clothing, it might look something like this:

Home page > Men’s clothing > Footwear > Shoes > Black shoes

Home page > Blog > Trends > Winter clothing trends 2022

Card sorting is a valuable technique for understanding how different people organise content. Sometimes it is not clear. There are many ways to organise a website.

It can also be useful to check what is happening on competitors’ websites. By checking the breadcrumb navigation and other navigational elements, you can understand how even large, complex sites organise information.

One way to understand a site structure is to examine the URL structure. To do this, you can use various free and paid tools available online.

Creating navigational elements within the hierarchy

Once the hierarchy has been established, you can develop a clear breadcrumb navigation plan. You can also use other navigational elements supporting top and side navigation.

For example, if the current page has child pages, you can use various navigation elements to ensure they are linked.

Pages with simpler needs usually implement a small navigation bar with the main content and links to subpages. In the case of e-commerce navigation, it is usually presented as a list of horizontal links.

Global linking to important pages

Hamburger menus and mega menus help users find pages on your site quickly and easily.

Mega menus provide the option of linking to many pages. But you should still only include the pages that are most important to you, for two reasons:

• you should not clutter the interface and make it harder for users to find important information,
• you should consolidate PageRank on the pages that deliver the greatest commercial benefits to your company, if they have been well optimised. 

Check the site map suggested in the first tip and use search demand data to decide what to use. Then use the established hierarchy to organise everything.

Presenting the site hierarchy through breadcrumb navigation

Breadcrumb navigation helps users understand where they are on your site. If your site does not have breadcrumbs, it is recommended to add them.

In addition to helping users, this navigation helps Google understand your hierarchy and distribute PageRank. If you add breadcrumb structured data, you will also increase the likelihood of a breadcrumb menu appearing in the search results.

Breadcrumb menus are most often placed at the top of the page, below the header. However, there is no need to place these elements high up. This is something you need to test to see how it affects users and your site’s ability to achieve its goals. Placement has no impact on SEO. 

Limit the number of elements in your menu

Keep your menu minimal, with a maximum of six or seven categories, so that users can process information quickly and reach the desired pages faster.

If your site contains a lot of information, you can divide it into sections using a dropdown menu. This means that if a user hovers over one of the menu items, a list of subcategories will appear, from which they can choose the relevant one.

Add a search bar

A great navigational practice for content-heavy sites is to add a custom search bar. This tool can help users find what they want quickly and seamlessly. The search bar is especially useful for visitors with less experience browsing the web. It is a familiar concept that can be understood intuitively.

When it comes to search bar placement, a good practice is to place it close to your menu. As with the navigation menu, it can remain in one place when users scroll the page, to ensure easy access to pages within the site. 

Summary

Website navigation is a broad topic. Every element has plenty of nuances and usually the decision about which elements will be used and how they will function depends on your knowledge and experience.