Welcome to WebmasterWorld Guest from 34.207.78.157

Forum Moderators: Robert Charlton & goodroi

Message Too Old, No Replies

Most SEO friendly on-hover drop-down menu?

     
11:43 am on Oct 21, 2014 (gmt 0)

Junior Member from ES 

5+ Year Member

joined:May 7, 2014
posts: 41
votes: 2


Can you suggest me which drop-down menu is the most SEO OK that will not cause any problems and that Google will be able to crawl it with no problems.

I want the one that show whenever you mouth over it.

Please share some code!
9:39 pm on Oct 21, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator goodroi is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:June 21, 2004
posts:3464
votes: 360


If you are looking for the most SEO friendly internal links then you might want to focus more on embedded links in relevant content and less on stuffing navigation links.
9:52 pm on Oct 21, 2014 (gmt 0)

Moderator

WebmasterWorld Administrator buckworks is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 9, 2001
posts:5823
votes: 153


Look for a menu that uses CSS and not javascript to display the dropdown items.
10:32 pm on Oct 21, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4296
votes: 288


Lucy24 posted a very good example in the middle of a long tutorial type discussion here a few months ago, it is pretty far down the page here: [webmasterworld.com...]

Because links to resources aren't always set in stone I'm adding a quote here:
There are different ways of making dropdown menus. The pure-CSS method (no javascript) looks something like this, off the top of my head.

:: detour to look up analogous code of my own, because "off the top of my head" turns out to be an overstatement ::

CSS:
ul.dropmenu li {display: inline-block;}
ul.dropmenu ul {display: none;}
ul.dropmenu li:hover ul {display: block;}

HTML:
<ul class = "dropmenu">
<li>Good Stuff
<ul>
<li>Hidden 1</li>
<li>Hidden 2</li>
<li>Hidden 3</li>
</ul>
</li>
<li>Better Stuff
<ul>
<li>Hidden 1</li>
<li>Hidden 2</li>
<li>Hidden 3</li>
</ul>
</li>
</ul>

Did you catch the
ul.dropmenu li:hover ul

?
That's the magic that makes it all work. Things preceded by a colon are called "pseudo-classes" [w3.org]. This particular one means, reading from right to left:

"This style applies to an unordered list (ul)
that's inside of a list item (li)
which the user is currently hovering on (:hover)
when the whole thing is inside an unordered list of class 'dropmenu' (ul.dropmenu)"

And thanks again to lucy24 for sharing it.
10:49 pm on Oct 21, 2014 (gmt 0)

Moderator This Forum from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
posts:12292
votes: 389


Large drop-down menus, even if they are crawler-friendly, are IMO generally neither user friendly nor SEO friendly.

While the SEO of some 800-pound gorilla sites can survive using them, many smaller sites cannot, because they spread your inbound link-juice from home into too-many choices, both for the user and for Google.

Here's an old discussion about large site SEO that might be useful....

For Mega-Site SEO, Structure is King - not Content
http://www.webmasterworld.com/google/4238574.htm [webmasterworld.com]

Also see this important discussion...

The "Mega Menu" Problem and Google Rankings
Jul 1, 2008
http://www.webmasterworld.com/google/3687528.htm [webmasterworld.com]

Large drop-downs also don't work well with Responsive Design in mobile. I've seen differing opinions in how best to deal with large menus in mobile.
6:44 am on Oct 22, 2014 (gmt 0)

Preferred Member

5+ Year Member

joined:June 10, 2011
posts: 537
votes: 0


I think Breadcrumb (navigation) manu is the most SEO friendly navigation technique.
10:23 am on Oct 22, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member redbar is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Oct 14, 2013
posts:3188
votes: 473


Whichever you go for ensure that it works with touch screens, tablets and phones otherwise it's utterly pointless:-))
11:20 am on Oct 22, 2014 (gmt 0)

Full Member

10+ Year Member Top Contributors Of The Month

joined:Feb 22, 2008
posts: 332
votes: 0


@RedBar:
Many webmaster/CMS prefer parent items which open via hover instead of clicking. But mobile does not support hover mostly.
I have been very surprised to discover this recently.
12:20 pm on Oct 22, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 7, 2006
posts: 1102
votes: 122


@surenot

I have tried various methods, but currently use a breadcrumb menu, combined with a mouseover (hover) JS drop-down menu where the script is in a folder that is blocked in robots.txt.

This stops spiders from having to trawl through a big on-page script, or from seeing a massive collection of links (which, as they have the breadcrumb menu, are irrelevant to them) in the js file.

The breadcrumb menu works best for spiders, and ensures that search engines can see your site hierarchy (which will be lost if you have a huge every-page-links-to-every-page CSS menu). It also ensures your site can be navigated without js (although most do, not all users have js enabled in their browsers).

This method seems to work for users and spiders without doing any ranking damage, but what is most suitable will depend on site size and structure.

A lot of the bigger players in my sector use expanding lists (so on mouseover - or sometimes clicking - a section titel you see all the subheadings and sub-pages in that section at once). I personally find that layout best for my own navigation of other sites, and I may implement that as an alternative to my current menu in the near future.

And...

mobile does not support hover mostly


...which can be a pain, especially if clicking opens the link, but some don't properly implement CSS either, and without it CSS expanding menus just look like a massive site-map.
1:01 pm on Oct 22, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member redbar is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Oct 14, 2013
posts:3188
votes: 473


But mobile does not support hover mostly.


Yep, which is why I spent two years on and off developing my html5 responsive template testing it across all desktop browsers and as many Android/tablet/mobile browsers as I could.

Believe me, some of those Android browsers are horrible however, fortunately, the mainstream ones are ok, nevertheless it had to be done with the ever-increasing usage of mobile.

Forget mobile and you're basically telling the majority of users worldwide you're not interested in them, then again I have a global user base.
4:08 pm on Oct 22, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Apr 30, 2008
posts:2630
votes: 191


but currently use a breadcrumb menu, combined with a mouseover (hover) JS drop-down menu where the script is in a folder that is blocked in robots.txt.

This stops spiders from having to trawl through a big on-page script, or from seeing a massive collection of links (...)


I second that. If you use hover menus, unless your site is very small and narrowly focused, it is a good idea to stop bots seeing every menu link on every page as this will dilute focus of sections of the website. JS drop-down menu with JS blocked in robots.txt is one way on how to do it.
3:21 am on Oct 23, 2014 (gmt 0)

Full Member

10+ Year Member Top Contributors Of The Month

joined:Feb 22, 2008
posts: 332
votes: 0


@RedBar:
Did you change from hover to click-dropdown? If yes, how?

My redesign with Wordpress again and again lets me wondering about this and that.... but many CMS and webmaster prefering hover-dropdowns in spite of many millions (even growing) mobile-users is still number one on my list. They often do incredible things for example in order to win some ms loading time, but hey, millions mobile user are prevented from half of the site...who cares...
6:59 am on Oct 28, 2014 (gmt 0)

Moderator This Forum from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
posts:12292
votes: 389


Google's updated guidelines about blocking javascript might be causing some rethinking now about whether to block js in navigation.

Thought it worth mentioning in light of current discussion here...

Google Updates Webmaster Guidelines: Crawling Page Assets May Help SEO
http://www.webmasterworld.com/google/4711411.htm [webmasterworld.com]
12:45 pm on Oct 31, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 7, 2006
posts: 1102
votes: 122


Bones just posted a link on another thread ([webmasterworld.com ]) to a John Mueller discussion:

[youtube.com ]

Bones identifies a section about 41m 15s in discussing disavow files, but immediately before it (at about 39m 30s) John Mueller discusses "Do internal backlinks affect Penguin?".

From what he says, I think it quite possible that a css menu (with a large number of backlinks using page-subject anchor-text) could trigger a keyword-stuffing penalty,

It would be interesting to hear whether anyone with a large css menu was penalised by Penguin.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members