Le futur du web est mobile. Les gens consultent de plus en plus avec leurs smartphones. C’est pour cette raison que les Web Apps sont très certainement l’avenir en ce qui concerne les interfaces web.

Plus rapide et moins gourmandes en ressources réseau. Elles ont cependant, toujours un défaut : l'indexation par les moteurs de recherche.
Voici le code source d’une Web App dans votre navigateur.

Difficile pour un robot de comprendre le contenu.

  <!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>
    <body>
    <div id="app"></div>
    <script src="/main.27949762f01700a5a709.js"></script>
    </body>
</html>

Effectivement, même si Google affirme pouvoir indexer le JavaScript avec ses « crawler », d’après les derniers tests, ce n’est pas encore la panacée.
On se croirait presque revenu au temps des sites web réalisés avec Flash qui étaient quasi impossibles à indexer.
Heureusement, avec JavaScript, des solutions existent. Voici donc quelques propositions pour optimiser le SEO sur une Web App réalisé avec React JS.

Petite précision avant de commencer. L’article porte sur des web apps principalement écrites avec React JS. Si vous utilisez Vue JS, l’équivalent est indiqué.

Préparer votre application web

Je vous épargne toutes les méthodes d’optimisation d’un site pour le SEO, voir l'article Les éléments de base en SEO à mettre en place sur un site pour ça. Ce sont exactement les mêmes que pour un site classique.
Par contre, concernant les balises méta dans la partie Head, il faut ajouter la librairie react-helmet à votre application pour pouvoir les gérer facilement.

Avec cette librairie, vous pouvez simplement gérer les balise Title et Description à partir des composants.
React Helmet est également utilisable et conseillé par les solutions exposées plus bas.
En plaçant, ce code dans le jsx de votre component (après avoir installé react-helmet), les balises seront automatiquement mises à jour.

  <Helmet>
  <title>Nested Title</title>
  <meta name="description" content="Nested component" />
 </Helmet>

Pour Vue JS, vous avez la librairie vue-meta

3 différentes solutions pour le SEO avec des Web Apps

1 - Next JS

Next JS est framework basé sur Node JS et React JS. Il a été développé par la société Zeit (solutions cloud) pour faire un exemple de rendu serveur avec React JS. Il a été rapidement pris en main par la communauté et en seulement 2 ans, il en est à la version 7.0.

Le rendu serveur, Quésako ?

L’application est exécutée côté serveur (Node JS) comme dans votre navigateur et ensuite le code HTML est retourné comme réponse au navigateur.
Le problème de SEO est réglé et la vitesse d’affichage est améliorée. Ensuite, l’application se comporte normalement dans votre navigateur.

Le rendu serveur avec React

Depuis le début de sa création, React JS supporte le rendu serveur. Autrefois, on les appelait Application Universal, aujourd’hui, c’est Application SSR (Server Side Rendering). On peut donc depuis toujours rendre une Web App React JS côté serveur.
La difficulté vient avec les requêtes externes pour récupérer les data. Les appels sont asynchrones et il faut donc gérer la réception des réponses avant de rendre l’application. Il faut également gérer les librairies pour être compatible SSR.
Développer une application React JS avec un rendu serveur est donc une chose complexe.
Personnellement, je peux témoigner, puisque j’ai expérimenté avec le site calendrier.trail-republic.fr. C’était bien avant la sortie de Next JS. L’avantage d'utiliser le framework, c’est de s’appuyer sur une communauté et un code qui évolue au fil des implémentations et des évolutions de l’écosystème React.

Next JS
est l’idéal si vous souhaitez mettre en place une application Web performante et indexable par les moteurs de recherche.

Pour la gestion des balises meta Title et Description, Next JS utilise la librairie next/head au lieu de react-helmet. Elle s'implémente de la même manière.

L’équivalent pour Vue JS est Nuxt JS

2 - Gatsby

Gatsby est un générateur de site statique. Le principe est relativement simple. Vous développez votre application comme une application normale avec React JS. Vous bénéficiez de GraphQL pour récupérer les data nécessaires. Vous avez différent plug-in pour récupérer les data de vos sites. Wordpress, Drupal, etc. Vous pouvez également créer facilement des interfaces pour vos API privées.

La puissance de Gatsby

C’est au moment de compiler (build) et de publier votre application que Gatsby révèle toute sa puissance. En effet, il génère un fichier par page de votre application. Si vous avez 100 articles, il va générer 100 fichiers statiques. Pas besoin de serveur dynamique, pas besoin de base de données. Les pages sont lues comme des fichiers HTML, il n’y a pas plus rapide et plus sécurisé.

Pour quel usage ?

Vous l’aurez compris, Gatsby a besoin d’être recompilé pour prendre en compte les nouvelles data. Cela ne convient donc pas forcément pour un site qui ajoute du contenu quotidiennement. Par contre pour un site qui change très peu, c’est l'idéal.Pourquoi faire tourner du PHP avec une base de donnée pour un contenu qui change seulement tous les 6 mois ??

Gatsby recommande l'utilisation de react-helmet pour les meta Title et Description.

L’équivalent pour Vue JS est VuePress

3 - Prerender

Dernière solution pour le SEO d’une Web App, le prerender.
L’idée est de rediriger les robots d’indexation vers un serveur qui va ouvrir votre Web App dans un navigateur Chrome headless (sans interface), récupérer le HTML et le retourner au robot.
La redirection s’effectue au niveau du serveur (htaccess pour apache) avec une détection des robots. Les visiteurs normaux ont l’application classique, les robots ont l’application complète. C’est assez efficace et transparent.

Voici un exemple de serveur prerender codé avec Node JS et puppeteer sur mon compte Github. C’est relativement simple à mettre en place si vous avez un serveur avec un accès SSH.

Attention, il existe un service payant de prerender et une version open source. À vous de voir si vous souhaitez utiliser la version payante ou installer la version open source.

Voici un article qui explique comment installer un serveur prerender : Installer un serveur prerender pour le SEO de votre Web App

L’avantage du prerender, c’est qu’il peut être mis en place sur une application existante. Il marche également avec Vue JS, Angular, etc.

Comment choisir la meilleure solution SEO ?

Je vous ai résumé ici, les solutions les plus connues et surtout les plus fiables. Next JS ou Gatsby sont des projets avec des communautés très actives. Ce sont des solutions qui vont durer dans le temps.

Le système de prerender se repose sur du code Node JS et le navigateur Chrome. Des projets également fiables.

Pour faire le bon choix :

  • Vous développez un projet à partir de zéro ? Regardez du côté de Next JS ou Gatsby (si le contenu va peu changer)
  • Vous avez un projet bien avancé ou déjà en ligne ? regardez pour le prerender


N’hésitez pas à tester pour trouver la solution idéale pour vous.


Si vous avez besoin d’aide, n’hésitez pas à me contacter pour me parler de votre projet.

Installer un serveur prerender pour le SEO de votre Web App
6 étapes pour rendre votre entreprise visible sur internet