3

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?

Stephen Ostermiller
  • 98,758
  • 18
  • 137
  • 361
hd.
  • 193
  • 4

2 Answers2

3

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.

John Conde
  • 86,255
  • 27
  • 146
  • 241
  • 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. – Lèse majesté Nov 15 '10 at 15:19
  • 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. – John Conde Nov 15 '10 at 15:27
  • See Google's Guidelines link, the way this reads it may be best not to use display:none – Richard Feb 14 '11 at 13:04
  • 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. – John Conde Feb 14 '11 at 14:04
1

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

user123444555621
  • 111
  • 1