SEO le malvoyant des applications Angularjs 1.x

Avez-vous déjà parlé des “Single Page Application” à un robot d’indexation ?

Jusqu’à présent, il ne pouvait pas en dire grand-chose car il était plutôt malvoyant des sites javascript/Ajax fournisseurs d’html.

Mais des recommandations ont été proposées pour rendre indexable les applications Ajax, notamment par Google https://developers.Google.com/webmasters/ajax-crawling/docs/getting-started, l’adaptation étant à la charge des développeurs.

Cependant, depuis octobre 2015, Google annonce que son Googlebot sait interpréter les feuilles de style et le javascript comme les navigateurs modernes. Reste à rendre accessible js et css pour le crawler (robots.txt). Les bonnes pratiques d’indexation des sites ajax étant dorénavant dépréciées par Google.

Ok, Google est leader sur la marché des moteurs de recherche mais il n’est pas le seul, pour preuve une liste des robots d’indexation http://www.useragentstring.com/pages/Crawlerlist/.

Ainsi, n’étant pas sectaire, je vous propose 3 solutions pour améliorer l’indexation de votre site AngularJS :

Choix 1 : Système d’aide à l’indexation “Homemade”

Utiliser phantoms.js (ou équivalent) ainsi qu’un système de cache pour servir des snapshots html aux robots d’indexation.

Créer des urls conviviales pour vos pages et proposer un fichier “sitemap.xml” (utile quelques soit votre choix).

Servir les snapshots html par détection du robot dans le header “user-agent” de la requête http.

Vous pouvez également détecter le paramètre “?_escaped_fragment _” dans la requête http pour identifier un appel du robot Googlebot (fonctionne aussi avec Bing).

Vous trouverez-ici un projet complet de mise en œuvre http://www.yearofmoo.com/2012/11/AngularJS-and-seo.html

Choix 2 : Service Prerender.io

Utiliser un service comme prerender.io, qui vous retourne les snapshots html de votre site lors du crawling de votre site.

Choix 3 : Fainéant

Laissez les robots interpréter css et js de votre application sans pré-rendu serveur du html. Si possible, Supprimer le hasbang de vos urls (pretty urls) pour simplifier vos urls au profit du SEO. Ce choix élimine toute indexation valable du contenu de votre site pour les moteurs de recherche ne sachant pas indexer les sites ajax.

Principe d’aide à l’indexation

Ici, je vous résume le principe d’aide à l’indexation si vous faite les choix 1 ou 2.

L’idée est de servir au moteur d’indexation du contenu HTML SEO so friendly, c’est-à-dire des contenus HTML optimisés pour l’indexation.

AngularJS n’est pas le meilleur élève pour le SEO, puisque la plupart des informations intéressantes pour l’indexation se trouvent dans les flux ajax.

Etape 0 (optionnel) : Proposer des urls interprétable par les robots.

Les moteurs Google et Bing transforment les urls contenant le fragment “#!”, ce fragment est remplacé par un argument “?_escaped_fragment_=”

Soit l’url suivante:

http://redfroggy.fr/#!/linkia/persons/1

Le crawler (Google ou bing) appellera l’url suivante :

http://redfroggy.fr/?_escaped_fragment_=/linkia/persons/1

Avec AngularJS & mode hashbang

Il faut configurer $location avec “!”

angular.module('HashBangURLs', []).config(['$locationProvider', function($location) {
  $location.hashPrefix('!');
}]);
//then add this module as a dependency within your primary module(s).

angular.module('HashBangURLs', []).config(['$locationProvider', function($location) {

$location.hashPrefix('!');

}]);

//then add this module as a dependency within your primary module(s).

Avec AngularJS & mode HTML5

Une fois le mode HTML5 configuré voir pretty urls.

Rajouter le fragment “!” dans l’index.html

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

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

Cela permet d’indiquer au robot Google qu’il y a du contenu ajax dans la page, il rajouter donc l’argument “?_escaped_fragment_=” à la requête.

Etape 1 : identifier les requêtes émanant des crawlers.

Cette étape consiste en une redirection des urls vers notre système fournisseur de snapshots html.

Détecter les urls avec paramètre “?_escaped_fragment_=”

Avec NGINX :

server {
  # ... your config for your server daemon
  # listen 80;
  # server_name  localhost;
  # root   /path/to/root/
  # index  index.html;
  if ($args ~ "_escaped_fragment_=/?(.+)") {
    set $path $1;
    rewrite ^ /snapshots/$path;
  }
}

server {

# ... your config for your server daemon

# listen 80;

# server_name localhost;

# root /path/to/root/

# index index.html;

if ($args ~ "_escaped_fragment_=/?(.+)") {

set $path $1;

rewrite ^ /snapshots/$path;

}

Pour les autres moteurs, vous pouvez détecter le moteur via le user-agent dans le header de la requête http.

Avec NGINX pour le moteur duckduckgo

server {
  # ... your config for your server daemon
  # listen 80;
  # server_name  localhost;
  # root   /path/to/root/
  # index  index.html;
  if ($http_user_agent ~ DuckDuckBot) {
    # regex à définir permettant d'extraire la route $path dans l'url
    ...
    rewrite ^ /snapshots/$path;
  }
}

server {

# ... your config for your server daemon

# listen 80;

# server_name localhost;

# root /path/to/root/

# index index.html;

if ($http_user_agent ~ DuckDuckBot) {

# regex à définir permettant d'extraire la route $path dans l'url

...

rewrite ^ /snapshots/$path;

}

Etape 2 : retourner les snapshots html

Une fois le robot identifié derrière la requête, il faut lui servir un contenu HTML statique SEO.

C’est ici que nous utilisons phantomjs ou prerender.io pour nous retourner le HTML statique.

Conclusion

Même si les moteurs d’indexation tendent à rattraper leur retard sur l’indexation des applications ajax, restons proactifs sur l’aide à apporter à nos applications AngularJS dans le domaine du SEO.

AngularJS est en beaucoup de point très séduisant, pour nous développeur, mais attention si vous souhaitez voler trop près du SEOleil, il n’est pas forcement le meilleur des équipements.

A bientôt