2

I have a navigation set up like so:

<nav>
    <ul>
        <li>Home</li>
        <li data-dropdown="page_1">Page_1</li>
        <li data-dropdown="page_2">Page_2</li>
    </ul>
</nav>

<div class="dropdown">
    <ul id="page_1">
        <li>Dropdown Link</li>
    </ul>
    <ul id="page_2">
        <li>Dropdown Link</li>
    </ul>
</div>

All the dropdowns are initially hidden and then they are shown based on data-dropdown when hovering on the navigation. It works perfect, but I'm really concerned about whether google will crawl the links if it's hidden on page load. What's the best way to approuch this?

Improve this question
0

1 Answer 1

Reset to default
3

Yes, Google and other bots will still see those links just fine so don't worry. It is always a good idea to have an xml sitemap as well, this will ensure Google finds all of your content quickly.

Using display:none to hide large amounts of text and/or keywords can be considered cloaking - you would want to avoid this or risk getting penalized by SE's. But masking something like this for usability purposes is just fine and won't have any negative affect on your site rankings or crawl rate.

If you are absolutely opposed to using display:none you could always go the javascript route, but I would imagine Google is smart enough to treat things hidden with JS in the same was as display:none.

Improve this answer
1
  • 1
    Nonetheless, it's usually a better idea to use progressive enhancement/unobtrusive JS. In this case, his page would not degrade gracefully on non-JS-enabled browsers. It's not Google not crawling these pages that he should be worrying about, but whether someone with JS disabled or using a touchscreen device or keyboard navigation would be able to access these menu items.
    – Lèse majesté
    Feb 20, 2013 at 9:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.