{"id":152741,"date":"2023-02-08T22:43:32","date_gmt":"2023-02-09T03:43:32","guid":{"rendered":"https:\/\/ahrefs.com\/blog\/?p=152741"},"modified":"2024-03-18T10:12:20","modified_gmt":"2024-03-18T15:12:20","slug":"website-navigation","status":"publish","type":"post","link":"https:\/\/ahrefs.com\/blog\/website-navigation\/","title":{"rendered":"Website Navigation Best Practices for SEO: Ultimate Guide"},"content":{"rendered":"\n<div class=\"intro-txt\">Great website navigation is a crucial element to get right for two main reasons.<\/div>\n\n\n\n<p>First, it affects your user experience\u2014helping users find what they want will result in more conversions.&nbsp;<\/p>\n\n\n\n<p>Second, it helps search engines. Good navigation will help them better understand how you\u2019ve organized your content and ensure <a href=\"https:\/\/ahrefs.com\/blog\/google-pagerank\/\">PageRank<\/a> flows to the most beneficial pages.<\/p>\n\n\n\n<p>But how can you improve website navigation to help users find what they\u2019re looking for and benefit your&nbsp;SEO?<\/p>\n\n\n\n<p>This article will explain precisely that.<\/p>\n\n\n\n<div class=\"intro-tok\" id=\"intro_tok\" style=\"display:none;\"><div class=\"intro-title\">Contents<\/div><a href=\"#\" class=\"expand-dots\"><span><\/span><span><\/span><span><\/span><\/a><\/div>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"What is website navigation?\" data-section=\"what-is-website-navigation\">\n\n\n\n<h2 class=\"wp-block-heading\">What is website navigation?<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>Website navigation is the system of tools and features designed to help users find information and navigate through a website seamlessly. It includes menus, links, and search bars, crucial for enhancing user experience by allowing easy access to various sections and content.<\/p>\n\n\n\n<p>There are standard components that facilitate user-friendly website navigation. Some of these include:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Breadcrumbs<\/li>\n\n\n\n<li>Sidebars<\/li>\n\n\n\n<li>Mega menus<\/li>\n\n\n\n<li>Dropdowns<\/li>\n\n\n\n<li>Tabs<\/li>\n\n\n\n<li>Accordions&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>I\u2019ll explain each one and how you can use them later on in the&nbsp;guide.<\/p>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"How people navigate websites\" data-section=\"how-people-navigate-websites\">\n\n\n\n<h2 class=\"wp-block-heading\">How people navigate websites<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>Before we dive into the navigation components and how they can help users navigate websites, it\u2019s important to understand how users actually navigate sites.<\/p>\n\n\n\n<p>There are three main ways, starting with forward navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Forward navigation<\/h3>\n\n\n\n<p>This type of navigation helps users explore deeper within a site hierarchy, often to find more specific content within the same topic&nbsp;area.<\/p>\n\n\n\n<p>Here\u2019s an example of typical forward navigation using Stripe\u2019s documentation area.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1356\" class=\"wp-image-153287\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1.png\" alt=\"Stripe's documentation\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1-627x425.png 627w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1-768x521.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1-1536x1042.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>First, a user may start on the main documentation page. They then scroll and select the payments documentation link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"988\" height=\"916\" class=\"wp-image-153289\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image9-1.jpg\" alt=\"Stripe's documentation payment link\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image9-1.jpg 988w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image9-1-458x425.jpg 458w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image9-1-768x712.jpg 768w\" sizes=\"auto, (max-width: 988px) 100vw, 988px\"><\/figure>\n\n\n\n<p>On the next page, they select to view all \u201cAfter the payment\u201d documentation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1608\" height=\"1000\" class=\"wp-image-153291\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image16-2.jpg\" alt=\"Stripe's &quot;after payment&quot; page\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image16-2.jpg 1608w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image16-2-680x423.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image16-2-768x478.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image16-2-1536x955.jpg 1536w\" sizes=\"auto, (max-width: 1608px) 100vw, 1608px\"><\/figure>\n\n\n\n<p>Then they navigate to \u201cReceive payouts.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1584\" height=\"1006\" class=\"wp-image-153293\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image35-1.jpg\" alt=\"Stripe's &quot;receive payouts&quot; link\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image35-1.jpg 1584w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image35-1-669x425.jpg 669w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image35-1-260x166.jpg 260w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image35-1-768x488.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image35-1-1536x976.jpg 1536w\" sizes=\"auto, (max-width: 1584px) 100vw, 1584px\"><\/figure>\n\n\n\n<p>And finally, to \u201cInstant Payouts.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1570\" height=\"280\" class=\"wp-image-153295\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image47-1.jpg\" alt=\"Stripe's &quot;instant payouts&quot;\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image47-1.jpg 1570w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image47-1-680x121.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image47-1-768x137.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image47-1-1536x274.jpg 1536w\" sizes=\"auto, (max-width: 1570px) 100vw, 1570px\"><\/figure>\n\n\n\n<p>In this scenario, the user has navigated deeper within the site hierarchy, going from a broad topic like documentation to more specific subtopics like payments and payouts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1936\" height=\"440\" class=\"wp-image-153297\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image2-3.png\" alt=\"Forward navigation illustration\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image2-3.png 1936w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image2-3-680x155.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image2-3-768x175.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image2-3-1536x349.png 1536w\" sizes=\"auto, (max-width: 1936px) 100vw, 1936px\"><\/figure>\n\n\n\n<p>This is forward navigation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sideward navigation<\/h3>\n\n\n\n<p>Secondly, there is sideward navigation. This helps users explore content related to what they are currently viewing but isn\u2019t a subtopic.<\/p>\n\n\n\n<p>For example, if you\u2019re on Stripe\u2019s \u201cInstant Payouts\u201d page, the sidebar links you to other payout-related content, such as \u201cAlternative currencies.\u201d&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"470\" height=\"316\" class=\"wp-image-153299\" style=\"width: 353px; height: 237px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image46-2.jpg\" alt=\"Stripe's &quot;after payment&quot; page, highlighting the &quot;alternative currencies&quot; link\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Backward navigation<\/h3>\n\n\n\n<p>Finally, there is backward navigation. This type of website navigation helps users return to a previous page or step within a process.<\/p>\n\n\n\n<p>The most common way to facilitate this is with <a href=\"https:\/\/ahrefs.com\/seo\/glossary\/breadcrumb-navigation\">breadcrumbs<\/a>, which you can see within the Stripe documentation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1132\" height=\"428\" class=\"wp-image-153301\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image23-1.jpg\" alt=\"Backward navigation on Stripe\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image23-1.jpg 1132w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image23-1-680x257.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image23-1-768x290.jpg 768w\" sizes=\"auto, (max-width: 1132px) 100vw, 1132px\"><\/figure>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"Common navigation components\" data-section=\"common-navigation-components\">\n\n\n\n<h2 class=\"wp-block-heading\">Common website navigation styles<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>When you build your website, you\u2019ll think of it in terms of navigation components and menu designs. Here are some website menu types to consider:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation menus<\/h3>\n\n\n\n<p>Starting with a simple navigation component\u2014menus.<\/p>\n\n\n\n<p>You\u2019ll see website navigation menus in multiple areas, often horizontally in a header (sometimes called a website menu&nbsp;bar).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"189\" class=\"wp-image-153302\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image12-1.jpg\" alt=\"Header navigation menu on AO.com\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image12-1.jpg 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image12-1-680x64.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image12-1-768x73.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image12-1-1536x145.jpg 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\">\n<figcaption class=\"wp-element-caption\">Header navigation on AO.com.<\/figcaption>\n<\/figure>\n\n\n\n<p>Vertically in the footer:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"544\" class=\"wp-image-153304\" style=\"width: 362px; height: 408px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image19-2.jpg\" alt=\"Navigation menu on ASOS\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image19-2.jpg 482w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image19-2-377x425.jpg 377w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\">\n<figcaption class=\"wp-element-caption\">A navigation menu on ASOS, with a header to group the links in the&nbsp;menu.<\/figcaption>\n<\/figure>\n\n\n\n<p>Within sidebars:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"744\" class=\"wp-image-153306\" style=\"width: 383px; height: 558px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image17-2.jpg\" alt=\"Sidebar navigation\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image17-2.jpg 510w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image17-2-291x425.jpg 291w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\"><\/figure>\n\n\n\n<p>Sometimes, their appearance can change. But the concept is the same\u2014a list of links, vertically or horizontally, often organized by&nbsp;topic.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dropdown menus<\/h3>\n\n\n\n<p>The key element of a website dropdown menu is that it\u2019s hidden, and then it displays when users hover or click on another element, like a navigation bar in the header.<\/p>\n\n\n\n<p>Dropdown navigation is often straightforward, with a single vertical list of links, like this example on FreeAgent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1876\" height=\"666\" class=\"wp-image-153308\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image51-1.jpg\" alt=\"Dropdown menu on FreeAgent\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image51-1.jpg 1876w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image51-1-680x241.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image51-1-768x273.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image51-1-1536x545.jpg 1536w\" sizes=\"auto, (max-width: 1876px) 100vw, 1876px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Mega menus<\/h3>\n\n\n\n<p>There is a more visually complex dropdown type, a mega menu. Both menus display in the same way (via hover or click)\u2014the main difference being the number of content\/links contained, like in this example from&nbsp;ASOS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"865\" class=\"wp-image-153310\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image30-2.jpg\" alt=\"Mega menu on ASOS\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image30-2.jpg 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image30-2-680x294.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image30-2-768x332.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image30-2-1536x665.jpg 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/mega-menus-work-well\/\">Website mega menus are better than simple dropdowns<\/a>, as the Nielsen Norman Group confirmed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"919\" class=\"wp-image-153311\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image10-3.jpg\" alt=\"Quote on mega menus from the Nielsen Norman Group\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image10-3.jpg 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image10-3-680x313.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image10-3-768x353.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image10-3-1536x706.jpg 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>Why mega menus are better can be summarized into a few key reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You can include more links within a website mega&nbsp;menu.<\/li>\n\n\n\n<li>You can group related links easier.<\/li>\n\n\n\n<li>You can include imagery and illustrations.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Hamburger menus<\/h3>\n\n\n\n<p>A website hamburger menu (or mobile menu) is similar to a dropdown menu, but sites hide them behind an icon that looks like a burger (hence the&nbsp;name).<\/p>\n\n\n\n<p>This type of navigation is often seen on mobile devices, like in this example on my website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"494\" height=\"766\" class=\"wp-image-153068\" style=\"width: 371px; height: 575px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.29.00-pm.gif\" alt=\"Burger menu\u2013style navigation\"><\/figure>\n\n\n\n<p>But they\u2019re also becoming more commonly seen on desktop sites, like this example on Amazon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"436\" class=\"wp-image-152979\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/amazon-navigation.gif\" alt=\"Burger menu\u2013style navigation on Amazon\"><\/figure>\n\n\n\n<p>Hidden menus like this should not be used as the primary way you expect users to navigate. Hidden navigation is less discoverable, so make it visible by default if it\u2019s important.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tabbed navigation<\/h3>\n\n\n\n<p>Tabbed navigation replaces content when users select to view a subset of information.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s how I\u2019ve implemented that on my SEOToolbelt resource.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"877\" class=\"wp-image-153070\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.35.51-pm.gif\" alt=\"Tabbed navigation\"><\/figure>\n\n\n\n<p>You can also see tabs implemented on the Ahrefs Blog\u2019s homepage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1108\" height=\"620\" class=\"wp-image-153071\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.37.02-pm.gif\" alt=\"Tabbed navigation on Ahrefs Blog\"><\/figure>\n\n\n\n<p>Sometimes, sites have tabbed navigation within mega menus, and content is shown on hover\u2014like in this example on Virgin Experience Days.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"685\" class=\"wp-image-153072\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.38.03-pm.gif\" alt=\"Tabbed navigation within mega menu\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Accordion navigation<\/h3>\n\n\n\n<p>Accordions are similar to tabs, but the two main differences are&nbsp;that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>There is the option for no content to be displayed.<\/li>\n\n\n\n<li>Multiple accordions can optionally be opened at&nbsp;once.<\/li>\n<\/ul>\n\n\n\n<p>I made an example of an accordion where only one can be open at&nbsp;once.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"536\" height=\"800\" class=\"wp-image-153077\" style=\"width: 402px; height: 600px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/accordion-1.gif\" alt=\"Accordion tab where only one dropdown menu can be opened at a time\n\"><\/figure>\n\n\n\n<p>And here it is if you allow multiple accordions to open at&nbsp;once.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"798\" class=\"wp-image-153078\" style=\"width: 323px; height: 599px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/accordion-2.gif\" alt=\"Accordion tab where all tabs on the dropdown menu can be opened at a time\n\"><\/figure>\n\n\n\n<p>Tabs and accordions can present a challenge for <a href=\"https:\/\/ahrefs.com\/blog\/javascript-seo\/\">JavaScript SEO<\/a>. If you want the content to be ranked, the HTML source should include the content rather than setting it to inject via JavaScript on&nbsp;click.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Faceted navigation<\/h3>\n\n\n\n<p><a href=\"https:\/\/ahrefs.com\/blog\/faceted-navigation\/\">Faceted navigation<\/a> (also known as filtered navigation) allows users to select different filters to view subsets of information on the page. Again, I\u2019ve implemented this on my blog using the brilliant <a href=\"https:\/\/isotope.metafizzy.co\/\">Isotope JS package<\/a>.<\/p>\n\n\n\n<p>Like this example on John Lewis, you\u2019ll also commonly see filtered navigation on an e-commerce store.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1212\" height=\"669\" class=\"wp-image-153073\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.42.24-pm.gif\" alt=\"Filtered navigation on an e-commerce store\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Anchor link navigation<\/h3>\n\n\n\n<p>Anchor links are navigation that helps users jump to a particular part of a long page, like an article.&nbsp;<\/p>\n\n\n\n<p>The Ahrefs Blog uses this, like in this link building article.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1204\" height=\"699\" class=\"wp-image-153074\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.21.12-pm.gif\" alt=\"Anchor link navigation on Ahrefs\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Hierarchical navigation<\/h3>\n\n\n\n<p>Hierarchical website navigation helps users move backward or forward across a site hierarchy. Often, you\u2019ll see this in practice by using breadcrumbs, where a user is shown the current page\u2019s parent page. Here\u2019s an example of that on an e-commerce store called Projectorpoint.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1548\" height=\"394\" class=\"wp-image-153315\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image32-1.png\" alt=\"Breadcrumbs on Projectorpoint\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image32-1.png 1548w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image32-1-680x173.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image32-1-768x195.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image32-1-1536x391.png 1536w\" sizes=\"auto, (max-width: 1548px) 100vw, 1548px\"><\/figure>\n\n\n\n<p>You also sometimes see hierarchical navigation in the form of sidebar links. For example, on Sephora, the entire hierarchical website navigation is shown in these links (alongside the current page\u2019s sibling pages).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1494\" height=\"1386\" class=\"wp-image-153317\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image1.jpg\" alt=\"Sidebar links on Sephora\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image1.jpg 1494w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image1-458x425.jpg 458w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image1-768x712.jpg 768w\" sizes=\"auto, (max-width: 1494px) 100vw, 1494px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Related navigation<\/h3>\n\n\n\n<p>Related navigation helps users move sideways across a site hierarchy to other associated pages (sometimes called sibling pages). There are a few ways sites usually implement related navigation:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>By pages sharing the same taxonomy<\/strong> \u2013 For example, if two products on an e-commerce store were in the 4K TV category, they\u2019d display as related products.<\/li>\n\n\n\n<li><strong>By pages having the same parent page<\/strong> \u2013 For example, if the 4K TV category and the 1080p TV category both had \u201cTV set\u201d as their parent category, links would be added between the&nbsp;two.<\/li>\n\n\n\n<li><strong>By pages having similar content<\/strong> \u2013 Sometimes, related navigation is built based on an index of page content, and then links are automatically added between pages depending on the content similarity.&nbsp;<\/li>\n\n\n\n<li><strong>By products being frequently bought together<\/strong><\/li>\n<\/ul>\n\n\n\n<p>You can manually add these types of links. But ideally, you\u2019d automate them to reduce the burden on site admins.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pagination navigation<\/h3>\n\n\n\n<p>Sites use <a href=\"https:\/\/ahrefs.com\/blog\/rel-prev-next-pagination\/\">pagination<\/a> to show a subset of content from a page, often used on pages that list links to other pages, like on the Ahrefs Blog archive pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1486\" height=\"632\" class=\"wp-image-153320\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image20-2.png\" alt=\"Pagination navigation on the Ahrefs Blog's archive pages\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image20-2.png 1486w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image20-2-680x289.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image20-2-768x327.png 768w\" sizes=\"auto, (max-width: 1486px) 100vw, 1486px\"><\/figure>\n\n\n\n<p>Or even Google search results.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"802\" height=\"260\" class=\"wp-image-153321\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image34.png\" alt=\"Numbered pagination on the Google homepage\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image34.png 802w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image34-680x220.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image34-768x249.png 768w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\"><\/figure>\n\n\n\n<p>Nowadays, you don\u2019t just get numbered pagination, as I\u2019ve shown above. You also get \u201cload more\u201d buttons, like the one&nbsp;below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"618\" height=\"400\" class=\"wp-image-153323\" style=\"width: 464px; height: 300px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image25.png\" alt=\"Load button saying &quot;show me more&quot;\"><\/figure>\n\n\n\n<p>Most studies say that users prefer \u201cload more\u201d buttons, such as <a href=\"https:\/\/www.smashingmagazine.com\/2016\/03\/pagination-infinite-scrolling-load-more-buttons\/\">this one by Smashing Magazine<\/a>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1608\" height=\"438\" class=\"wp-image-153525\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/29-smashing-magazine.png\" alt=\"Quote from Smashing Magazine\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/29-smashing-magazine.png 1608w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/29-smashing-magazine-680x185.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/29-smashing-magazine-768x209.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/29-smashing-magazine-1536x418.png 1536w\" sizes=\"auto, (max-width: 1608px) 100vw, 1608px\"><\/figure>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"12 best practices to master website navigation\" data-section=\"master-website-navigation-best-practices\">\n\n\n\n<h2 class=\"wp-block-heading\">12 website navigation best practices for&nbsp;SEO<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>Now you know how people navigate sites and the common components that help users navigate, here are 12 best practices for website navigation that users and search engines will&nbsp;love.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Research the pages you want to create<\/h3>\n\n\n\n<p>Excellent navigation starts with great pages to navigate to. So you\u2019ll want to start with a website navigation analysis. Then, plan the pages on your site into a sitemap (not an <a href=\"https:\/\/ahrefs.com\/blog\/how-to-create-a-sitemap\/\">HTML or XML sitemap<\/a>, just a list of the pages you want on your site in a spreadsheet).<\/p>\n\n\n\n<p>Ideally, you only want to add pages to your sitemap if a user will be interested in the contents of that page (or you\u2019ll waste your time creating it).<\/p>\n\n\n\n<p>But how do you decide if a user will be interested?<\/p>\n\n\n\n<p>One of the best methods to figure that out is keyword research. But that\u2019s a vast topic. So if you don\u2019t know how to do it, head to <a href=\"https:\/\/ahrefs.com\/seo\/keyword-research\" data-ahr=\"https:\/\/ahrefs.com\/blog\/keyword-research\/\">this keyword research guide<\/a>. The process you\u2019ll follow goes like this. You&nbsp;can:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use a keyword research tool, like <a href=\"https:\/\/ahrefs.com\/keywords-explorer\">Keywords Explorer<\/a>, to find what users search for, or check competitors\u2019 sites using <a href=\"https:\/\/ahrefs.com\/site-explorer\">Site Explorer<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/ahrefs.com\/blog\/ke-keyword-grouping\/\">Group semantically related keywords<\/a> together (Ahrefs\u2019 Parent Topic feature can help&nbsp;here).<\/li>\n\n\n\n<li>Create a list of all the parent topics and secondary keywords. Below is an example of that for a gifting client of&nbsp;mine.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1028\" class=\"wp-image-153325\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image39.jpg\" alt=\"Keyword research results table\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image39.jpg 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image39-680x350.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image39-768x395.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image39-1536x790.jpg 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Create a hierarchical website navigation<\/h3>\n\n\n\n<p>Now you have your list of pages, you should group those pages to create a site hierarchy\/information architecture.<\/p>\n\n\n\n<p>First, you should group them into a few broad page types, such as top-level product categories, articles, company information, or whatever suits your site. This shows the types of content you\u2019ll have.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1396\" height=\"764\" class=\"wp-image-153327\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image18-2.png\" alt=\"Illustration showing page types coming off the homepage\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image18-2.png 1396w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image18-2-680x372.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image18-2-768x420.png 768w\" sizes=\"auto, (max-width: 1396px) 100vw, 1396px\"><\/figure>\n\n\n\n<p>You\u2019ll then want to create a hierarchy of pages within each page type. Hierarchies get more specific the deeper into them you go. So for a clothing e-commerce store, that could look something like&nbsp;this:<\/p>\n\n\n\n<p><em>Home &gt; Men\u2019s clothing &gt; Shoes &gt; Boots &gt; Black&nbsp;boots<\/em><\/p>\n\n\n\n<p><em>Home &gt; Blog &gt; Trends &gt; Winter clothing trends 2022<\/em><\/p>\n\n\n\n<p>I use a <a href=\"https:\/\/www.mindnode.com\/\">Mac App called MindNode<\/a> that makes it easy to create organization charts that display an information architecture. Here\u2019s a quick example of a category structure for a clothing brand.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1812\" height=\"770\" class=\"wp-image-153329\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image3-5-1.jpg\" alt=\"Organization chart showing a clothing brand's information architecture\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image3-5-1.jpg 1812w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image3-5-1-680x289.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image3-5-1-768x326.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image3-5-1-1536x653.jpg 1536w\" sizes=\"auto, (max-width: 1812px) 100vw, 1812px\"><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/card-sorting.html\">Card sorting<\/a> is a valuable technique for understanding how different people organize content. Sometimes, it\u2019s not clear-cut. There can be many ways to organize a&nbsp;site.&nbsp;<\/p>\n\n\n\n<p>It can also help to look at what competing sites do. By examining breadcrumbs and other navigation elements, you can understand how even large, complex sites have decided to organize information.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1154\" height=\"508\" class=\"wp-image-153331\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image37.jpg\" alt=\"Breadcrumb navigation on John Lewis\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image37.jpg 1154w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image37-680x299.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image37-768x338.jpg 768w\" sizes=\"auto, (max-width: 1154px) 100vw, 1154px\">\n<figcaption class=\"wp-element-caption\">An example of how John Lewis has organized its content.<\/figcaption>\n<\/figure>\n\n\n\n<p>One method to understand site structure is to examine URL structure. That\u2019s easy, thanks to the <strong>Structure explorer<\/strong> report in Ahrefs\u2019 <a href=\"https:\/\/ahrefs.com\/site-audit\">Site Audit<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"774\" class=\"wp-image-153333\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image42-1.png\" alt=\"Structure Explorer tool, via Ahrefs' Site Audit\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image42-1.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image42-1-680x263.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image42-1-768x297.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image42-1-1536x595.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>This report has a brilliant feature where you can view various types of data according to the structure. For instance, when auditing any website, you can view Ahrefs\u2019 organic traffic estimate by directory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"626\" class=\"wp-image-153334\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image27-1.png\" alt=\"Ahrefs organic traffic by directory\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image27-1.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image27-1-680x213.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image27-1-768x241.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image27-1-1536x481.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<div class=\"recommendation\"><div class=\"recommendation-title\">RECOMMENDATION<\/div><div class=\"recommendation-content\">\n\n\n\n<p>Are you analyzing a website without structured URLs? If so, I recently wrote a guide on using breadcrumbs and URL structure to <a href=\"https:\/\/www.samunderwood.co.uk\/blog\/analysing-competitor-site-structure-at-scale\/\">analyze competitors\u2019 site structures<\/a> quickly. It provides great insights for planning your structure, so it\u2019s worth a&nbsp;read.<\/p>\n\n\n\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">3. Build navigation elements around that hierarchy<\/h3>\n\n\n\n<p>Now that you have set up your hierarchy, you can develop a clear plan for how breadcrumb will work. You can also begin using different navigation components to help with forward and sideward navigation.&nbsp;<\/p>\n\n\n\n<p>For example, if the current page has child pages, you can use different navigation components to ensure they are linked.<\/p>\n\n\n\n<p>For Google\u2019s SEO documentation, it\u2019s built its sidebar around that hierarchy.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1428\" height=\"916\" class=\"wp-image-153336\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image31.jpg\" alt=\"Sidebar hierarchy navigation on Google Search Central\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image31.jpg 1428w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image31-663x425.jpg 663w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image31-260x166.jpg 260w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image31-768x493.jpg 768w\" sizes=\"auto, (max-width: 1428px) 100vw, 1428px\"><\/figure>\n\n\n\n<p>And then, on topic overview pages, like its \u201ccrawling\u201d one, it\u2019s created a table that links to all of that page\u2019s subpages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1786\" height=\"1318\" class=\"wp-image-153338\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image55.jpg\" alt=\"Table that links to all subpages on Google's SEO documentation\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image55.jpg 1786w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image55-576x425.jpg 576w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image55-768x567.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image55-1536x1134.jpg 1536w\" sizes=\"auto, (max-width: 1786px) 100vw, 1786px\"><\/figure>\n\n\n\n<p>Sites that have more simplistic needs often implement a small website navigation bar with the main content and links to subpages. For e-commerce site navigation, you\u2019ll often see this presented as a list of horizontal links, like this example:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1311\" class=\"wp-image-153341\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image28.jpg\" alt=\"Horizontal links on the Reiss website\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image28.jpg 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image28-648x425.jpg 648w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image28-768x504.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image28-1536x1007.jpg 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>You can automate these links entirely by querying the parent\/child relationships between pages, which I\u2019ve written about recently in my guide for <a href=\"https:\/\/ahrefs.com\/blog\/seo-ecommerce-category-pages\/#internally-link-categories\">improving e-commerce category pages<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Don\u2019t forget forward navigation<\/h3>\n\n\n\n<p>When planning your website navigation, it\u2019s surprisingly easy to miss out on forward navigation.&nbsp;<\/p>\n\n\n\n<p>A common culprit for this is e-commerce category pages. Users can use JavaScript-based filtering navigation to navigate forwards, so links to subcategories of the current category are sometimes omitted.<\/p>\n\n\n\n<p>I worked with jewelry brand Abbott Lyon in mid-2021. I found it needed longer-tail categories and components for forward navigation on categories.&nbsp;<\/p>\n\n\n\n<p>It fixed the issue by December 2021 and started to see the reward by March 2022. It has continuously grown since the fix, setting itself up for an excellent peak season in December 2022.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1250\" height=\"538\" class=\"wp-image-153342\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image24.jpg\" alt=\"Line graph showing how traffic increased over time after a navigation strategy was put in place\n\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image24.jpg 1250w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image24-680x293.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image24-768x331.jpg 768w\" sizes=\"auto, (max-width: 1250px) 100vw, 1250px\">\n<figcaption class=\"wp-element-caption\">Chart is from the <strong>Overview<\/strong> report in <a href=\"https:\/\/ahrefs.com\/site-explorer\">Site Explorer<\/a>.<\/figcaption>\n<\/figure>\n\n\n\n<p>But how specifically did it improve navigation SEO? It was as simple as adding a block of links to subcategories in each category.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"698\" class=\"wp-image-153344\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image5-6.jpg\" alt=\"Block links on a category page for necklaces\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image5-6.jpg 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image5-6-680x237.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image5-6-768x268.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image5-6-1536x536.jpg 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>This nicely displays the influence navigation components can have on&nbsp;SEO.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Link to important pages globally<\/h3>\n\n\n\n<p>Burger and mega menus help users quickly and easily find the <strong>important pages<\/strong> of your site. I\u2019ve seen advice to make all your site pages one click away using mega menus\u2014<strong>don\u2019t do&nbsp;that.<\/strong><\/p>\n\n\n\n<p>Mega menus give you the option to link to more pages. But you should still only include the pages that are <strong>most important to you<\/strong> for two reasons:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>You don\u2019t want to clutter the interface, making it harder for users to find important information.<\/li>\n\n\n\n<li>You want to consolidate PageRank into the pages that would have the most commercial benefit to your business if you ranked well for&nbsp;them.&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>Refer to the sitemap I suggested in tip #1 and use the search demand data to decide what to include. Then, use the hierarchy you\u2019ve set to determine how to organize it.<\/p>\n\n\n\n<p>I take a data-led approach. So I usually end up with a sheet with multiple tables; each table looks like&nbsp;this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"829\" class=\"wp-image-153346\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image26-1.jpg\" alt=\"Data table example\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image26-1.jpg 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image26-1-680x282.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image26-1-768x318.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image26-1-1536x637.jpg 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\">\n<figcaption class=\"wp-element-caption\">In this example, \u201cGifts by recipient\u201d is a subsection of a mega menu&nbsp;panel.<\/figcaption>\n<\/figure>\n\n\n\n<p>I used the potential traffic metric from Ahrefs\u2019 <a href=\"https:\/\/ahrefs.com\/keywords-explorer\">Keywords Explorer<\/a>, GA session, and revenue data. Then, I created a 0\u2013100 priority score based on those three metrics. This makes it easier to figure out which pages to include.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Show your site hierarchy with breadcrumbs<\/h3>\n\n\n\n<p>Breadcrumbs help users understand where they are within your site. If your site doesn\u2019t have them, I recommend you add&nbsp;them.<\/p>\n\n\n\n<p>In addition to helping users, they also benefit your navigation by helping Google understand your hierarchy and distributing PageRank, as <a href=\"https:\/\/twitter.com\/methode\/status\/877842242358185984\">confirmed by Gary Illyes<\/a>.<\/p>\n\n\n\n<p>If you add <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/structured-data\/breadcrumb\">breadcrumb structured data<\/a>, you also increase the likelihood of breadcrumbs showing on search results, like in this example in Google documentation:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1802\" height=\"636\" class=\"wp-image-153348\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image40-1.jpg\" alt=\"Breadcrumb structured data example in Google's SEO documentation\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image40-1.jpg 1802w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image40-1-680x240.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image40-1-768x271.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image40-1-1536x542.jpg 1536w\" sizes=\"auto, (max-width: 1802px) 100vw, 1802px\"><\/figure>\n\n\n\n<p>The convention for breadcrumb placement is high up on the page under the header. Here\u2019s an example on Search Engine Roundtable.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1368\" height=\"1042\" class=\"wp-image-153350\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image43-1.jpg\" alt=\"Breadcrumb links on Search Engine Roundtable\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image43-1.jpg 1368w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image43-1-558x425.jpg 558w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image43-1-768x585.jpg 768w\" sizes=\"auto, (max-width: 1368px) 100vw, 1368px\"><\/figure>\n\n\n\n<p>You don\u2019t necessarily need to place them highly. It\u2019s something you\u2019ll need to test to see how it affects users achieving the primary goals you set for your site. <a href=\"https:\/\/www.seroundtable.com\/google-breadcrumb-placement-seo-31308.html\">The placement won\u2019t impact your&nbsp;SEO.<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Feature popular pages throughout your&nbsp;site<\/h3>\n\n\n\n<p>Wherever it makes sense, add links to your most popular pages throughout your&nbsp;site.<\/p>\n\n\n\n<p>Sephora does a great job of this on top-level categories, like its makeup page. This category has a grid of links to various makeup-related categories.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"322\" class=\"wp-image-153352\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image49.png\" alt=\"Grid links to different makeup categories on the Sephora site\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image49.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image49-680x110.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image49-768x124.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image49-1536x247.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>None of these are direct child pages of the makeup category; there is another category below makeup before you reach these&nbsp;pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"340\" class=\"wp-image-153354\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image4-10.png\" alt=\"Breadcrumbs links on Sephora\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image4-10.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image4-10-680x116.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image4-10-768x131.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image4-10-1536x261.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>Still, Sephora has added links because they\u2019re popular with&nbsp;users.<\/p>\n\n\n\n<p>This keeps the <a href=\"https:\/\/ahrefs.com\/blog\/website-structure\/\">site structure flat rather than deep<\/a>. If internal links were based purely on hierarchy, users would have to make multiple clicks to reach pages deeper within the site, even if they\u2019re popular.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">8. Don\u2019t hide important navigation design features on mobile<\/h3>\n\n\n\n<p>Mobile navigation can be more challenging due to the reduced amount of space. But the solution isn\u2019t hiding essential navigation elements on mobile.<\/p>\n\n\n\n<p>Take a look at the mega menu on Stripe, for example.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"611\" class=\"wp-image-153075\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.43.42-pm.gif\" alt=\"Mega menu on Stripe's mobile site\"><\/figure>\n\n\n\n<p>There are a lot of links on desktop; ideally, we\u2019ll also want to make it easy for users to find those links on mobile.<\/p>\n\n\n\n<p>Stripe\u2019s solution is to use a slider and take advantage of vertical space and users\u2019 tendency to scroll on mobile.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"493\" height=\"620\" class=\"wp-image-153076\" style=\"width: 370px; height: 465px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/Screen-Recording-2023-02-09-at-12.44.48-pm.gif\" alt=\"Stripe's mobile navigation menu\"><\/figure>\n\n\n\n<p>This is a brilliant example of keeping consistency between mobile and desktop UX. If you\u2019re looking for a JS library to simplify creating a similar menu, I recommend <a href=\"https:\/\/mmenujs.com\/\">mmenu<\/a>.<\/p>\n\n\n\n<p>For navigation SEO, using tabs, accordions, and sliders on mobile devices rather than removing content also means you\u2019re less likely to be negatively impacted by mobile indexing in Google.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1800\" height=\"660\" class=\"wp-image-153358\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image8-1.jpg\" alt=\"Mobile indexing documentation\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image8-1.jpg 1800w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image8-1-680x249.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image8-1-768x282.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image8-1-1536x563.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\"><\/figure>\n\n\n\n<p>Although, you\u2019re unlikely to run into issues with hiding content on mobile if your site is responsive (unless you\u2019re using JS to remove content from the HTML on&nbsp;load).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">9. Keep anchor text in your site navigation descriptive<\/h3>\n\n\n\n<p>Anchor text that is too short can confuse users about which page they will end up on after clicking the&nbsp;link.<\/p>\n\n\n\n<p>This can also cause problems for SEO since <a href=\"https:\/\/ahrefs.com\/blog\/anchor-text\/\">anchor text<\/a> is one way search engines determine page relevancy, as John Mueller has confirmed.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\">\n<div class=\"wp-block-embed__wrapper\">https:\/\/twitter.com\/johnmu\/status\/1433461820145160197<\/div>\n<\/figure>\n\n\n\n<p>For example, say you had a site that sold gaming equipment. Within a menu, you could have a list of links like&nbsp;this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"252\" height=\"178\" class=\"wp-image-153362\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image59.png\" alt=\"List of three links\"><\/figure>\n\n\n\n<p>Rather than just saying \u201claptops,\u201d be more specific about the type of accessories, laptops, and desktops you\u2019re selling. In this example, it\u2019s likely as simple as pre-appending \u201cGaming\u201d to each&nbsp;link.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"176\" class=\"wp-image-153364\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image21-1.jpg\" alt=\"List of three links\"><\/figure>\n\n\n\n<p>This will reduce uncertainty for users and help search engines figure out which of these two topics you\u2019re targeting.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1156\" height=\"250\" class=\"wp-image-153366\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image29-1.jpg\" alt=\"List of keywords, via Ahrefs' Keywords Explorer\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image29-1.jpg 1156w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image29-1-680x147.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image29-1-768x166.jpg 768w\" sizes=\"auto, (max-width: 1156px) 100vw, 1156px\">\n<figcaption class=\"wp-element-caption\">Source: Ahrefs\u2019 <a href=\"https:\/\/ahrefs.com\/keywords-explorer\">Keywords Explorer<\/a>.<\/figcaption>\n<\/figure>\n\n\n\n<p>Keep your anchor text descriptive, but don\u2019t go overboard. For example, you don\u2019t need to repeat words multiple times in breadcrumbs like&nbsp;this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1268\" height=\"82\" class=\"wp-image-153369\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image41-1.png\" alt=\"Long breadcrumbs\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image41-1.png 1268w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image41-1-680x44.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image41-1-768x50.png 768w\" sizes=\"auto, (max-width: 1268px) 100vw, 1268px\"><\/figure>\n\n\n\n<p>As breadcrumbs are hierarchical, you can shorten them; they\u2019ll still make sense to users, and you can put more descriptive anchor text elsewhere on the site, like in website navigation bars or hierarchical links.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"642\" height=\"86\" class=\"wp-image-153368\" style=\"width: 482px; height: 65px;\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image14-3.png\" alt=\"Short breadcrumbs\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">10. Order navigation by popularity<\/h3>\n\n\n\n<p>When creating your website menu, order navigation items based on how likely a user is to click a link. If you\u2019re making a new site and doing thorough keyword research, you can understand the relative popularity of different topics by looking at search volumes.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/ahrefs.com\/keywords-explorer\">Keywords Explorer<\/a> shows that gaming laptops are much more popular than other pages. So unless there\u2019s a business reason not to, I should promote them more prominently.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1292\" height=\"318\" class=\"wp-image-153371\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image36.jpg\" alt=\"Keyword research for gaming laptop, accessories, and consoles\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image36.jpg 1292w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image36-680x167.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image36-768x189.jpg 768w\" sizes=\"auto, (max-width: 1292px) 100vw, 1292px\"><\/figure>\n\n\n\n<p>If your site receives a reasonable amount of traffic, you can use Google Analytics event tracking to see which links users click&nbsp;most.&nbsp;<\/p>\n\n\n\n<p>Doing this using Google Tag Manager is simple; you\u2019ll need to set up a GA event tag with an appropriate category and action label, then set the \u201cLabel\u201d <strong>Click Text<\/strong> like&nbsp;this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1999\" height=\"1534\" class=\"wp-image-153372\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image57.png\" alt=\"Tag configuration page on Google Tag Manager\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image57.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image57-554x425.png 554w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image57-768x589.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image57-1536x1179.png 1536w\" sizes=\"auto, (max-width: 1999px) 100vw, 1999px\"><\/figure>\n\n\n\n<p>\u201cClick Text\u201d will use the anchor text of the clicked link as the label, making it easy to identify the&nbsp;link.<\/p>\n\n\n\n<p>Next, add a trigger to the tag. This will fire the event when a user clicks the links you want to track. To do this, set the trigger type as \u201cClick - Just Links.\u201d Then set it to only trigger on some link clicks. Finally, fire the tag based upon the \u201cClick Element\u201d matching a CSS selector.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1902\" height=\"896\" class=\"wp-image-153373\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image33.jpg\" alt=\"GTM trigger configuration\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image33.jpg 1902w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image33-680x320.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image33-768x362.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image33-1536x724.jpg 1536w\" sizes=\"auto, (max-width: 1902px) 100vw, 1902px\"><\/figure>\n\n\n\n<p>In the above example, I\u2019m tracking a sub-menu in a website dropdown menu.<\/p>\n\n\n\n<p>If you\u2019ve moved to GA4, the process is quite similar. You can reuse the same trigger and configure the event parameters to send the click text and URL. Here\u2019s how that should look:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1894\" height=\"1490\" class=\"wp-image-153375\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image48.png\" alt=\"Event tracking tag configuration\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image48.png 1894w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image48-540x425.png 540w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image48-768x604.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image48-1536x1208.png 1536w\" sizes=\"auto, (max-width: 1894px) 100vw, 1894px\"><\/figure>\n\n\n\n<p>Here\u2019s an example of the report you\u2019ll see in GA once you\u2019ve set this&nbsp;up:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1596\" height=\"1034\" class=\"wp-image-153377\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image52.jpg\" alt=\"Event tracking report in Google Analytics\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image52.jpg 1596w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image52-656x425.jpg 656w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image52-768x498.jpg 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image52-1536x995.jpg 1536w\" sizes=\"auto, (max-width: 1596px) 100vw, 1596px\"><\/figure>\n\n\n\n<p>Now you can easily decide how to order different items on your&nbsp;menus.<\/p>\n\n\n\n<p>You may be wondering, \u201cDoes this impact SEO?\u201d&nbsp;<\/p>\n\n\n\n<p>Potentially, yes. Google has filed patents on something called the \u201c<a href=\"https:\/\/www.seobythesea.com\/2016\/04\/googles-reasonable-surfer-patent-updated\/\">Reasonable Surfer Model<\/a>.\u201d This replaces part of the old \u201cPageRank\u201d algorithm, which relied on a \u201cRandom Surfer Model.\u201d<\/p>\n\n\n\n<p>The main difference between the two models is how they weigh the amount of PageRank passed. The Reasonable Surfer Model weighs the amount of PageRank passed based on the likelihood of a user clicking a link. The other model evenly distributes PageRank between all&nbsp;links.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1532\" height=\"558\" class=\"wp-image-153378\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image50.jpg\" alt=\"Explanation of the Reasonable Surfer Model\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image50.jpg 1532w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image50-680x248.jpg 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image50-768x280.jpg 768w\" sizes=\"auto, (max-width: 1532px) 100vw, 1532px\"><\/figure>\n\n\n\n<p>In short, if you reorganize links within a component or move different navigation components higher up the page, the more prominently displayed links may have more PageRank flow through them, so the target page could end up ranking better.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">11. Don\u2019t make users think (the best website menu design doesn\u2019t!)<\/h3>\n\n\n\n<p>The best website navigation is the one that follows web design conventions. This applies to all aspects of web design. That means following standard web practices like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keeping your primary header navigation at the top of the page rather than on the&nbsp;side.<\/li>\n\n\n\n<li>Using breadcrumbs to help users understand structure.<\/li>\n\n\n\n<li>Adding a link to the logo that takes you back to the homepage.<\/li>\n\n\n\n<li>Keeping the header\/footer consistent between pages.<\/li>\n\n\n\n<li>Styling links and other elements in a standardized way.<\/li>\n<\/ul>\n\n\n\n<p>If you\u2019d like to explore this topic further, I recommend <a href=\"https:\/\/www.amazon.co.uk\/Dont-Make-Me-Think-Usability\/dp\/0321344758\">Steve Krug\u2019s book titled \u201cDon\u2019t Make Me&nbsp;Think.\u201d<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">12. Test, test,&nbsp;test<\/h3>\n\n\n\n<p>To make your site navigation more effective, use split-testing tools like <a href=\"https:\/\/www.optimizely.com\/\">Optimizely<\/a> or <a href=\"https:\/\/vwo.com\/\">VWO<\/a> to create variants of your navigation and identify areas for improvement. Test things like link labels, placements, colors, and styles, as well as different types of website navigation like dropdown menus, tabs, and mega&nbsp;menus.<\/p>\n\n\n\n<p>By making small changes and measuring their performance, you can improve the your user-friendly website navigation and help visitors easily find the content they\u2019re looking for.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re unsure of what to test, consider using a <a href=\"https:\/\/www.hotjar.com\/\">behavior analytics tool like Hotjar<\/a> to gather insights via heatmaps, surveys, and recordings.<\/p>\n\n\n\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewBox=\"0 0 14 14\" style><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\" \/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style \/><\/g><\/svg><\/a><div class=\"link-text\" data-anchor=\"Keep navigation collaborative\" data-section=\"keep-navigation-collaborative\">\n\n\n\n<h2 class=\"wp-block-heading\">Keep website navigation collaborative<\/h2>\n\n\n\n<\/div><\/div>\n\n\n\n<p>Changing the navigation of a website can be challenging. This is because multiple stakeholders with different areas of expertise have their own demands. The merchandising, UX, customer service, and SEO teams all need to be satisfied.<\/p>\n\n\n\n<p>Often, difficulties with changing navigation occur for two reasons:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Usability isn\u2019t the primary reason for making the change.<\/li>\n\n\n\n<li>There is a lack of data to suggest the change will be worthwhile.<\/li>\n<\/ol>\n\n\n\n<p>For reason #1, if the change does not improve usability, the UX team will likely reject it. For instance, SEO teams often concentrate on PageRank and what search engines want. To persuade a UX expert, do not talk about that. Instead, discuss the secondary effect the change will have on users\u2014that\u2019s the more important element after&nbsp;all.<\/p>\n\n\n\n<p>For reason #2, any team could reject the change. Start by doing a \u200b\u200bwebsite navigation analysis and gathering insights on why you think the change will be positive. This can&nbsp;be:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Search demand data.<\/li>\n\n\n\n<li>Behavioral analytics data from Google Analytics or similar.<\/li>\n\n\n\n<li>Customer service feedback.<\/li>\n\n\n\n<li>Sales and revenue data.<\/li>\n<\/ul>\n\n\n\n<p>The ideal scenario here is each team works together using the different data they use daily to form the ideal navigation based on their expertise.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n\n\n\n<p>Website navigation is a broad topic. Each component has a lot of nuances and, usually, the decision on what components there will be and how they\u2019ll function has input from people with different types of expertise.<\/p>\n\n\n\n<p>Still, the return on implementing excellent site navigation is worth the time investment. Hopefully, this article has inspired how yours will&nbsp;work.<\/p>\n\n\n\n<p>Any further questions on website navigation? Find me <a href=\"https:\/\/twitter.com\/SamUnderwoodUK\">on Twitter<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>First, it affects your user experience\u2014helping users find what they want will result in more conversions.&nbsp; Second, it helps search engines. Good navigation will help them better understand how you\u2019ve organized your content and ensure PageRank flows to the most<span class=\"ellipsis\">\u2026<\/span><\/p>\n<div class=\"read-more\">Read more \u203a<\/div>\n<p><!-- end of .read-more --><\/p>\n","protected":false},"author":162,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[390,413],"tags":[],"coauthors":[423],"class_list":["post-152741","post","type-post","status-publish","format-standard","hentry","category-marketing","category-on-page-seo","odd"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Website Navigation Best Practices for SEO: Ultimate Guide<\/title>\n<meta name=\"description\" content=\"Great site navigation improves user experience and allows search engines to better understand its structure. Here&#039;s how to master it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahrefs.com\/blog\/website-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Navigation Best Practices for SEO: Ultimate Guide\" \/>\n<meta property=\"og:description\" content=\"Learn all about it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahrefs.com\/blog\/website-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO Blog by Ahrefs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ahrefs\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-09T03:43:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-18T15:12:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1.png\" \/>\n<meta name=\"author\" content=\"Sam Underwood\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Learn all about it.\" \/>\n<meta name=\"twitter:creator\" content=\"@SamUnderwoodUK\" \/>\n<meta name=\"twitter:site\" content=\"@ahrefs\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/\"},\"author\":{\"name\":\"Sam Underwood\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/7a4e7e6b862119be5f43a0c5783888d5\"},\"headline\":\"Website Navigation Best Practices for SEO: Ultimate Guide\",\"datePublished\":\"2023-02-09T03:43:32+00:00\",\"dateModified\":\"2024-03-18T15:12:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/\"},\"wordCount\":3957,\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/website-navigation-best-practices-for-seo-by-sam-underwood-marketing.jpg\",\"articleSection\":[\"General Marketing\",\"On-Page SEO\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/\",\"name\":\"Website Navigation Best Practices for SEO: Ultimate Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/image38-1.png\",\"datePublished\":\"2023-02-09T03:43:32+00:00\",\"dateModified\":\"2024-03-18T15:12:20+00:00\",\"description\":\"Great site navigation improves user experience and allows search engines to better understand its structure. Here's how to master it.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/website-navigation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/image38-1.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/image38-1.png\",\"width\":1999,\"height\":1356},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"name\":\"SEO Blog by Ahrefs\",\"description\":\"Link Building Strategies &amp; SEO Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#organization\",\"name\":\"Ahrefs\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/ahrefs-logo.png\",\"width\":2048,\"height\":768,\"caption\":\"Ahrefs\"},\"image\":{\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Ahrefs\\\/\",\"https:\\\/\\\/x.com\\\/ahrefs\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ahrefs\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/ahrefscom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/#\\\/schema\\\/person\\\/7a4e7e6b862119be5f43a0c5783888d5\",\"name\":\"Sam Underwood\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/sam-underwood.jpg0aa3181310d847d8be2845189fc2b794\",\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/sam-underwood.jpg\",\"contentUrl\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/sam-underwood.jpg\",\"caption\":\"Sam Underwood\"},\"description\":\"Sam Underwood is a solo consultant helping ecommerce businesses grow their organic revenue via on-page SEO, technical SEO, and content strategies.\",\"sameAs\":[\"https:\\\/\\\/www.samunderwood.co.uk\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/samunderwooduk\\\/\",\"https:\\\/\\\/x.com\\\/SamUnderwoodUK\"],\"url\":\"https:\\\/\\\/ahrefs.com\\\/blog\\\/author\\\/sam-underwood\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Navigation Best Practices for SEO: Ultimate Guide","description":"Great site navigation improves user experience and allows search engines to better understand its structure. Here's how to master it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahrefs.com\/blog\/website-navigation\/","og_locale":"en_US","og_type":"article","og_title":"Website Navigation Best Practices for SEO: Ultimate Guide","og_description":"Learn all about it.","og_url":"https:\/\/ahrefs.com\/blog\/website-navigation\/","og_site_name":"SEO Blog by Ahrefs","article_publisher":"https:\/\/www.facebook.com\/Ahrefs\/","article_published_time":"2023-02-09T03:43:32+00:00","article_modified_time":"2024-03-18T15:12:20+00:00","og_image":[{"url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1.png","type":"","width":"","height":""}],"author":"Sam Underwood","twitter_card":"summary_large_image","twitter_description":"Learn all about it.","twitter_creator":"@SamUnderwoodUK","twitter_site":"@ahrefs","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/#article","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/"},"author":{"name":"Sam Underwood","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/7a4e7e6b862119be5f43a0c5783888d5"},"headline":"Website Navigation Best Practices for SEO: Ultimate Guide","datePublished":"2023-02-09T03:43:32+00:00","dateModified":"2024-03-18T15:12:20+00:00","mainEntityOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/"},"wordCount":3957,"publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/website-navigation-best-practices-for-seo-by-sam-underwood-marketing.jpg","articleSection":["General Marketing","On-Page SEO"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/","url":"https:\/\/ahrefs.com\/blog\/website-navigation\/","name":"Website Navigation Best Practices for SEO: Ultimate Guide","isPartOf":{"@id":"https:\/\/ahrefs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/#primaryimage"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/#primaryimage"},"thumbnailUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1.png","datePublished":"2023-02-09T03:43:32+00:00","dateModified":"2024-03-18T15:12:20+00:00","description":"Great site navigation improves user experience and allows search engines to better understand its structure. Here's how to master it.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahrefs.com\/blog\/website-navigation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/website-navigation\/#primaryimage","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/02\/image38-1.png","width":1999,"height":1356},{"@type":"WebSite","@id":"https:\/\/ahrefs.com\/blog\/#website","url":"https:\/\/ahrefs.com\/blog\/","name":"SEO Blog by Ahrefs","description":"Link Building Strategies &amp; SEO Tips","publisher":{"@id":"https:\/\/ahrefs.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahrefs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ahrefs.com\/blog\/#organization","name":"Ahrefs","url":"https:\/\/ahrefs.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/ahrefs-logo.png","width":2048,"height":768,"caption":"Ahrefs"},"image":{"@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Ahrefs\/","https:\/\/x.com\/ahrefs","https:\/\/www.linkedin.com\/company\/ahrefs\/","https:\/\/www.youtube.com\/c\/ahrefscom"]},{"@type":"Person","@id":"https:\/\/ahrefs.com\/blog\/#\/schema\/person\/7a4e7e6b862119be5f43a0c5783888d5","name":"Sam Underwood","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2021\/09\/sam-underwood.jpg0aa3181310d847d8be2845189fc2b794","url":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2021\/09\/sam-underwood.jpg","contentUrl":"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2021\/09\/sam-underwood.jpg","caption":"Sam Underwood"},"description":"Sam Underwood is a solo consultant helping ecommerce businesses grow their organic revenue via on-page SEO, technical SEO, and content strategies.","sameAs":["https:\/\/www.samunderwood.co.uk\/","https:\/\/www.linkedin.com\/in\/samunderwooduk\/","https:\/\/x.com\/SamUnderwoodUK"],"url":"https:\/\/ahrefs.com\/blog\/author\/sam-underwood\/"}]}},"as_json":null,"json_reviewers":[149],"_links":{"self":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/152741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/users\/162"}],"replies":[{"embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/comments?post=152741"}],"version-history":[{"count":0,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/posts\/152741\/revisions"}],"wp:attachment":[{"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/media?parent=152741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/categories?post=152741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/tags?post=152741"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/ahrefs.com\/blog\/wp-json\/wp\/v2\/coauthors?post=152741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}