Responsive Navigations & SEO

[Killah]

When you create a website with responsive design steps for 3 or 4 viewport steps, you end up with 3-4 navigations in the html that the Google Bot reads without CSS ("read as Google Bot" in Google Webmaster Tools). If you have 50 links in the navigation you end up with 150 or 200 links total. Unless you cut down the navigation to significantly less links on some viewport steps, this amount of links might influence the flow of juice of the internal navigation a lot.

What is your opinion about this and how do you deal with masses of links that multiple fixed viewport steps create?

[rish3]

Pick one of the three schemes and map the others back to it with a <link rel='canonical' href='THE_PICKED_SCHEME'>. Harder, as they probably don't map 1:1, so you would need some code to map pages from one scheme to the other.

Simpler: pick one to be indexed and emit <meta name='robots' content='noindex'> tags for the others.

Edit: I think I may have misunderstood. I thought you were talking about, for example, more pagination on category page for a small screen, and thus, duplicate pages.

A second read reveals you're linking to the same pages, just multiple times. Like perhaps some navigation links is in a <div> that's hidden on a desktop, but visible on a mobile, and vice versa for a different <div>. Is that correct?

If so, one approach is to have the page just emit both divs empty, and then conditionally change the content of the div that matters. That brings a little complexity, as you would have to watch for window resizing to put the content back where it belongs. You would also have to match all of your media queries in css with equivalent ones in javascript so that the content fill happens at the right time.

[webcentric]

First, if you can generate a single "menu" which is what I believe you mean by "navigation," you'll be better off. For example, if you can detect the device (desktop, phone, tablet) on the server you can generate exactly the menu you need where you need it. I went through this process when initially going to a responsive design and found that I could get away with a single menu (dynamically altered and located to suit the device).

While 50 links isn't an absurd proposition, you might also find that reorganizing those links into buckets (like top-level categories) can help. Top-level links lead to sub-category links on another page for example rather than trying to create a single menu for your whole site structure on every page.