Contrairement à ce que l’on pense, référencer une application web ou un site full Ajax est possible, néanmoins il faut suivre un certain nombre d’étapes.
Pour résumer, la technique consiste à délivrer aux moteurs de recherche le HTML final de la page et non le code Javascript.
Voici les étapes à suivre :
1. Indiquer qu’il s’agit de contenu en Ajax
Avant toute chose il faut indiquer à Google, et aux moteurs de recherche en général, que la page contient du contenu en Ajax, pour cela, ajouter la balise meta :
<meta name="fragment" content="!">
2. Permettre aux robots de naviguer sur votre site
Une fois que le robot a détecté que la page contient du contenu en Ajax, le robot va envoyer une requête à votre serveur avec une url modifiée pour que vous puissiez renvoyer une version statique HTML de la page.
Deux cas de figure se présentent :
2.1. Url Hashbang (#!)
Vos url comportent un dièse # avant le contenu délivré en Ajax.
Pour que les robots identifient la partie à remplacer, vous devez ajouter un ! après le # ce qui donnera une url de type Hashbang (#!).
Si votre url est :
http://www.example.com/#!/user/123
Le robot va envoyer comme requête à votre serveur :
http://www.example.com/?_escaped_fragment_=/user/123
Comment passer aux url Hashbang avec AngularJS ?
angular.module('myApp').config(function($locationProvider’) {
$locationProvider.hashPrefix(’!’);
});
2.2. La méthode HTML5 du pushstate
Une des nouveautés apportées par HTML5 a été l’ajout d’une API javascript permettant d’accéder à l’historique du navigateur.
Dans l’API history, la méthode pushstate permet de dynamiser la navigation de l’historique d’un navigateur sans générer un rafraîchissement de la page.
Utiliser la méthode pushstate permet d’avoir des url « élégantes » en Ajax (sans le #), d’être compatible avec les utilisateurs sans Javascript mais surtout de générer un ajout à l’historique de navigation de votre navigateur.
Compatibilité : La majorité des navigateurs récents, IE 10 et plus.
Pour les vieux navigateurs la compatibilité est possible en utilisant la librairie history.js.
Si votre url est :
http://www.example.com/user/123
Le robot va envoyer comme requête à votre serveur :
http://www.example.com/user/123?_escaped_fragment_=
Comment utiliser pushstate avec AngularJS ?
AngularJS propose un mode d’URL HTML 5 :
angular.module('myApp').config(function($routeProvider) {
$routeProvider.html5Mode(true);
});
3. Modifier la configuration serveur
Il faut modifier la configuration côté serveur : à réception du fragment d’url (?_escaped_fragment_=) il renvoie un contenu statique, sans chargement Ajax.
La technique est d’utiliser un module de réécriture d’URL, mod_rewrite pour Apache ou Url Rewrite pour IIS par exemple. Si l’URL contient le fragment ?_escaped_fragment_=, elle sera réécrite pour pointer vers un répertoire spécifique, contenant le contenu statique.
Ex pour Apache, modification du .htaccess :
RewriteEngine On
RewriteCond %{REQUEST_URI} ˆ/$
RewriteCond %{QUERY_STRING} ˆ_escaped_fragment_=/?(.*)$
RewriteRule ˆ(.*)$ /snapshot/%1? [NC,L]
Permet de réécrire une URL contenant le fragment pour qu’elle pointe vers un répertoire nommé snapshot, contenant les versions statiques des pages.
4. Générer les snapshot de l’application
Les robots des moteurs ne peuvent pas exécuter de code Javascript, ils ne pourront lire que le HTML statique renvoyé par la page.
Il faut que notre serveur délivre un « snapshot » (instantané HTML) de la page demandée.
Ce snapshot correspond au contenu généré sur la page après l’exécution du javascript.
Comment faire ?
La solution la plus simple, et que j’ai adoptée, est d’utiliser un site qui va le faire à votre place. Il va au passage vous délivrer la configuration de votre serveur.
J’ai utilisé seo4ajax dans sa version gratuite, mais il existe également des sites comme seo.js, prerender, brombone, etc.