En dehors du fait que google propose maintenant une norme (le hashbang #!) pour indexer son contenu ajax, il ne faut pas pour autant oublier les visiteurs n'ayant pas de javascript (navigateurs spéciaux pour personnes handicapées, vieux navigateurs d'entreprise, ...).

Le principe

... est très simple : développer le site sans ajax et ajouter, en javascript, les comportements désirés.


1. Développement du site "base"

L'implémentation que je vous propose est basé sur un contrôleur où toutes les requêtes seront redirigés. Pour cela, il nous faut un fichier .htaccess opérationnel :

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php [QSA,L]

Ensuite, notre contrôleur (qui va s'étoffer), index.php :

01.$contents = array(
02.'home' => "<h1>Hello !</h1>
03.<p>Ce site est une démo pour le crawling AJAX de google</p>",
04.'page1' => "<h1> Page 1 </h1>
05.<p>Lorem ipsum dolor [...] magna. </p>",
06.'page-2' => "<h1> Page 2 </h1>
07.<p>In augue sem, [...] nisl. </p>
08.<p>Aliquam vel [...] tellus. </p>
09.<p>Vivamus [...] amet tortor. </p>",
10.);
11.
12.$url = 'home'; // page par défaut
13.
14.if( isset($_SERVER['REQUEST_URI']) && '/'!=$_SERVER['REQUEST_URI'] )
15.{
16.$url = substr($_SERVER['REQUEST_URI'], 1); // retirer le / de départ
17.}
18.
19.if( !array_key_exists($url, $contents) ) // si l'url ne correspond pas à une page du site
20.{
21.// redirection ou erreur 404
22.exit('mauvaise url');
23.}
24.$content = $contents[$url];
25.?>
26.// html

Note : L'organisation en 1 seul fichier et la gestion des pages ont été volontairement simplifié, je vous invite à faire ceci plus proprement. :)


2. Ajout des comportements ajax

Maintenant que le site est accessible sans javascript, nous pouvons ajouter cette option.

La technique que j'ai choisi pour cela est d'ajouter un évènement sur tous les liens ayant une certaine classe (ici "lajax"), qui annulera le comportement par défaut pour faire un appel ajax et remplacer le contenu.

Placer ce morceau de code où vous voulez dans la page :

01.$(document).ready(function () {
02.$('a.lajax').live('click', function()
03.{
04.lien = $(this).attr('href');
05.$.ajax({
06.url: lien,
07.type: 'get',
08.success: function(data) {
09.$('#content').html(data);
10.location.hash = '!'+lien;
11.}
12.});
13.return false;
14.});
15.});

Personnellement, j'utilise jQuery pour me faciliter la vie, donc si vous utilisez ce code mot pour mot, n'oubliez pas d'ajouter l'appel à la librairie (jquery-1.4.3 dans mon cas).

Explication : pour chaque lien ayant la classe lajax, la fonction va récupérer son href et créer un appel ajax dessus avant de remplacer le contenu de #content et de modifier le hash de la page (http://www.exemple.com/#!ma-page).

Note: il est important que les liens soient relatifs pour la modification du hash, toutefois vous pouvez toujours modifier le lien avant de l'insérer dans le hash.


3. Gérer le comportement ajax dans le contrôleur

Lorsqu'un appel ajax arrive au contrôleur, celui-ci ne doit pas renvoyer la page complète, mais uniquement le contenu destiné à #content :

1.[...]
2.// A insérer juste avant la fermeture de la balise php, lorsque tous les traitements sont fait.
3.if( isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 'XMLHttpRequest' == $_SERVER['HTTP_X_REQUESTED_WITH'] )
4.{
5.echo $content;
6.exit;
7.}

Et voilà ! vous avez un site simple, ajax, indexable et accessible. :)


Pour Aller plus loin

Ce code est loin d'être parfait, il manque, par exemple, une fonction javascript pour vérifier si on affiche la bonne page (si j'accède directement à la page http://www.exemple.com/#!ma-page, le code actuel me renverra la home).

Dans un futur proche, je ferais une archive avec le site "clé-en-main".