Contenu Ajax accessible aux moteurs de recherche

Google a proposé en 2009 un standard pour permettre aux moteurs de recherche d'accéder au contenu de page Web généré dynamiquement avec Ajax, car les applications Web sont appelées à se développer de façon exponentielle.

En 2015, le moteur de recherche a modifié son avis et l'explique dans un article intitulé: Deprecating our AJAX crawling schemes. (Le nom réel est Ajax et non AJAX mais il y a des idées préconçues qu'on ne peut pas éradiquer.)

A partir de 2015, il suffit que le robot puisse accéder aux fichiers JavaScript et CSS pour qu'il soit capable d'indexer le contenu dynamique, dit l'article (cela dépend fortement du script). Si le site suit le principe d'amélioration progressive, à savoir que le contenu est ajouté peu à peu par JavaScript, le robot pourrait accéder aux données et en tenir compte dans l'indexation.

La méthode de 2009 est ici pour mémoire et n'est plus d'actualité sauf pour savoir de quoi il s'agissait. Utilisez pushState, c'est la méthode maintenant recommandée.

Utilisation de pushState

Si votre audience utilise un navigateur récent autre que IE 9, vous pouvez vous dispenser de tout ce qui a été décrit précédemment et utilisez plus simplement la méthode pushState de l'objet history. Son rôle est de créer artificiellement une URL pour un nouvel état de la page.

Les paramètres sont: un objet qui stocke des données relative à l'état de la page, un titre temporaire, une URL temporaire. Exemple d'utilisation:

var state1 = { ref : "info" };
history.pushState(state1, "Titre de page", "nouvelle-page.html");

Quand l'utilisateur déclenche l'action qui présente le nouvel état de la page, l'URL change et elle peut être indexée séparément. Reste à écrire le code qui permettra de rendre cette URL accessible directement!

Pour mémoire, la méthode par segments de 2009

Quand une page Ajax modifie le contenu grâce à un code JavaScript, cela crée un nouvel état et Google se propose d'indexer tous les états possibles d'une page dynamique de sorte par des liens dans son index qui renvoient sur les états correspondants de la page.

Pour que cela soit possible il faut qu'à chaque état corresponde un fragment de la forme:

http://www.example.com/mapage#fragment

C'est quelque chose qui est généré automatiquement avec un framework Ajax ou HTML 5.

Cependant, un fragment ne renvoie pas de code HTTP, pour pallier à cela, Google doit le convertir artificiellement en forme de requête. Les requêtes renvoient un code.

http://www.example.com/mapage#_escaped_fragment_?fragment

Le texte du fragment devient maintenant la valeur assignée à un paramètre générique. C'est quelque chose qui est invisible à l'utilisateur.

Comprendre le système

L'utilisateur crée une page de départ statique. Elle peut comporter des liens dynamiques et des ancres.
```
http://www.example.com/index.php?requete#ancre
```
On sait que Google peut actuellement référencer les liens internes, voir évolution de l'algorithme de Google (25 septembre 2009). A condition qu'il y a un lien dans la page, ce qui n'est pas le cas du contenu dynamique.
Car le contenu dynamique est lui aussi accessible à l'utilisateur sous ce format.
```
http://www.example.com/index.php?requete#etat
```
En outre, JavaScript peut modifier le contenu de la page soit au départ, soit à la demande de l'utilisateur.
Or les robots des moteurs ne voient que ce code:
```
<script src='showcase.js'></script>
```
Si un moteur de recherche essaie d'interpréter le code JavaScript, le résultat sera aléatoire.
Google proposait initialement que le serveur interprète le code JavaScript et crée une URL correspondant à l'état de la page modifiée par le code JavaScript.
Mais il semble que la conversion soit en fait exécutée par le crawler lui-même.
Une URL est générée pour l'état correspondant de la page de la forme:
```
http://www.example.com/index.php?_escaped_fragment_=etat
```
Mais celle-ci serait affichée sous cette forme plus lisible:
```
http://www.example.com/index.php#!etat
```
Le crawler génère une URL peu lisible. Les robots ainsi que les navigateurs sauront convertir une URL lisible en URL peu lisible.
Seule l'URL lisible est accessible à l'utilisateur et figure dans l'index de Google.

Ce format standard est maintenant reconnu par les acteurs du Web pour la conversion et pour la gestion par les serveurs.

Récapitulation

http://www.example.com/stock.html#Google

peut être changé facilement (avec le point d'exclamation en plus) en:

http://www.example.com/stock.html#!Google

Cela sera convertit par les moteurs en:

http://www.example.com/stock.html?_escaped_fragment_=Google

mais affiché dans les résultats comme:

http://www.example.com/stock.html#!Google

Comment rendre une page Ajax navigable?

Le principe étant posé, que doit faire le webmaster pour que sa page Ajax entre dans le système et soit reconnue par Google comme navigable?

La page elle même doit avoir cette méta:

<meta name="fragment" content="!">

Quand le script Ajax crée un nouvel état, donc quand il modifie le contenu de la page, il doit créer un fragment qui s'ajoute à l'URL de la page (séparé par #) et remplace celle-ci. Cela permet de conserver l'usage du bouton retour.
Le mode de création de ce fragment dépend de votre framework Ajax.

Si la page contient des liens sur des états de la page, lesquels sont générés par du code Ajax, ces liens doivent contenir un fragment et le point d'exclamation:

<a href="http://www.example.com/showcase.html#!checkbox