Is Your Tabbed Menu Written Backwards? Don’t Hide From Search Engines!

Most of the tabbed content I see online is implemented backwards.

They have on-click javascript events that “show” hidden content when a tab is clicked. It is a perfectly white-hat way to get more content into a limited amount of page real estate. But why not show content to non-java users instead of hiding it? Or, to put it another way – why hide all content until the user executes javascript when you could show all content UNLESS the user agent can execute javascript?

Yes, Google can see javascript, crawl it, execute it, follow the links, etc… but does that mean they’re going to apply the found copy to your page? Perhaps. But is it optimal? No. And isn’t the name of the game search engine “optimization” ? Besides all that – what about us poor suckers on iPhones? And why make things more difficult than they have to be? SHOW ME THE CONTENT! Here’s how…

To understand the code below you have to first know that inside the infotabs.js file is javascript that tells the user agent to SHOW the content of each tab as it is clicked, with the first tab being shown by default. That’s basically all it does, without getting into the details of the script. The important thing to remember is that the instructions to SHOW the content are located inside the script. Therefore, any user agent / browswer / search engine not executing javascript will see NOTHING because the display (as you’ll see below) is set to “none” by default.

So here is the wrong way to do it:

HIDING the content UNTIL the infotabs.js file is read and executed…

<script src="/includes/InfoTabs.js"></script>

<div id="tab_01_content" style="display:none;">
<table class="infoTabTable" width="100%" cellpadding=0 cellspacing=0><tr><td>
This is the content inside the first tab. It is the default content to show if users have Javascript.
</td></tr></table>
</div>

<div id="tab_02_content" style="display:none;">
<table class="infoTabTable" width="100%" cellpadding=0 cellspacing=0><tr><td>
This is the content inside the second tab.
</td></tr></table>
</div>

<div id="tab_03_content" style="display:none;">
<table class="infoTabTable" width="100%" cellpadding=0 cellspacing=0><tr><td>
This is the content inside the third and last tab.
</td></tr></table>
</div>


And here is the right way to do it:

SHOWING the content UNTIL the infotabs.js file is read and executed…

<script src="/includes/InfoTabs.js"></script>

<div id="tab_01_content">
<table class="infoTabTable" width="100%" cellpadding=0 cellspacing=0><tr><td>
This is the content inside the first tab. It is the default content to show if users have Javascript.
</td></tr></table>
</div>

<div id="tab_02_content">
<table class="infoTabTable" width="100%" cellpadding=0 cellspacing=0><tr><td>
This is the content inside the second tab.
</td></tr></table>
</div>

<div id="tab_03_content">
<table class="infoTabTable" width="100%" cellpadding=0 cellspacing=0><tr><td>
This is the content inside the third and last tab.
</td></tr></table>
</div>

All of the magic happens inside that /includes/infotabs.js file. Everything else is just normal stuff that everyone can see. Instead of setting the on-page default display to “none” and only showing content if the user can execute javascript, set the default to display all and only HIDE the non-clicked tabs if the user can execute javascript. So that infotabs.js file would essentially be doing the same thing, but in a much more user and search-engine-friendly way. Sure, anyone without javascript is going to see a big long page of content. It won’t be pretty, but it’s better than showing them no content at all.

Here is another resource that might explain it better if I haven’t done a good job of it.

One Response to “Is Your Tabbed Menu Written Backwards? Don’t Hide From Search Engines!”

1. Cory says:

   September 2, 2009 at 12:22 pm

   Do you have an example of a page doing it the WRONG way? I’m not quite sure what you mean by showing the content versus hiding it. I’m not a developer, but I want to make sure I understand the RIGHT way of doing it.

   Thanks

   Reply