Le HTML, c’est bien ! Avec du CSS, c’est top ! Mais c’est quand même plus sympa avec du Javascript. Le problème c’est que Google & Co ont du mal à prendre en considération le contenu généré en javascript. Malgré tout, il faut savoir que Google avance sur le sujet et commence à prendre en compte le contenu généré en JS (Un article interessant sur le sujet).
Comment référencer un site avec du javascript ?
En attendant que tout le monde soit au point sur le sujet, il faut que chaque contenu généré en Javascript soit lisible par les bots.
Vous avez deux solutions: soit vous enlevez tout votre javascript. Au moins, ça a le mérite d’être efficace.
Et sinon, vous pouvez générer le contenu en cache et rediriger les bots vers ce contenu. Pour les plus techniques d’entre vous, Google explique comment mettre en place ce genre de solution.
Où, quoi, comment ?
Lorsqu’un bot arrive sur votre site, la requête est envoyé sur votre serveur. Et c’est maintenant que votre mise en cache démarre.
Si vous avez bien configuré votre serveur, la requête va être redirigée vers votre dossier de cache et le contenu html de la page aura été au préalable généré dans un fichier. Et Google va donc recevoir votre page html avec tout le html généré comme si un utilisateur venait d’arriver sur votre site.
Prerender, comment ça marche ?
Dit comme ça, ça parait simple. Ce n’est pas forcement très compliqué mais il va falloir mettre les mains dans le cambouis. Sortons les gants et allons-y. Pour l’explication qui va suivre, nous allons utiliser l’outil prerender.io afin d’avoir un exemple concret:
1 – Votre serveur va récupérer la requête et comme celle ci provient d’un bot (Google, Bing & compagnie). La requête sera redirigée vers Prerender.io et non vers votre serveur PHP, NodeJS, Ruby …
2 – Prerender va vérifier si un snapshot (une capture) de votre page été créée.
2.a – Si c’est le cas, alors Prerender va chercher le bon fichier HTML et son contenu sera renvoyé au bot. Ainsi le bot récupère la page HTML comme un utilisateur la verrait.
2.b – Si ce n’est pas le cas. Un snapshot va être crée grâce un outil: PhantomJS. Cet outil va executer le javascript et renvoyer le html qui va bien (exactement ce que ferait votre navigateur). Ce contenu HTML sera sauvegardé dans un fichier pour les fois suivantes et renvoyé au bot.
Le truc bien avec Prerender, c’est qu’il gère l’étape 2 entièrement. Il vous suffira juste de configurer votre serveur pour l’utiliser selon le language utilisé.
Pour les plus courageux d’entre vous, voici un tutoriel préparé aux petits oignons pour mettre en place prerender avec un serveur NodeJS.