Best practices for HTML dropdown menus and SEO impact

Question

When doing HTML dropdown menus that are CSS specific, you have some unordered list type structure up near the top of the code. If your dropdown links to hundreds of pages, does having this large unordered list at the top of every page's code hurt that page's SEO (because there is all of that non-page-specific code at the top)? I only ask because I noticed that my Google Mini search results were skewed by the UL at the top until I find a Google Mini specific tag that caused it not to index that section.

Would it be better to use javascript to inject the contents of the UL from the bottom of the code or to have the UL at the bottom but use CSS positioning to get it up top?

Not sure if my question is clear or not. Thoughts?

Answer 1

You've asked a couple of questions:

Short Answer: it's the number of links, not how they are coded that is the issue.

Long Answer:

If your dropdown links to hundreds of pages, does having this large unordered list at the top of every page's code hurt that page's SEO (because there is all of that non-page-specific code at the top)?

It can, but like anything on the web, it comes down to implementation. It's not so much the code used to put the menu that would impact your SEO, but more the fact that you're dividing your page's linking equity (PageRank) by a larger number of links. This isn't an issue if you are a popular site with high PR, but if you're not, you'd want to be more selective about how/where you're linking internally. The actual code used to make up that navigation isn't as much of an issue as the way you're including those links, since search engines mostly ignore the markup (including HTML5).

Would it be better to use javascript to inject the contents of the UL from the bottom of the code or to have the UL at the bottom but use CSS positioning to get it up top

This will help with the content being closer to the H1/body tag being given preferential weighting, but you're still not dealing with the number of links issue. I have tried the CSS positioning method as a test, and it had a negative impact on the value of the main navigation elements because they were given "footer" weighting in the eye of the search engines.

Summary: So the answer really is, for SEO - don't use mega-menus if you're a small site because you simply can't spread the link equity proportionately to the pages that need it - you'll need to ensure your most important pages are linked to from your homepage, then link deeper as you traverse your site architecture. If you've got PR of 6 or higher or a lot of higher PR pages, then you could consider linking deeper from your main menus.

As for usability issues - that's been pretty much debunked by the large number of large sites that use them successfully.

Further reading (and examples): - http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

Answer 2

The best direct solution to your question is to use the HTML5 <nav> element - enclose your CSS menus inside a <nav> element, and Google & friends will see that an know that everything inside it is menu structure. It's the semantic web at work.

See http://html5doctor.com/nav-element/ for a good article about it.

If you can't use HTML5 (and there's no reason why not, unless you need to support IE with Javascript switched off), you can achieve a similar effect by using well named classes and IDs to emphasise to Google that this section of the page is menu structure. Google sees enough CSS menus these days that they should be able to work it out without having too much of an SEO impact for you.

The problem you're going to have is that having a large menu with hundreds of entries harms your site's general usability as much as if not more than it harms SEO. See this site for a (slightly opinionated but still valid) article about why large drop-down menus are bad, whatever method is used to create them: http://www.message.uk.com/dropdown-menus-no-thanks