SEO for Main Navigations

Question

My question is simple... To what extent does your primary navigation [and secondary navigations] have on SEO for your website?

My particular case is this: I have "two" primary navigations. One that is served with specific styling for desktop users, and the other which serves styling for mobile users. By separate, I do mean I had two separate chunks of HTML for each. The primary navigation for the desktop was contained within <nav> tags, the other primary nav for mobile was just some <div>s with an ID

That said, I combined these two HTML structure and the styles, the thinking was that I should have only one primary navigation. Now, a few months later I need to re-style the desktop side navigation, and it is proving very difficult as my mobile nav is very complex. My task would be 100 times easier if I could simply move back to having two separate HTML structures ofr the two separate navs. When browsing via mobile, the first set of html is set to display: none; and second set is display: block; Inverse that for browsing from Desktop.

So Ultimately... Is it safe SEO wise to have two "iterations" of my primary navigation, one using <nav> and one using <div id="nav">?

Answer 1

Ideally you want to carry on using only one navigation menu and style the menus using CSS viewpoint for desktop and mobile view, Google is fully aware of content within display:none and will see duplicate links, even though this may not result in bad SEO I believe that too many on page links do result in negative SEO.

Zurb Foundation or Bootstrap are fine examples of how you can make any menu viewable on a mobile device that is easy to use, check out: http://webdesigntutsplus.s3.amazonaws.com/tuts/312_bs/My-Bootstrap-Site-NAVBAR/navbar-examples.html and re-size the page to mimic that of a mobile device and your see its very neat.

Now the pure reason I say its better to have one menu is for SEO purposes.. Since if you opt to revert back to 2 menus your ultimately increasing links on the page unnecessary, this also brings into question that your doubling up on keywords in NAV links which isn't necessary bad but I would avoid this.

With good styling methods you should be able to custom each menu under 2 different devices exactly how you want it to be without creating additional nav's or div's.

Furthermore, if your insisting on using 2 menus then you referred to using one div, one nav... it's worth noting that you can use as many nav elements on the page as you like and no way are you limited in the use of just one - So no need to use one div, one nav, just use 2 navs - Google will still see double links either way.