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.