System to handle hash tags for tab content? (!#)

Question

I have four pages on the main part of the website I am working on, with tabs to switch between them. I want the switching between the 4 tabs to be a fading transition (using jQuery). That's all fine and dandy, but I also want SEO to think of each as a separate page. I also want to be able to link to a URL and for it to pull up the right content, even though it is technically the same page.

Facebook does this (facebook.com/#!/another-string-here), and you can switch between pictures and so on, so it kind of acts as a javascript querystring.

This allows switching immediately, the ability to link to it, and yet each acts as its own page.

Is there a recommended method for how to do this?

---

UPDATE the best I've found is SammyJS -- haven't implemented but it looks to be the best answer: http://sammyjs.org/

Answer 1

Let's say you have a base page, called services, and that page has two tabs: design and development (just for simplification). So if your domain was example.com, your hash URL upon clicking on the "Design" tab would look something like http://example.com/services#!/design, and similar for development. I'm assuming you know how to do that.

To make search engines recognize the tabs, what you do is make a static version of each page. So you'd have one at http://example.com/services/design and one at http://example.com/services/development. The href attribute of each tab would actually point to these static pages, but you would attach an onclick handler to each tab to make it go to the hash version.

This way, JavaScript-enabled clients would get the Ajaxy version of your page with the hash tags and the fading effects, while clients without JavaScript enabled (including web crawlers) would see normal, static links, and everybody wins.

---

For the record, this is similar to what Facebook does. They go a step further and use HTML5's new history.pushState() function in browsers that support it, in order to remove the need for the hash tag entirely. (See this question for more info.)

Answer 2

Well to have it both ways is impossible (facebook method and SEO), because the server doesn't get sent the hash tag, and most search engines (google etc.) don't run javascript.

Now if you simply want the fading effect, you can set it up so that if there is a hash tag in the url, for example #fade, jquery will set the opacity to 0, wait for load and fade in. To get the fade out you set event listeners on the links, e.preventDefault() or return false in that function, and fade out the opacity. Once it is done fading you would have javascript change to a new page location.href="site" with the hash #fade

Edit: example: http://fiddle.jshell.net/msm595/u5Eg2/3/show/light/