: javascript

Ajax et le référencement

Par nature, une requête Ajax fait appel à Javascript pour obtenir une ressource. Donc les moteurs de recherche ne sont pas capable aujourd'hui de suivre ces liens.

Prenons l'exemple d'un site Web de trois pages utilisant Ajax pour charger le contenu des pages sans recharger la totalité de la page affichée (habillage et navigation sont conservés).

La navigation pourrait ressembler à Ceci:

Dans un site web traditionnel la navigation ressemblerai plutôt à ceci:

Pour palier au problème du référencement, les moteurs de recherche devraient avoir accès à cette deuxième version.

Les deux ne sont pas incompatibles techniquement. Il suffit de produire un code html pour les moteurs de recherche et de court-circuiter les liens avec Javascript pour faire des chargement via Ajax.

function initNav() {
var nav = document.getElementById('nav');
var liens = nav.getElementsByTagName('A');
for(var i=0;i<liens.length;i++) liens[i].onclick = load;
}

La fonction initNav doit être exécutée au chargement de la page et la fonction load doit interrompre le traitement par défaut du click et nous avons résolu notre premier problème.

Fonctionnement sans Javascript

Si javascript est désactivé alors les urls définis dans le href vont être utilisés quand on clique sur les liens. Le navigateur devra recevoir un contenu de page complet (de même pour les moteurs de recherche).

Dans le cadre d'une application Ajax les contenus que l'on souhaite charger sont partiels (pas de DOCTYPE, ni de body), juste le contenu, c'est à dire des fragments html.

Pour palier à ce problème il faut pouvoir produire les deux types de contenu depuis le serveur. Le plus simple étant de séparer les fragments html dans des fichiers distincts et de travailler avec un model html contenant l'habillage du site et sa navigation mais sans contenu.

Exemple de structure du site:

model.html
fragments/page1.html
fragments/page2.html
fragments/page3.html
index.php

La page model.html pourrait ressembler à ceci

<!DOCTYPE ...>
<html ...>
<head>...</head>
<body>
<ul id='nav'>
<li><a href='page1.html'>Page 1</a></li>
<li><a href='page2.html'>Page 2</a></li>
<li><a href='page3.html'>Page 3</a></li>
</ul>
<div id='contenu'>[[CONTENU]]</div>
</body>
</html>

On peut utiliser php pour produire les page avec un code du genre:

$page = $_GET['page'];
$fragment = file_get_contents("fragments/$page");
$model = file_get_contents('model.html');
echo str_replace('[[CONTENU]]', $fragment, $model);

Les urls produisants des pages complètes sont de la forme: index.php?page=page1.html et ceux permettant d'obtenir des fragments sont ainsi: fragments/page1.html (ceux-ci ne seront jamais indexés)

En utilisant l'url rewriting on peut facilement transformer les urls comme page1.html en index.php?page=page1.html

Nous avons maintenant une application totalement fonctionnelle sans javascript et qui peut être référencée par les moteurs de recherche.

Gestion de l'url avec Ajax

Pour éviter le rechargement de la page avec Ajax on ne peut pas se permettre de changer l'url de la page, ce qui rentre en conflit avec ce qui a été écrit plus haut et avec une règle qui dit qu'à chaque contenu doit correspondre un url et réciproquement.

Heureusement il est possible de modifier l'ancre d'un url sans recharger la page. (les ancres servant initialement à se déplacer dans une même page).

On peut modifier l'url de la barre d'adresse du navigateur en javascript sans recharger la page en appliquant une ancre avec document.location.replace('#page1.html') Ceci doit être fait après chaque requête Ajax qui charge un nouveau contenu.

Les urls de notre application Ajax ressemblent donc à

/#page1.html
/#page2.html
/#page3.html

Il est important que l'application Ajax examine l'url du navigateur lors du premier chargement de la page de manière à charger le bon contenu. Ces urls comportant des ancres peuvent être utilisés suite à la mise en favoris d'une page par exemple.

Conflit lors de l'arrivée sur le site par une page référencée.

Si on arrive sur le site par l'url page2.html référencé par un moteur de recherche il n'y a pas d'ancre, l'application Ajax pourrait traiter ce cas et charger le contenu de la page2 initialement. Mais ensuite quand on navigue dans le site sur la page3 on aurait un url page2.html#page3.html ce qui n'est pas très cohérent d'une part, et qui contredit la règle d'unicité entre le contenu et les urls d'autre part.

L'application Ajax devrait donc faire une redirection en javascript vers l'url /#page2.html aussi vite que possible, avant l'affichage du corps de la page (en plaçant un script dans l'entête).

Exemple fonctionnel

Voici un petit exemple fonctionnel à placer sur votre serveur (qui doit supporter le .htaccess pour l'url rewriting) Télécharger (2.58 ko)

Editer