UX and SEO tips for a successful navigation menu

When designing your website’s navigation, you need to consider many aspects: graphic charter, tree structure, functionalities… and the navigation menu. The navigation menu is of critical importance – and tends to be one of the most overlooked and underestimated. When designed well, a navigation menu can have a major positive impact on your natural referencing as well as your conversions.

This article will attempt to provide you with some wise and effective advice for providing your visitors with optimal navigation. Let’s start by breaking down some of the most common menu structures.

The “classic” horizontal navigation menu

It’s no coincidence that the horizontal drop-down menu is one of the most popular. This menu type is very well suited to websites that have a large volume of pages, which in turn have many different categories. As the subcategories can be displayed by scrolling, it’s quite possible to list a large number of them.

Beyond saving space – which is a constant goal for UX and UI designers – the reading direction of this menu is also quite natural to us (from left to right).

By default, the menu remains open at all times and only the main categories appear (i.e. first level ones).

Let’s move on to vertical menus.

Are you looking for a web developer, a technician or technical project manager to carry out your IT project? Check out our profiles.

Image copyright: bocasay.com

The “popular” vertical menu

The vertical menu is often displayed on the left side of the page. The categories are visible as a list from top to bottom. This type of menu is very suitable for websites which feel the need to have a completely free space in the center and right of pages that they can use to display other elements. A good example of this would be a photographer’s website.

The downside of the vertical menu is that it will reduce the width of the page because it will use up space on the left. Added to this is the fact that if you use a default vertical menu on the left of your site:

• The captions or subheadings of your titles must not be too long.
• You may need to choose to avoid using text and rely only on icons (when hovering over an icon the name of the relevant section will appear.)

The advantage of a vertical menu is that it remains very visible and is constantly present (although you can of course choose to make it disappear when you scroll down a page). Another factor is that this type of layout is more unique, and can give an additional authenticity to your site to make it stand out.

How to optimize your navigation menu for SEO (Search Engine Optimization)?

The algorithms of search engines such as Google, Bing and Yahoo, use your navigation menu as one of the criteria for ranking the pages of your site in search results.

First of all, we strongly advise you to avoid overly extensive menus and mega footers as much as possible. A mega menu is a navigation menu that displays a large volume of sections and therefore many links to different pages of the site. A good example of this is the Fnac site.

The importance of Link juice

This advice is taken from Olivier Andrieu (reference site Abondance.com), an expert in natural referencing for over 20 years: Link juice or referencing juice refers to the “quality” of the juice brought by one page to another page (backlink or outgoing link). The higher the quality of the page from which the link is made, the more the page which is linked to, and which will therefore receive the “juice,” will benefit from the good referencing of the page which issued the link. According to Google, the better a page is, the more it can transmit good link juice.

Example of link juice distribution

Page A has 3 links. The link juice will be divided and distributed among these 3 links; each will affect approximately 33.33% of the link juice of the starting page.

Page B has 10 links. The link juice will then be subdivided into 10 links and therefore each final page will only receive 10% of the original link juice instead of 33.33%.

With this in mind, it’s easier to see why you should avoid uysing navigation menu that contain too many sections – it will end up diluting the link juice sent to the internal pages of your site too much. Unfortunately, not everyone is as well-known as a company like Fnac, and therefore cannot afford this level of dilution.

It’s also important to remember: algorithms can distinguish between structural links coming from a navigation menu or the footer from those coming from the text of the site, or from an article for example.

Easy to understand

Opt for a menu that’s easy to read. The easier your menu is to understand, the more Google bots will favor your pages. Likewise and – and perhaps most importantly – a simple access menu will be clicked much more by your visitors.

As a web and mobile development agency, we can create a dedicated team for your business.

Integrate keywords

During the design of your website you have undoubtedly addressed the subject of the keywords you want to position yourself around. These keywords represent the queries typed by your targets. Don’t hesitate to include these keywords in your menu labels. This will have a beneficial effect on your SEO on Google.

Post a thread

Also, consider including an Ariadne’s thread on your web pages. A breadcrumb does not replace a navigation menu, but can complement it. It will enhance users’ browsing comfort and make your web app easier to understand by Google algorithms.