PushState + SEO : Le référencement des pages AJAX

Vous aimeriez rendre la navigation d’un site plus fluide ? Vous voudriez rendre crawlables certaines pages générées en AJAX ? Le Hashbang vous fait peur ? Il existe une alternative plus clean, à l’aide de la méthode PushState() !

AJAX ?

L’AJAX (pour Asynchronous JavaScript and XML) est de plus en plus utilisé par les développeurs web. Cette techno permet notamment de réaliser des sites (ou applications) plus fluides, en ne faisant appel qu’à des fragments de données à charger au lieu de recharger l’intégralité de la page.

Echanger des données de façon asynchrone requière l’exécution de scripts quand un événement particulier se produit. Les moteurs de recherche, comme Google et Bing, font face à un challenge lorsqu’il s’agit d’interpréter ce type de code. Pour remédier à ce problème, Google nous a pondu une technique à base de « # ! », dite Hash Bang, à mettre dans l’URL. Les référenceurs ne sont pas trop fans de cette technique, les dev non plus. Bref, sauf demande particulière du client, il est assez rare de recommander cela dans le cadre d’une presta de référencement naturel…

Une nouvelles technique est apparue ces dernières années, et semble faire l’unanimité : la méthode Javascript pushState().

PushState : un ami qui vous veut du bien

La méthode pushState() permet de réaliser des miracles : vous pouvez maintenant changer l’URL affichée, sans recharger l’intégralité de la page. Terminée l’utilisation des hash bang dans l’URL, l’installation de Servlet et autres : cette fois c’est beau, c’est léger, et ça plait à Google et Bing !

A quoi ça ressemble ?

La méthode JS pushState() est utilisée pour créer une nouvelle entrée dans l’historique du navigateur. La méthode prend 3 paramètres :

  • stateObj – Utilisé pour stocker de la donnée associée avec cette nouvelle entrée dans l’historique. Exemples : Le title, l’URL à charger en AJAX, ou même le contenu de la page.
  • title – Ce paramètre doit être interprété comme une description de l’entrée effectuée dans l’historique.
  • URL – (optionnel) Sera associée avec l’entrée dans l’historique. Attention, le navigateur ne CHARGERA PAS cette URL quand pushState() est appelé, mais l’affichera simplement dans la barre d’adresse (et c’est déjà pas mal !) A savoir : En cas de refresh (F5), cette URL sera prise en compte ! Idem en cas de redémarrage du nav.
  • Dans l’action ça donne ça :
window.history.pushState(stateObj, title, URL);

Compatibilité

C’est un peu là que le bat blesse. Seuls les navigateurs « récents » sont compatibles. Voici le tableau des versions pour lesquelles cette fonction est compatible :

  • IE 10 et +
  • FF 4.0 et +
  • Chrome 5.0 et +
  • Safari 5 et + partiellement
  • Opera 11.5 et +
  • iOS Safari 4.2-4.3 partiellement, à partir de 5.0 totalement
  • Android Browser 2.2, 2.3 (ne fonctionne pas avec 3.0, 4.0 et 4.1…) puis fonctionne à partir de 4.2
  • Blackberry Browser 7.0 et 10.0
  • Opera Mobile 11.1 et +

Pour obtenir une liste à jour des versions compatibles pushState, ca se passe ici.

 History.js, ou comment gérer la compatibilité avec les « vieux » navigateurs

« History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality. »

Génial, non ?

La preuve en HTML ici :

http://browserstate.github.io/history.js/demo/

Bonnes pratiques

  • Limitez vous dans la modification des URLs. En ne modifiant que les paramètres de l’URL vous limiterez les potentielles erreurs 404.
  • Les bots doivent découvrir le même contenu que l’utilisateur pour une même URL
  • Attention au contenu dupliqué…c’est vite arrivé !
  • Si vous avez des paramètres qui génèrent des pages sans intérêt SEO, vous pouvez les mettre après un simple  « # »
  • Les navigateurs anciens ont besoin d’une navigation « classique »

Ressources utiles

Toujours au sujet du référencement AJAX :

Un article essentiellement sur AngularJS, l’AJAX et le SEO

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *