SEO friendly page transitions

Problem

I've been playing with AJAX a fair bit of late & love the way it enhances the user experience.

One area the (Wordpress) site that could still be improved is by using animated transition between pages. However there are a few things that worry me when considering AJAX.

This is what I am looking to achieve:

  1. Deep linking - I want to maintain Wordpress' great permalink structure so that pages are accessible to both search bots & users
  2. A cool effect such as these done by Codrops using CSS3

I've seen some people go for the approach of simply applying display: none on the body tag & then use jQuery to bring it to life. But this very much limits what can be achieved in terms of the visual appearance.

Is AJAX the solution here? If so how can it be used without being a detriment to a site's SEO? Or are is there an alternative that I am not considering.

Problem courtesy of: Sheixt

Solution

The problem with AJAX and SEO (search crawlers) is that they look at the page and what they see is the page without the AJAX content loaded. If you have all the content in one page and you animate various "pieces" of the page to the front, like some of the mobile sites that allow scrolling through content, or ones employing Isotope effects, the crawlers can hit the content and see it. However, if it's fully dynamic and your content doesn't exist prior to an AJAX load, you have to be careful about your approach for SEO.

That said, this is not an uncommon question for people looking to create dynamic sites via AJAX that want to also keep their content crawlable and searchable. The solution, however, is not a simple bit of drop-in code as a panacea. It's a little more complex than that.

The Google Dev site explored this issue with a possible solution about a year ago via a post that explained part of the issue and the approach to work with it. I believe this is the accepted approach now and Bing might even be following suit to utilize it.

Read more on "Making AJAX Applications Crawlable" - https://developers.google.com/webmasters/ajax-crawling/

Edit A similar question containing the same link and some additional links/ideas is here: https://stackoverflow.com/a/7098472/2754848

Solution courtesy of: Daved

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.