Vous voulez faire indexer une Web App par les moteurs de recherche ? À moins que vous n'ayez développé votre application pour avoir un rendu serveur (SSR), vous avez comme unique solution, le prerender.

Si vous voulez connaitre les différentes solutions pour le SEO d'une Web App, c'est sur cette page : SEO pour les Web Apps React JS

Comment ça marche le prerender ?

Quand un "crawler" de moteur de recherche visite votre Web App, il est détecté grâce au User Agent indiqué dans le Header de la requête HTTP.
Pour Google par exemple, nous allons détecter "googlebot". La requête de ce robot est donc redirigée vers le serveur prerender qui va retourner en réponse, le HTML complet de l’application.

Comment fait le serveur prerender pour récupérer le code source ?

Le serveur prerender utilise le navigateur Chrome en mode Headless (sans interface). Il ouvre la page avec l’URL demandée et récupère le code source de la page.

2 solutions pour utiliser un serveur de prerender.

Utiliser pretender.io

La première solution et la plus simple, utiliser prerender.io. C’est un service payant. Vous installez le htaccess à la racine de votre Web App et c’est tout. Reste à payer...
prerender.io

Installer votre propre serveur de prerender.

Vous disposez d’un serveur avec un accès SSH sur lequel vous pouvez installer Node JS et Apache ? C’est parfait.
Voici la méthode pour installer simplement votre propre serveur de prerender.

Vous devez installer Apache et Node JS. Il y a une multitude de tutoriels sur le net. Je vous laisse donc faire une recherche par vous même.

1 - installer Chrome

Chose importante, installer Chrome sur votre serveur. C’est la base pour que votre serveur prerender fonctionne.
Voici un lien vers un tutoriel pour installer Chrome sur un serveur Ubuntu : https://blog.softhints.com/ubuntu-16-04-server-install-headless-google-chrome/
ou sur cette page https://tecadmin.net/setup-selenium-chromedriver-on-ubuntu/

Une fois effectué, vous pouvez tester l’installation avec cette commande :

  google-chrome-stable -version

2 - installer PM2

Pour faire tourner un serveur Node JS sur un serveur, vous pouvez le lancer simplement avec la commande:

  node index.js

Mais l’inconvénient, c’est qu’il va s’arrêter à la moindre erreur. Il faut donc une librairie qui va s’occuper de le redémarrer à chaque fois qu’il s’arrête.
Pour cela, j’utilise PM2. Un outil très simple d'utilisation qui s’occupe de gérer votre serveur Node JS à votre place.
Pour l’installer, il suffit de taper la commande suivante :

  npm install pm2 -g

Une fois effectué, vous avez accès à la commande :

  pm2 —help

Pour rappel, Npm est le gestionnaire de package de Node JS. Il vient avec l’installation de Node JS.
Personnellement, j’utilise Yarn à la place de Npm. Il est nettement plus rapide même si Npm a beaucoup progressé depuis la sortie de Yarn.
Pour installer Yarn : https://yarnpkg.com/en/docs/in...

3 - Cloner mon dépôt Github

J’ai réalisé un exemple de code pour installer un serveur de prerender. Vous allez le trouver à l’adresse suivante : https://github.com/ipatate/prerender-server


Une fois cloner sur votre serveur, à la racine du projet, lancer la commande suivante pour installer les dépendances et compiler les sources avec Babel :

  yarn && yarn build

Ensuite, renommez le fichier ecosystem.config.exemple.js en ecosystem.config.js

Ce fichier est utilisé par PM2 pour lancer le serveur.

Ensuite 2 choix :

Vous pouvez choisir d’utiliser la version open source de prerender. Il faut pointer PM2 vers prerender-index.js dans le fichier ecosystem.config.js.

Cela lance un serveur prerender avec quelques plugins pour améliorer la performance, comme un système de cache par exemple.


Sinon, j’ai développé un serveur Node JS qui utilise la librairie Puppeteer pour récupérer le code source de l’URL indiqué. Il y a également un système de cache pour gagner en performance.
Le code est simple et vous permet (si vous avez les compétences) d'améliorer et de customiser votre serveur. J'ai par exemple ajouté une méthode pour injecter l'attribut Async dans toutes les balises script. Pour ne pas bloquer le rendu avec du code externe.


Lancer le serveur, à la racine du projet, taper la commande :

  pm2 start

Si vous avez effectué toute l’installation parfaitement, vous devriez pouvoir accéder à votre serveur prerender avec la commande suivante (depuis votre serveur) :

  curl http://localhost:8000/render?url=http://exemple.com -w %{time_connect}:%{time_starttransfer}:%{time_total}
Réglage d’apache en mode Proxy.

Si vous voulez rendre le serveur prerender accessible de l’extérieur (accessible par le web), il faut utiliser le mode Proxy d’Apache. Dans cet exemple, le serveur Node JS est accessible par le port 8000.

ProxyPass redirige toutes les requêtes vers le serveur Node JS prerender. C'est totalement transparent.

  <VirtualHost *:443>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/...
    ServerName prerender.example.com
    ServerAlias preredender.example.com

    ProxyPass / http://localhost:8000/
    ProxyPassReverse / http://localhost:8000/
    ProxyPreserveHost On
    ProxyRequests Off
</VirtualHost>

Redirection du côté de votre Web App

Voici le code à implémenter (Apache) dans un htaccess ou dans le fichier de conf pour votre Web App. Il détecte les robots et redirige vers le serveur de prerender. C’est également le mode Proxy qui est utilisé.

  RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC]
RewriteRule ^/(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff))(index.html)?(.*) http://localhost:8000/render?url=https://exemple.com/$3 [P,L]

Tester votre Web App

Vous pouvez tester dans votre navigateur le rendu en utilisant un petit plugin Chrome. "User-Agent Switcher", permet de changer l’user agent de votre navigateur pour simuler un robot d'un moteur de recherche.

user-agent-switcher


Ainsi vous allez voir le rendu html comme si vous étiez Google.

Les avantages et les inconvénients du prerender

Les plus :

+ Simple à mettre en place
+ Marche sur une application déjà développée
+ Pas de choix de techno. Marche avec Angular, React JS ou Vue JS.


Les moins :

- peut parfois donner des réponses lentes par rapport à la vitesse du réseau.

Les basiques du SEO à respecter sur un site
SEO pour les Web Apps React JS