« Back to Blog Home

Search Engine Optimization

Without a doubt, if you’ve ever made a design that’s up to snuff as far as UX is concerned, you’ve implemented a Javascript dropdown menu. Surely, you immediately noticed the detriment that dropdown menus bring to a design in terms of SEO. There exists a common misconception that search engine crawlers will not process javascript, and this misconception manifests itself when a user begins using JavaScript dropdown menus. Now first things first, let’s get one thing straight: GoogleBot does indeed process Javascript. With this said, it’s important to note that GoogleBot can only process JavaScript to a limited extent.

“But Google hasn’t been indexing my dropdown menu content!”

And there’s a very valid reason! GoogleBot can’t activate click triggers. So, if you’ve created a dropdown menu utilizing jQuery, GoogleBot can’t fire the click methods you’ve placed in your code. This proves to be very detrimental when Google indexes your site. Take for example our very own site, Thought Space Designs. If you look at our portfolio section, you’ll notice that all of our actual work (which is pretty vital content for Google) is actually hidden by default. It isn’t until the user clicks on a header that our portfolio is displayed for them to see. Unfortunately, since Google can’t actually click on these headers to display the underlying content, our portfolio objects go unnoticed by the bot. However, there is no reason to fret, as there’s a very simple solution to this problem.

So What’s The Fix?

So in a standard jQuery dropdown menu setup, the element in question will have “display:none;” assigned to it in the CSS, and when clicked, the JavaScript will toggle this to “display:block;” or “display:inline;” etc… In order to allow Google to see this content, simply leave the default display value for your element (block, inline, etc), and then in your jQuery, hide the element on document load. For example, say we had a header with id=”my-header” and a div with id=”my-div”. If we wanted to make this div toggle display every time the header was clicked, but yet still make the content visible to Google, we would do something like this:

The CSS

#my-div{
   display:block;
}

The jQuery

$(function(){
   $("#my-div").hide();
   $("#my-header").click(function(){
      $("#my-div").toggle();
   }
   );
}
);

As you can see, we simply left the block visible through CSS, and then using jQuery we called the hide() function on it at page load. We then added a simple line of script to call the toggle() function on #my-div when #my-header is clicked. If you’ve been learning from this post, you may be asking yourself a very vital question right about now:

Wait, since GoogleBot processes JavaScript that doesn’t require triggers, won’t the hide() function be processed, thus hiding the content from Google anyway?

This observation is correct! However, due to the way jQuery operates, Google is able to read all of the content on your site before it is hidden. This is because jQuery functions do not execute functions until the DOM has been loaded. This means that in the time between when your hidden div’s content appears and when the entire page is loaded, GoogleBot has a small grace window to index your entire site.

This can readily be seen in our most recent site design. We laid out both our “services” and “portfolio” drop downs using this method. If you do a Google image search for “Thought Space Designs”, you’ll see that images that exist within our portfolio dropdowns show up in the results. This demonstrates that Google has a chance to read the content before it is hidden.

Keep in mind, this method does not aid Google in realizing or utilizing your drop down menus, it simply allows the content hidden within to be read by the bot. If you care about your SEO, I highly recommend updating your site to use this method. After all, content is king.


Leave a Reply

*

Comments On This Post

  • Craigmon
    Craigmon

    This article seems to indicate that GoogleBot does indeed index content that is set to display:none.
    http://seotesttool.com/blog/does-the-google-bot-index-css-hidden-divs/

    If the content is in the html the bot doesn’t have to “click” to see it. Google may or may not treat content that is hidden as less relevant, or even spam-ish, but that may be harder to test.

    • Jareth Tackett
      Jareth Tackett

      I completely agree. This article is outdated and is used mainly for historical purposes. In all honesty, this method probably shouldn’t be used.

      • MAPSON
        MAPSON

        So, what is the best way to handle this now?

        • Jareth Tackett
          Jareth Tackett

          Nowadays, I use Standard HTML5 markup for my nav (something like this):

          Nav Item
          Nav Item
          Nav Item

          Nav Item

          Sub nav item
          Sub nav item


          And then I just use CSS to hide and show the nav on hover, something like this:

          #site-nav>ul>li>ul{
          display:none;
          }

          #site-nav>ul>li:hover>ul{
          display:block;
          }

          And whatever other styling you need for your list. Your CSS doesn’t affect GoogleBot’s ability to see your HTML in any way as I’ve implied in my article (I really need to update it). The bot will simply read your nav list as it’s part of the HTML document.

          So really, just hide and show your nav however you want. I’m not sure whether to remove this article or stick a giant “this is wrong” disclaimer at the top.