WordPress et le référencement ajax

Je vais vous présenter une technique que j’utilise depuis quelques temps sur plusieurs sites,  pour rendre facilement indexable du contenu appelé en ajax, sous WordPress.

Cette méthode ne nécessite pas de déployer un « headless browser » comme dans l’article sur « Le référencement de l’Ajax avec un Headless Browser« . De plus, elle est relativement simple à mettre en place.

Par contre, il faut que le site soit conçu de façon à ce que single.php ne soit pas utilisé dans le template, comme par exemple dans le tutoriel pour « Mettre en place une navigation Ajax dans WordPress« .

Pour illustrer cet article, je vais prendre comme référence le site d’artplaTV (site hors ligne depuis), où tous les contenus du site sont chargés en ajax, sur la home.

Le référencement de l’Ajax et WP

Dans un thème WordPress en ajax normalement conçu, l’internaute n’a pas d’accès naturel aux pages d’article (générées via single.php). Les contenus en ajax sont chargés sur des pages de plus haut niveau telles que la home ou les pages de catégorie.

Par exemple ici, les pages de contenu et les articles s’affichent sur la home. Single.php n’est pas exploité pour la navigation de l’internaute.

Lorsque l’on veut que Google indexe un contenu en ajax, on le lui fait savoir en utilisant un hashbang (#!) dans l’URL. Le robot, pour accéder au contenu, va remplacer le hashbang dans l’URL par le « escaped_fragment ».

Une url de la forme « http://www.artplatv.com/#!/vimeo/nuit-blanche » va devenir « http://www.artplatv.com/?_escaped_fragment_=/vimeo/nuit-blanche ».

Le robot effectue ensuite une requête sur cette adresse. Ce paramètre est censé être intercepté, par exemple par un « headless browser » afin de servir au robot une capture HTML de la page.

Mais il est possible de se passer de ce système assez lourd. Nous allons demander à WordPress d’intercepter ce paramètre d’URL, qui annonce clairement qu’il s’agit d’un moteur de recherche, pour lui servir la page normale (single.php) de l’article.

Pour ce faire, il faut modifier une ligne de code dans une classe de WordPress. En cas de mise à jour, il faudra éventuellement réappliquer la modification.

Les modifications dans WordPress

Dans le fichier »wp-includes/class-wp.php », il faut modifier une ligne au début de la fonction parse(). Cette ligne est censée récupérer l’URL requise :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

$req_uri = $_SERVER['REQUEST_URI'];

[/pastacode]

Remplacez là par :

[pastacode lang= »php » message= » » highlight= » » provider= »manual »]

$req_uri=str_replace('?_escaped_fragment_=/', '', $_SERVER['REQUEST_URI']);

[/pastacode]

Notre modification permet, si l’url demandée contient « ?_escaped_fragment_=/ », de le supprimer de l’URL

De cette manière, quand Google, Bing ou Yahoo voudront accéder au contenu de la page « http://www.artplatv.com/#!/vimeo/supakitch-koralie-euphorie », il accéderont en fait au contenu de la page « www.artplatv.com/vimeo/supakitch-koralie-euphorie » (merci de ne pas faire de lien direct vers cette page ^^).

Dans le thème, il faut donc concevoir une page single qui propose un contenu simple et accessible pour les moteurs de recherche.

Mais c’est du cloaking ?

Oui, cette technique peut s’apparenter à du cloaking. Il est tout à fait possible de servir à Google un contenu sur-optimisé pour le référencement. Ne serait-ce qu’en allégeant le poids de la page…

J’encourage ceux intéressés par ce hack à l’utiliser avec « respect » pour nos amis les moteurs, car Google pourra facilement s’en apercevoir.

Les limites de cette méthode

Selon les mise à jour, il faudra refaire la modification de la fonction parse, dans la classe-wp. Je n’ai pas trouvé de moyen efficace d’externaliser la chose dans le functions.php ou bien dans un plugin. Si quelqu’un a la solution, merci de partager…

De plus il reste certaines limitations propre à l’utilisation de l’ajax :

• Dans les SERPs de Google, l’aperçu des pages en ajax n’est pas disponible.
• Facebook, lorsque l’on voudra partager un lien, n’arrivera pas a parser l’URL correctement (il s’arrêtera au hashbang).
• Pour l’utilisation de google analytics, il faut penser à rajouter un tracker d’évènement lors du changement de contenu d’une page, sinon toutes les statistiques ne porteront que sur la page mère.
  [pastacode lang= »javascript » message= » » highlight= » » provider= »manual »]

  //à ajouter dans le script qui charge vos contenus ajax
  //arg = l'url propre de votre contenu
  _gaq.push(['_trackPageview','/'+arg]); 

  [/pastacode]

• Les logiciels dédiés à la SEO type « seeUrank falcon » et « myPoseo » ne comprennent pas les hashbangs. Pour l’instant…

Conclusion sur WordPress et le SEO de l’Ajax

La technique expliquée ici me parait beaucoup plus simple à utiliser que celle nécessitant un headless browser. De plus, elle permet une optimisation plus poussée.

Grâce à elle, vous pourrez facilement concevoir un site dynamique sans craindre pour l’indexation de vos contenus.

Cet article a été co-rédigé par Willy Bahuaud et Geoffroy Couprie.