javascript - Best practices for HTML dropdown menus and SEO impact - Stack Overflow

admin管理员组

文章数量:1279214

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?

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?

• javascript
• html
• seo
• drop-down-menu

Share Improve this question Follow edited Feb 7, 2011 at 21:48 Endophage 21.5k1313 gold badges6161 silver badges9393 bronze badges asked Feb 7, 2011 at 21:40 MaxMax 31111 gold badge33 silver badges1212 bronze badges 3

• I think whatever is JavaScript-generated isn't SEO wise because most crawlers deactivate JS. – JCOC611 Commented Feb 7, 2011 at 21:42
• you can use selectbox UL LI replacement so when JS is disabled Ordered List still remain. ;) – Luca Filosofi Commented Feb 7, 2011 at 21:46
• Added some relevant tags. JCOC611 is correct that crawlers look at the page with js turned off. It would be a very bad idea to output your menu with js for this reason as internal linking is extremely important in getting your site indexed. – Endophage Commented Feb 7, 2011 at 21:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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 es 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./2009/03/24/designing-drop-down-menus-examples-and-best-practices/

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./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./dropdown-menus-no-thanks

本文标签： javascriptBest practices for HTML dropdown menus and SEO impactStack Overflow