Exploration AJAX : guide destiné aux webmasters et aux développeurs

Présentation générale

Si vous utilisez une application AJAX avec du contenu que vous souhaitez voir apparaître dans les résultats de recherche, un nouveau processus, lorsqu'il sera mis en œuvre, permettra à Google (et éventuellement à d'autres moteurs de recherche) d'explorer et d'indexer votre contenu AJAX. Les applications AJAX sont connues pour être difficiles à traiter par les moteurs de recherche, car le contenu AJAX est produit dynamiquement par le navigateur, ce qui le rend invisible pour les robots d'exploration. De plus, les méthodes qui permettent de remédier à ce problème nécessitent des interventions manuelles régulières pour maintenir le contenu à jour.

En revanche, le processus ci-dessous permet aux moteurs de recherche d'explorer et d'indexer le contenu de manière évolutive, et aux webmasters de maintenir le contenu indexé à jour sans intervention manuelle régulière. Si votre application AJAX adhère à processus, son contenu pourra figurer dans les résultats de recherche. Fonctionnement du processus :

  1. Le site adhère au processus d'exploration AJAX.
  2. Votre serveur fournit un instantané HTML de chaque URL AJAX correspondant au contenu vu par l'utilisateur (dans un navigateur). Une URL AJAX contient un fragment de hachage, tel que www.example.com/index.html#mon_état, où #mon_état correspond au fragment de hachage. Un instantané HTML correspond à l'ensemble du contenu qui apparaît sur la page après l'exécution du JavaScript.
  3. Le moteur de recherche indexe l'instantané HTML et diffuse les URL AJAX d'origine dans les résultats de recherche.

Pour cela, l'application fait appel à une syntaxe spécifique dans les URL AJAX (que nous appellerons URL "vitrine" ; vous découvrirez pourquoi dans les sections suivantes). Le robot d'exploration du moteur de recherche modifie provisoirement les URL "vitrine" en URL "brutes", et les demande sur votre serveur. La demande "d'URL brute" indique au serveur qu'il ne doit pas renvoyer la page Web normale comme il le ferait vers un navigateur, mais qu'il doit renvoyer un instantané HTML à la place. Lorsque le robot d'exploration a obtenu le contenu de l'URL brute modifiée, il indexe son contenu, puis affiche l'URL vitrine d'origine dans les résultats de recherche. Quoi qu'il en soit, l'internaute verra toujours l'URL vitrine contenant un fragment de hachage. Le schéma ci-dessous résume le processus :

Schéma du processus d'exploration de contenu AJAX par Google

Pour plus d'informations, reportez-vous au FAQ sur l'exploration AJAX et à la documentation pour les développeurs.

Guide détaillé

1. Indiquer au robot d'exploration que votre site est compatible avec le processus d'exploration AJAX.

La première étape d'indexation d'un site AJAX consiste à signaler au robot d'exploration que votre site est compatible avec le processus d'exploration AJAX. Pour cela, vous devez utiliser un jeton spécifique dans les fragments de hachage (les caractères qui suivent le signe # dans une URL). Les fragments de hachage correspondant à des états de page uniques doivent commencer par un point d'exclamation. Par exemple, si l'application AJAX contient une URL du type :


www.example.com/ajax.html#mon_état

cette URL doit prendre le format suivant :

www.example.com/ajax.html#!mon_état

Les sites qui adhèrent au processus font partie des "sites AJAX explorables". Autrement dit, le robot d'exploration voit le contenu de votre application lorsque votre site génère des instantanés HTML.

2. Configurer le serveur pour gérer les requêtes d'URL contenant "_escaped_fragment_"

Vous souhaitez indexer l'URL www.example.com/index.html#!mon_état. Pour cela, vous devez fournir au robot d'exploration un instantané HTML de l'URL, afin qu'il puisse en voir le contenu. Comment le serveur peut-il savoir quand renvoyer un instantané HTML à la place d'une page normale ? La réponse se trouve dans l'URL demandée par le robot d'exploration : le robot modifie chaque URL AJAX, par exemple www.example.com/ajax.html#!mon_état, pour qu'elle prenne temporairement le format www.example.com/ajax.html?_escaped_fragment_=mon_état. La première est l'URL "vitrine", et la seconde est l'URL "brute".

Ceci est important pour deux raisons :

  • Conformément aux spécifications, les fragments de hachage ne sont jamais envoyés au serveur dans les requêtes HTTP. Le robot d'exploration doit donc disposer d'un moyen d'informer votre serveur lorsqu'il souhaite obtenir le contenu de l'URL www.example.com/ajax.html#!mon_état.
  • Le serveur doit, quant à lui, savoir qu'il doit renvoyer un instantané HTML au lieu d'une page normale dans le navigateur. N'oubliez pas : un instantané HTML correspond à l'ensemble du contenu qui apparaît sur la page après l'exécution du JavaScript. Enfin, votre serveur doit renvoyer l'instantané HTML de www.example.com/index.html#!mon_état (soit l'URL d'origine) au robot d'exploration.

Remarque : Lors de la transformation, le robot d'exploration encode certains caractères du fragment. Pour récupérer le fragment d'origine, faites en sorte de ne pas encoder les caractères %XX du fragment (par exemple, %26 doit devenir '&', %20 doit devenir un espace, %23 doit devenir # et %25 doit devenir %).

Une fois que vous avez récupéré l'URL d'origine et que vous savez quel contenu est demandé par le robot d'exploration, vous devez créer un instantané HTML. Voici plusieurs méthodes :

  • Si votre site contient un volume élevé de contenu créé avec JavaScript, il est préférable d'utiliser un navigateur sans interface, par exemple HtmlUnit, pour obtenir l'instantané HTML. Vous pouvez également utiliser d'autres outils, notamment crawljax ou watij.com.
  • Si un volume élevé de contenu provient d'une technologie serveur, par exemple PHP ou ASP.NET, vous pouvez reprendre votre code en remplaçant uniquement les parties JavaScript de la page Web par du HTML statique ou créé côté serveur.
  • Vous pouvez créer une version statique de vos pages hors connexion. Par exemple, dans le cas de nombreuses applications, le contenu est extrait d'une base de données, puis affiché dans un navigateur. Au lieu de cela, vous pouvez créer une page HTML distincte pour chaque URL AJAX. L'opération est similaire à la recommandation Hijax précédente de Google.
3. Gérer les pages sans fragments de hachage

Certaines pages n'ont pas de fragments de hachage. Par exemple, il est préférable d'avoir l'URL de page d'accueil www.example.com au lieu de www.example.com#!home. Google propose une procédure spécifique pour les pages sans fragments de hachage.

Pour indexer une page sans fragments de hachage, vous devez intégrer une balise META spécifique dans l'en-tête du code HTML de la page. Important : n'utilisez cette solution que pour les pages incluant du contenu Ajax. Si vous ajoutez cette balise aux pages ne comportant aucun contenu Ajax, vous n'en tirerez aucun profit et vous augmenterez la charge appliquée à vos serveurs et à ceux de Google. La balise Meta se présente sous la forme suivante :

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

Cette balise indique au robot d'exploration qu'il doit explorer la version brute de l'URL. Le robot d'exploration mappe provisoirement l'URL vitrine avec l'URL brute correspondante. Autrement dit, lorsque vous placez la balise <meta name="fragment" content="!"> dans la page www.example.com, le robot d'exploration mappe provisoirement cette URL avec www.example.com?_escaped_fragment_= , puis demande l'URL auprès de votre serveur. Votre serveur renvoie ensuite l'instantané HTML de www.example.com.

Remarque : Le seul contenu valable de cette balise META est "!". La balise META est donc toujours au format exact suivant : <meta name="fragment" content="!">, ce qui indique un fragment de hachage vide, mais une page avec du contenu AJAX.

4. Mettre à jour un sitemap pour y faire figurer les nouvelles URL AJAX

Les robots d'exploration utilisent des sitemaps pour compléter l'exploration. Votre sitemap doit inclure la version des URL que vous préférez voir figurer dans les résultats de recherche. Par exemple, http://example.com/ajax.html#!foo=123 sera généralement mieux adapté que http://example.com/ajax.html?_escaped_fragment_=foo=123), à moins que votre site n'ait une page d'accueil. Dans ce cas, vous préférerez peut-être la voir figurer dans les résultats de recherche sans les caractères #!. Par exemple, pour que http://example.com/ figure dans les résultats de recherche, ajoutez http://example.com/ dans votre sitemap avec la balise <meta name="fragment" content="!"> dans la partie <head> du document. Pour plus d'informations, consultez les articles Google complémentaires sur les sitemaps.