I small navigation bar (just 2 tabs: "Aluminio lacado" and "Cobre natural") inside one of the sections of a website.

enter image description here

I'm wondering if, in this small nav bar, I should create normal links that request the content to the server or just create a javascript code that switch the content.

I like more the second option but I don't know what is better thinking in seo, since I would have to set display:none to the hidden content...



The best way to implement this is to do both. Have the content load a fresh page with the content if JavaScript is disabled and then using progressive enhancement you have JavaScript override the links and show/hide the appropriate content by showing/hiding the divs. That way your content is available to non-JavaScript user-agents (search engine bots, screen readers, etc) but you provide an enhanced experience to those who do have JavaScript enabled.

| improve this answer | |
  • thanks, so.. search engine bots are not ready to javascript? – tirengarfio May 5 '13 at 22:39
  • 2
    Their support varies. Google has indicated they do process some JavaScript but how much isn't really known. As a general rule it is better to assume they do not support it. – John Conde May 5 '13 at 22:41
  • 1
    Google has stated it can understand display: none triggers, so pages that have no triggers and hidden content can receive a slap... Generally what I use is modzinr and use .no-js{display:block} but there is many other ways like setting the display:none in the js rather than the css.. that way no js the elements hidden are shown. But generally I wouldn't trust Google :) and ensure all elements are shown as John said. – Simon Hayter May 5 '13 at 23:18

Contrary to John's answer I would suggest not creating separate pages if there is not a large amount of content in the tabs. Doing so may create duplicate content in Google's eyes.

The best method for creating tabs like this is to not hide any content with your CSS, but hide the inactive tabs with JavaScript. Using document.ready means that you don't get the "flash of unstyled content". Any good tab plugin should do this.

Now, anyone with JavaScript disabled will simply see the tabs one after the other, while those with JS will see the tabs as normal.

| improve this answer | |
  • Why not just add 'noindex' to the new pages and only request the needed portion via javascript? – user555 May 7 '13 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.