Tue 25 Aug 2009
How Many Links Is Too Many In A Website Dropdown Navigation System?
Blurb by Shaun Anderson (Hobo)
I’m intending to take part in Google Webmaster Forum a bit more but I chipped in an answer the other day about how many links in a dropdown are best:
The question was:
Building a new site with over 5000 product pages. Trying to get visitors to a product page directly from the homepage. Would prefer to use a two-level drop-down on homepage containing 10 brands and 5K products, but I’m worried a huge source code will kick me in the pants.Also, I have no idea how search engines treat javascript links that can be read in HTML. Nervous about looking like a link farm.
I answered:
Hobo – I’d invest time in a solid structure – don’t go for a java script menu it’s too cumbersome for users. Sometimes google can read these sometimes it cant – it depends on how the menu is constructed. You also have to remember if google can read it you are going to have a big template core code (boilerplate) on each and every page vying alongside flimsy product information – making it harder for google to instantly calculate what the indicidual products page is supposed to rank for.
I would go for a much reduced simple sitewide navigation in the menu array,
Home page links to categories > Categories link to products > Products link to related products
when you go to category links the links relevant in that category appear in the menu. Don’t have all that pop down in a dropdown – not good for users at all. Keep code and page load time down to a minimum…
I thought seeing as somebody from Google agreed, it was worth posting on my own blog as I don’t really touch on navigation systems in this way.
The most important thing for me when designing website navigation systems is:
- Make it easy for the user to navigate
- Make it easy for Google to get to your content and index your pages
Many will go on about what is the best way to create a site structure (which comes in the main from your sitewide navigation) – use categories etc.
In terms of navigation from a landing page (all your pages are potential landing pages) what do you think the benefits are of giving people 5000 navigation options. Surely if the page meets their requirements, all you need is two buttons. Home, and buy now! 
in terms of site structure – to be honest – I do not think categories in a site structure (on anything but the largest site) helps your product pages OR BLOG PAGES rank BETTER (I mean, where is the evidence for that, really although every seo in the land tells you that? I have TESTED THIS OVER AND OVER AGAIN – note i don’t have categories on this blog but all my pages rank very well – it’s far more important JUST TO GET AS MANY OF YOUR SITE PAGES INDEXED AS POSSIBLE and RANKING HIGH IN GOOGLE OVER AS MUCH TIME AS POSSIBLE – forget about making your 1,000 products rank better via an internal navigation system by making them more relevant by passing through category or tag pages, just get them to rank with the keyword phrase you want to rank for in your navigation system). Be aware how Google might treat links with a first link priority.
Once you realise getting your product pages indexed is the key, don’t go for a mega-menu just because you think this is a quick way to solve your indexing problem. Again, if you look at the Hobo site, I go for a minimal sitewide navigation system and prefer to use contextual links (links within my content) and links to related pages as a way Google can find content. Using this system I keep over 600 pages indexed in Google all with good pagerank.
The tree system I mentioned above is a good quick and easy system of getting a site like a ecommerce website indexed but never use a mega menu – you don’t need to (why do you want to obscure your content either at any time with a drop down menu?). I’ve considered in the past too that obscured links in drop down tags (<li>or <dd>) could well be devalued by Google (it’s an easy way to hide uninportant links). I’ve not had time to test that thoroughly though.
With a site structure, it’s all about getting your content indexed. That’s it. Depending on how much pagerank you have, you might need to ensure you are linking to your product pages you NEED to rank in Google OFTEN FROM MANY PAGES WITH PR to ensure these pages have enough Pagerank to GET INTO GOOGLE’S MAIN INDEX. Think about that. If you can’t be bothered tell Google what your most important pages are on your site via your own internal navigation structure, why should Google bother ranking it at all or assigning it pagerank?
I test a lot with this site, but that’s not to say it’s perfect. I’m aware too, I have a decent amount of real PR to play with which many wont. I don’t think there is a perfect system, just a sensible one.
For instance, I know I need to make my call to action button clearer, and i’m not satisfied with how I bring to attention the amount of information on this site. I have a few ideas (like my seo page for beginners) but unfortunately I’m too busy to implement at the moment.
PS – A basic HTML site map is an old friend.
Did you know when you link to a Hobo SEO post we have search engine friendly links back to your site if approved? Our comments are also search engine friendly you know (once you've commented on a few posts)! Do you need any more encouragement to get involved in the conversation ;)
Hi Shaun, another great article.
I have a client with a online shop with 800+ products in it that is just about to get a revamp to Magento. And i was trying to think what was the best way to create a user friendly menu.
You mention about obscuring content with drop down menus. Does that apply to all dropdown menus, even ones just using css and ?
I have a clients website with 20 pages of which uses drop down menus with css. Only the home page has PR none of the other pages have PR. First time i used this menu so I can only assume its that.
Would it be better just to have a main horiztontal navigation bar with *a links* (edited becuase of wordpress formating)
and then sub navigation in a sidebar?
Thanks!
Tom
Hi Tom yes I think so.
Well said. I’ve always preferred the primary secondary menu combination over a drop down menu that basically acts like a clunky site map.
Once we get past the SEO issues, we all see how this impacts usability. Clients often want drop-downs because they heard that it is bad to make users click too many times. But a primary/secondary system (or breadcrumb trail for large e-commerce sites) can make it easy for users to get to most pages within 2-3 clicks.
Clients also say they want to make things easy by showing visitors all their options at once. But too many choices, be they on a cluttered home page or a drop down can be more confusing. I blogged about this awhile ago in Your home page is NOT your index; it’s your store front. If we have too many choices, then the easiest choice to make is to simply leave the site. Or if we use a drop down and try to cram it with small phrases, we may not be giving users enough info to know which option is right for them–so they keep having to click multiple options anyway. A primary menu can guide users to obvious topical areas from which they can more easily discern which links in the secondary menu will solve their problem.
Then of course drop downs can also impede accessibility, whether they are hard to follow if one doesn’t have steady hands (especially fly-out menus) or if they aren’t coded properly to support speech readers.
Drop-down menus are used like duct-tape to treat a symptom rather than the underlying navigation problem. But as you rightly point out they can be the cause of other problems too. Thanks for posting this here.
Good stuff, Shaun.
I’d like to add that I would definitely advise not to use display:none; or something similar in a drop down menu. If seen this causing problems numerous times, and removing the display:none; resolved 99% of these problems.
This kind of issue is very subjective and more often than not is determined by factors such as design issues, ease of maintenance, personal preference, and ease of coding.
There is no one-size-fits-all approach that can be copied and pasted into every template.
BTW — I can’t see why removing display:none (ie as written by the guy before me) should make a difference. Perhaps I’m missing something.