Les frameworks comme Angular et React sont probablement les bibliothèques Javascript qui captent le plus l’attention dans le monde Javascript.

Si ces framework offrent de nombreux avantages, ils demandent un effort supplémentaire pour que les sites sur lesquels ils opèrent soient correctement référencés.

Dans cet article nous allons voir pourquoi, et comment palier à ce problème.

Les avantages d’Angular

Les avantages de recourir à Angular sont nombreux.

Les pages ne sont pas entièrement rechargées

Lorsque l’utilisateur navigue sur la page, seules quelques parties de celle-ci sont remplacées, ce qui rend l’expérience plus fluide.

Seules les données dynamiques transitent

Après le premier chargement de la page, seules les données dynamiques transitent, lorsque l’utilisateur navigue dans l’application.

Les inconvénients d’Angular

Le moteur de recherche doit « deviner » quand la page est complète

Lorsqu’une page est visitée, le moteur de recherche ne verra que très peu de code HTML. Ce n’est qu’au moment où le framework entre en jeu que la page sera entièrement rendue, une fois que le serveur aura envoyé les données.

Le problème est que le moteur de recherche doit déterminer seul le moment ou le framework a terminé de rendre la page, ce qui implique un risque d’indexer un contenu incomplet.

Les liens profonds sont difficiles à indexer

En raison de l’absence de prise en charge de HTML5, les applications utilisant Angular basent leurs URL de navigation dans des ancres HTML (URL avec #, comme /#section1).

Il est donc très difficile pour les moteurs de recherche d’indexer ces URL en tant que pages distinctes.

Il existe des moyens de le faire, mais c’est pénible et il sera toujours difficile d’obtenir une indexation correcte, contrairement à l’utilisation du simple HTML.

Heureusement, il est possible d’avoir un site performant, où il facile de naviguer, sans pour autant être condamné à subir un mauvais référencement. Voyons comment !

Comment optimiser votre application Angular pour le SEO ?

Par défaut, les applications Angular s’exécutent côté client. Cela signifie que la première chose qui se charge lorsque votre application démarre est un shell HTML vide. Il ne contient rien d’autre qu’un script : c’est lui qui rendra tout le contenu et qui complètera la page.

Les navigateurs et les robots d’exploration n’accèdent aux textes et aux liens de la page (ainsi qu’aux titres et aux descriptions <meta> qu’après, et seulement s’ils rendent le JavaScript. Cela limite le potentiel de référencement de votre application Angular.

Heureusement, depuis la sortie d’Angular 11 et de ses versions plus récentes, Google a inclus de nouvelles bibliothèques par défaut pour rendre Angular parfaitement adapté au référencement. Ces bibliothèques permettent de modifier et de définir les balises méta, soit en configurant Angular Universal pour qu’il démarre en mode de pré-rendu, soit en laissant l’application gérer elle-même cet aspect.

Il reste une bonne façon d’éliminer les obstacles à l’indexation et au classement de vos pages dans les moteurs de recherche : vous devez vous assurer que chaque URL de votre application renvoie une page HTML entièrement rendue avec des métadonnées et un contenu disponibles dès son chargement. Bien sûr, le chargement de la page, tant sur les mobiles que sur les ordinateurs de bureau, doit être le plus rapide possible !

Les développeurs Angular ont recours à l’une des trois méthodes suivantes pour réussir à éradiquer ce problème : le rendu côté serveur, le pré-rendu ou le rendu dynamique.

Ces trois méthodes donnent le résultat attendu : les robots d’exploration obtiennent l’intégralité du contenu au moment du chargement et l’indexent telle une page HTML normale. Toutefois, ces trois méthodes on un fonctionnement légèrement différent.

1. Rendu côté serveur

Avec le rendu côté serveur, chaque page HTML est rendue sur le serveur pendant l’exécution. Cela signifie qu’avant le chargement de la page, il faut un certain temps au serveur pour rendre le HTML sur demande et l’envoyer au navigateur.

Cette méthode peut potentiellement diminuer la vitesse de chargement de la page, surtout si de nombreuses requêtes arrivent en même temps. Cela peut donc impacter les performances du site et affecter son classement.

2.  Pré-rendu

Avec le pré-rendu, un fichier HTML (en cache) de chaque URL est rendu au moment de la construction. Cela signifie que tous les fichiers HTML de votre application sont rendus à l’avance, de sorte que les pages sont prêtes à être chargées rapidement sur demande.

L’inconvénient, car il en faut un, est que pour chaque modification apportée à une page, il faudra reconstruire sa version statique.

3. Rendu dynamique

Avec le rendu dynamique, votre application dispose de pages HTML pré-rendues et les sert uniquement aux robots d’exploration. Les vrais utilisateurs, eux, interagissent avec la version normale de l’application, rendue côté client.

Cela n’empêche pas l’inconvénient précédent, il faudra tout de même reconstruire chaque page modifiée pour que les robots aient la version à jour de la page.

Conclusion

Chaque framework JS dispose de moyens pour relever le défi du référencement. Angular fournit une solution complète appelée Angular Universal.

Vous n’arrivez pas à améliorer le SEO de votre application Angular ? Trouvez un développeur Angular sur Codeur.com.  Ce professionnel saura paramétrer votre application de manière à optimiser son référencement naturel.