Maintenant que vous en savez plus sur la façon dont Googlebot interprète le JavaScript, intéressons-nous aux méthodes principales de rendu, ou rendering. Pour rappel, le rendering, c’est l’action d’interpréter le code de vos pages, dans le but d’afficher votre site web.
Si vous suivez ce cours, et surtout ce chapitre, c’est que vous avez déjà créé ou que vous souhaitez créer un site web grâce à un framework JavaScript, et que ce site aura également un but marketing et SEO. Si ce n’est pas le cas, pour rappel, il vaut mieux que le front de votre site vitrine soit codé avec un rendu classique en HTML/CSS !
À la date de publication de ce cours, voici les différentes solutions qui s’offrent à vous.
Le client-side rendering
Le client-side rendering consiste à laisser le navigateur interpréter le JavaScript pour générer le contenu HTML de votre site. Ainsi, lorsque le navigateur fait une requête au serveur, au lieu d’obtenir tout le contenu du document HTML lui-même, vous obtenez un document HTML simple, avec un fichier JavaScript qui permettra au navigateur de générer le reste du site.
Si l'optimisation SEO est votre objectif, mieux vaut éviter cette méthode de rendering. Rappelez-vous du chapitre précédent ; il y a 3 raisons pour lesquelles il vaut mieux ne pas préférer cette approche :
les erreurs plus ennuyeuses en JavaScript ;
le retard éventuel de Googlebot sur des nouvelles fonctionnalités JavaScript. GoogleBot limite certaines API et fonctionnalités ;
les ressources plus importantes à dépenser pour effectuer ce rendu.
De plus, Googlebot est l’un des seuls bots, si ce n’est le seul, à pouvoir crawler et indexer du contenu généré en JS. Les autres bots comme Bingbot (le robot du moteur de recherche Bing) en sont incapables, ou au mieux, beaucoup moins efficaces dans l’indexation du contenu JS.
Si vous souhaitez référencer votre site en Chine, en Russie ou dans d’autres pays utilisant d’autres moteurs de recherche que Google, il serait préférable d’éviter le client-side rendering.
Si j’ai déjà créé mon site, qui est pensé en client-side rendering, et que je n’ai pas le temps de le refaire, est-il quand même possible de l’optimiser ?
Oui, c’est possible. Cependant, comme dit dans le chapitre précédent, vous devrez, d’une part, respecter les bonnes pratiques SEO, puis faire en sorte que votre code s’adapte aux navigateurs et robots plus anciens.
Le mieux dans ce cas, est d’installer un prérendu, ou pre-rendering !
Installation d'un pre-rendering
Le pre-rendering est un processus qui permet de précharger tous les éléments d’une page, afin qu'ils soient crawlés et indexés.
Les solutions de pre-rendering vont intercepter une demande d’affichage pour voir si le user-agent consultant votre site est un robot d’indexation tel que Googlebot. Elles vont ensuite envoyer une version cache de votre site pour qu’elle soit générée avec tout le contenu, les images, etc. Si le user-agent n’est pas un robot, alors tout est chargé normalement.
Le pre-rendering n'est utilisé que pour optimiser l'expérience des bots.
Voici un exemple de solutions de pre-rendering :
Prerender.io : si vous utilisez Prerender.io, pensez bien à utiliser la dernière version ! Plus d’informations ici ;
Le server-side rendering
Le rendu côté serveur, ou server side rendering (SSR) correspond au fonctionnement des sites web classiques : le navigateur envoie une requête au serveur, celui-ci traite l’information et renvoie une requête http contenant le HTML complet au navigateur, qui peut ensuite facilement effectuer le rendu.
Il est tout à fait possible de penser et de concevoir votre application JavaScript en SSR, qu’elle soit codée en React, Angular ou Vue.
Deux avantages principaux en découlent :
un gain de performances perçues : en effet, le contenu est déjà prêt à être affiché, la page sera donc affichée plus rapidement ;
une meilleure indexation SEO.
Mais il y a aussi des désavantages :
la page sera affichée plus tôt, mais l’utilisateur ne pourra pas interagir avec, tant que les ressources JavaScript ne seront pas correctement chargées ;
le développement sera plus long et plus complexe en SSR.
Si vous allez développer votre site en Vue.js et que vous souhaitez mettre en place un SSR, voici la documentation : Le guide.
Choisissez la solution qui correspond le mieux à votre site
Récapitulons les deux situations qui se présentent à vous, et les solutions correspondantes :
si votre site web est déjà codé et n’a pas été prévu pour faire un rendu côté serveur, vous devrez vous orienter vers un prérendu ;
si vous créez votre site, l’idéal serait de le créer en JavaScript universel ou en SSR. Pour Vue.js, vous pourriez par exemple utiliser Nuxt et vous référer au guide cité précédemment. Ceci dit, ces techniques de développement sont complexes et nécessitent une expertise plus poussée.
Pensez évidemment à votre ROI avant tout : il s’agit de trouver le meilleur rapport entre le temps, ainsi que les ressources nécessaires au développement de votre site, et son impact sur l’expérience de vos utilisateurs et, in fine, sur vos revenus.
En bref
Il existe deux types de rendu : celui côté client (CSR) et celui côté serveur (SSR).
Pour le SEO, mieux vaut privilégier, si vous le pouvez le SSR.
Vous pouvez aussi opter dans la mise en place d’un prérendu, ou pre-rendering.
Maintenant que vous avez vu comment optimiser votre application web, vous verrez, dans le prochain chapitre, comment tester votre rendu !
