SEO avec React : optimiser ses microapps sans perdre la boule
Le framework React est partout aujourd’hui et s’y retrouver confrontés est inévitable pour tous référenceurs techniques. L’avantage ? C’est beau. Le désavantage ? Ce n’est pas ce qu’il y a de plus simple à optimiser et les ressources sur le sujet ne sont pas légion. Voici comment avancer :
Qu’est-ce qu’une microapp sous React ?
React est une bibliothèque Javascript focalisée sur la création d’interfaces utilisateur (ce n’est pas un langage de programmation), et est principalement utilisé pour la création de « Single-Page Application » (SPA, application à page unique) et Microapps.
Quelques exemples de SPA sous React.js :
Ce sont des outils extrêmement populaires depuis un certain temps et agissant comme des « Lead Magnets », c’est à dire des générateurs de prospects très efficaces.
Le problème de la page unique
Les SPAs et microapps sont en général constituées de plusieurs vues, c’est-à-dire qu’il semble y avoir plusieurs pages visuellement, mais les moteurs de recherche n’en verront qu’une ( pour plusieurs raisons : URL unique, contenu dissimulé par le javascript), ce qui limite grandement les possibilités d’optimisation.
Afin d’éviter d’avoir une page principale fourre-tout, il est possible d’utiliser l’API History qui va permettre d’utiliser une URL distincte pour chaque vue, améliorant de fait la visibilité des différents contenus dans les résultats de recherche.
C’est-à-dire que l’on passe de :
www.monoutilcool.fr
pour l’ensemble du contenu à
www.monoutilcool.fr
www.monoutilcool.fr/faq
www.monoutilcool.fr/sujet-1
www.monoutilcool.fr/sujet-2
Lui donnant ainsi des allures de mini-site beaucoup plus évident à faire croître organiquement.
La visibilité du contenu dans le code
Un autre souci fréquent avec les microapps dans le code rendu (c’est à dire autre que le code source, où la plupart des éléments dynamiques ont été chargés, accessible en inspectant la page / Ctrl+Shift+I), est qu’en fonction de l’interaction, le contenu va parfois apparaître soudainement alors qu’il était invisible pour les moteurs de recherche d’entrée.
Pour déterminer ce qui est caché, ouvrez Chrome Dev Tools, puis interagissez avec un élément cliquable et regardez si des éléments apparaissent subitement dans le code et s’ils contiennent du contenu texte.
Rechargez la page, retournez dans Chrome Dev Tools, et regardez si ce contenu apparaît d’emblée sans interaction. Ce n’est pas le cas ? Alors c’est invisible pour Google.
Pour en avoir le coeur net, se rendre sur la recherche Google puis entrer site: www.monsite.com “mon contenu”. Aucun résultat ? Alors le problème est bien réel et il faut alors travailler avec les développeurs pour s’assurer que ce contenu important est bien visible dès le chargement initial de la SPA.
Et ensuite ?
Ensuite les bases du SEO technique s’appliquent sur la taille et le chargement des visuels, l’optimisation du chargement des scripts et du CSS, prerendering, etc…
Les microapps sont en général plus lourdes à charger que des pages standards. Les signaux web essentiels ainsi que la vitesse de chargement peuvent en pâtir, mais une fois dans la SPA, tout est fluide avec des temps de chargement minimes.
Plus compliqué que la moyenne, le SEO sur React n’en est pas moins efficace et la qualité visuelle des pages en vaut généralement la chandelle.