In the pictures below, you'll find 3 variations of similar code that builds a tabbed user interface. Which do you think is most effective for search engines vs. user friendliness, and why?
Option 1: Plain
Option 2: With Headings
Option 3: Headings Inside Noscript
My guts tell me the best option for search engines would be #2, as I fear that heading inside noscript could be either flagged (using noscript is still a very popular lightweight keyword spamming method) or somewhat devalued if compared to plain heading inside content. (A note to Mr. Matt Cutts and other big G employees: I'd definetely love to see Google and other SE's finally speak out loud about how they emphasize tags.)
When considering users, I think option #3 would be the best performer. If the user-agent is javascript enabled, the user will see tabs and content, but not headings. If javascript is off, they'll see headings and content.
Tell me your opinion? Which do you think is the best performer?
I use #2 on my large production sites, works extremly well.
I tend to go for an for my tabs. Make it display inline and use each as a tab.
Now as for the display: none; vs negative margin, I go with visibility: hidden;. My thought behind this is I will most likely replace the text with an image. I want the screenreaders to read the text, but I'll rely on the other users to read the image and therefore they don't need the text.
But to answer the quesiton in the post, I think hands down #2 is the best choice from an SEO perspective.
Some valid comments here. Thanks...
Why did I use Javascript instead of CSS for tabs? Because this is an example of single-page dynamic tabbing system (my mistake, I assumed all familiar with coding can do the *right decisions* based on simple code. I apologize.). I.e. all content is on single page, but only portion of it is shown when user hits a specific tab...
Where to use something like this? I use something like this constantly on e-commerce sites. Ie. you are selling Nokia 6130 on main tab, Nokia 6130 accessories on another tab, and listing related products on 3rd tab. Search engines see and treat this kind of page as "one (long) entity" devoded to Nokia 6130 and accessories (you may call this as page theme), while human users with javascript see the chopped (and hopefully more converting) version of same content.
Why is the chopped version more effective than long version? If you read some studies about shopping behaviour and landing pages, they all say the same - keep product pages and shopping simple, but provide options. In addition, the javascript based system is really fast (no world wide wait)... That's the goal with this approach.
The difference between #2 and #3? I think Michael hit the nail with " Unless you don't want the H2 elements to show for users with active Javascripting"... If your tabs have headings like "Nokia 6130", "Nokia 6130 Accessories", and "Phones similar with Nokia 6130", is it userwise to include similar /same headings to content div's? This may sound a simple (and totally unimportant) question, but as it can increase/decrease website conversion it has to be judged.
For example if your site sells (only) 100 cell phones a day, a slight 1%-unit increase/decrease in website conversion would mean 360 new/lost sales on annual level.
But you have to admit Oilman, off screen text was fun for a while :)
hell ya it was ;)
off screen margins and display none? why not just run up the white flag now? I suppose display none has more validity than an offpage margin tho...really Mr Cutts I have a valid reason for that content to be 18 miles to the left of my screen...
#2 is the way to go.
According to Matt Cutts: We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that. We try hard to avoid throwing babies out with bathwater.
I wrote an entry about this issue awhile back: https://www.seomoz.org/blogdetail.php?ID=1020
Even if the user-agent is javascript disabled, you can hide the headers in h2 tags with stylesheet, can't you? --- h2 { text-indent: -9999px; } /* not tested */ ---
So I chose #2, too.
Yes, but the recommended method of hiding elements is not to set off-page margins, but to set the display type to 'none'; You could then simply change the display type to 'block' when the user clicks on that particular tab.
I would say the recommended method of hiding an element depends on you goals. For example, setting an element to display: none, will also cause it NOT to be read by a screenreader which is probably undesirable in many cases. I generally position the element absolutely off page when I want it hidden and then change it to static positioning when I want it displayed.
True, but if you don't want it to bee seen by people who aren't seeing the screen, why show it to people using a screen reader?
From what I've read the consensus is that you can't really rely on screen readers to handle JS very well (particularly for actions like mouseovers that don't make much sense in the screen reader world). So if you set an item to display: none and then rely on javascript to make it "visible" someone with a screen reader will probably never have access to it.
In the context of the original post, you would probably want screen readers to be able to read the contents of your tabs. So, if you simply position them off the page, then the screen reader will read all of their contents. Instead if you set them to display: none, then there's a decent chance their screen reader wouldn't have any way to make it "visible" to them.
I'm more of a coder than an SEO guy, so the set of options completely perpelexes me. With the large number of very robust CSS only tabs available, why is this using Javascript at all? With my baby SEO knowledge, I would expect that CSS tabs would be better because
- all the links are spiderable - they work in a higher percentage of browsers if you assume that there are only a couple of percent still on 4.x gen browsers, but about 10% with JS off, plus many of the older browsers that have trouble with CSS will have issues with modern JS as well.
Is this specifically because you don't want those links spidered because you don't want to dilute the power of your links by wasting them on navigation? That's the main reason I can think of for using Javascript tabs.
I'd choose #2.
You've hit the nail on the head with the distinction between #2 and #3. If I had to choose, I'd got for #2 though. I don't feel racking the header within the noscript has any real advantage.