Skylab Wordpress Theme - Photography Wordpress Theme Skylab

My customers are eager to show news categorized in tabs. I recently developed it for them.

In my experience in web designing, display:none is used widely in implementing tabs. I also know that it is not good for SEO.

Is there any way to have tabs but without hurting SEO factors?

Who said display:none is bad for SEO? That sounds like a myth to me. There are lots of legitimate reasons for using display:none and as always it's not the technique but the intent. Using display:none for style purposes is perfectly fine.

As mentioned by Pumbaa80 you'll almost certainly want to take advantage of JavaScript for this. Have all of the tabs available using regular links (reload the page to show the proper tab). This allows users who don't have JavaScript turned on to view the content. Then use JavaScript to hide the tabs except for the default one when the page loads. JavaScript will also be used to show and hide tabs as the user clicks on a tab and cancel the page load when they click on the link. This is 100% search engine and user friendly.

You can see this in action here. If you click on the tabs you'll see the page never reloads but the content changes when each tab is selected. If you turn off JavaScript the page does reload but the exact same content is available. A little less flashy then before but it's still accessible.

  • There are legitimate reasons to use display:none, but Google might ignore hidden content (i.e. if the user can't see it, then it shouldn't be used for ranking). Also, most screen readers and text-only browsers don't read/display display:none text.
  • They might ignore it but I doubt they do. The only time they would see it as a bad thing would be if it were used for cloaking but that's a whole different issue. Plus if the content is made available without JavaScript the content is available to the search engines anyway so it's ok if they ignore the hidden content as long as it's available through another URL (e.g. with a query string that 'activates' it and hides other content). That's demonstrated in the link above.
  • See Google's Guidelines link, the way this reads it may be best not to use display:none
  • They are just trying to say don't hide stuff for the sake of hiding it or doing bad things. There are way too many legitimate uses for display:none for it to be considered a bad thing in and of itself.

Hide your tabs using JavaScript, just like does. This is also a great way to make sure your site is accessible to users with JS turned off.

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?