1

Whilst it may appear this question has been asked before concerning mobile and desktop versions of navigation elements, it hasn't in this way.

It was established in the accepted answer to the below question that having duplicate content inside a <nav> with one visible on mobile and another on desktop (via breakpoints) was not likely to negatively impact SEO. SEO - Responsive Website and Duplicated Menus

On the assumption that the above is still the general consensus (please advise if not), then how about a slightly different setup.

  1. A hamburger menu that contains 5 major links and 5 secondary links.
  2. On mobile the hamburger menu is made visible via a toggle button.
  3. On desktop the five major links are also visible in a sticky nav bar. When the hamburger toggle button is pressed the sticky nav bar animated away and the same nav bar as on mobile with both sets of links is made visible.

See this image:

Example to show hows desktop nav, expanded desktop nav and expanded mobile nav.

Stylistically this suits the user experience we want, however, it will duplicate the 5 main links inside the nav bar in code. The nav bar items and those in the hamburger menu will not be visible at the same time but the will use css transitions to fade the nav bar out. So technically there is a duplicate of major links here but it is not being used to cheat SEO. It is merely a design choice.

Is it too much of an SEO implication?

Code concept:

<nav>
  <div class="nav-bar>
    <a href="/something/1">Link 1</a>
    <a href="/something/2">Link 2</a>
    <a href="/something/3">Link 3</a>
    <a href="/something/4">Link 4</a>
    <a href="/something/5">Link 5</a>

    <button>Hamburger Toggle</button>

  </div>

  <div class="nav-full>
    <div class="nav-full-major">
      <a href="/something/1">Link 1</a>
      <a href="/something/2">Link 2</a>
      <a href="/something/3">Link 3</a>
      <a href="/something/4">Link 4</a>
      <a href="/something/5">Link 5</a>
    </div>
    <div class="nav-full-secondary">
      <a href="/something/6">Link 6</a>
      <a href="/something/7">Link 7</a>
      <a href="/something/8">Link 8</a>
      <a href="/something/9">Link 9</a>
      <a href="/something/10">Link 10</a>
    </div>
  </div>
</nav>
Improve this question
1
  • 1
    I have found a similar example of this. The question, comments, accepted answer and comments of the accepted answer imply that this should not be too much of a problem in terms of SEO. Whilst the question is over ten years old one of the comments on the accepted answer has tested it with google ranking as recently as 2020. webmasters.stackexchange.com/questions/71746/… Commented Aug 21 at 11:22

1 Answer 1

Reset to default
0

Having duplicate nav elements for mobile and desktop usually isn’t a big SEO issue—Google’s pretty smart about menus these days. Keeping your navigation tidy for users matters most!

Improve this answer
2
  • Got any references? Commented Sep 23 at 21:24
  • @Hesham. Thanks but that isn't quite the question that was asked. It is about the use of a duplicate set of links inside the nav element. A brief set is visible (desktop only) initially and when toggle is pressed those vanish and a more extended set appear instead. Take a look at the included images for an example. Commented Sep 29 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.