Optimiser une application Angular pour le SEO : le guide

Des frameworks comme Angular et React sont probablement les bibliothèques JavaScript les plus intéressantes dans le monde JavaScript. Si ces frameworks 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 pallier ce problème à travers trois points principaux :

Les avantages d’Angular

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 beaucoup plus fluide.

Seules les données dynamiques transitent

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

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 verra très peu Code HTML. Ce n’est que lorsque le framework entrera en vigueur 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 lui-même quand le framework a fini de rendre la page, ce qui implique un risque d’indexation de contenu incomplet.

Les liens profonds sont difficiles à indexer

En raison du manque 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 de HTML brut.

Heureusement, il est possible d’avoir un site performant, où il est facile de s’y retrouver, sans être condamné à souffrir d’un mauvais référencement. Voyons comment !

Comment optimiser votre application Angular pour le SEO ?

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

Les navigateurs et les robots n’accèdent qu’aux textes et aux liens de la page (ainsi qu’aux titres et à descriptifs ) seulement après, et seulement s’ils rendent le JavaScript. Cela limite le potentiel SEO de votre application Angular.

Heureusement, depuis la sortie d’Angular 11 et de ses nouvelles versions, Google a inclus de nouvelles bibliothèques par défaut pour rendre Angular parfaitement compatible avec le référencement. Ces bibliothèques permettent de modifier et paramétrer les balises meta, soit en configurant Angular Universal pour démarrer en mode pré-rendu, soit en laissant l’application gérer elle-même cet aspect.

Il existe toujours un bon moyen de supprimer 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 du contenu disponibles dès le début. ça charge. Bien sûr, le chargement des pages sur mobile et sur ordinateur doit être aussi vite que possible !

Les développeurs angulaires utilisent l’une des trois méthodes pour éradiquer ce problème avec succès : le rendu côté serveur, le pré-rendu ou le rendu dynamique.

Ces trois méthodes donnent le résultat attendu : les crawlers récupèrent l’intégralité du contenu au moment du chargement et l’indexent comme une page HTML normale. Cependant, ces trois méthodes fonctionnent légèrement différemment.

1. Rendu côté serveur

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

Cette méthode peut potentiellement réduire la vitesse de chargement des pages, en particulier si de nombreuses requêtes arrivent en même temps. Cela peut donc avoir un impact sur performances du site web 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 à se charger rapidement à la demande.

L’inconvénient, car il en nécessite un, c’est qu’à chaque modification apportée à une page, celle-ci devra reconstruire sa version statique.

3. Rendu dynamique

Avec le rendu dynamique, votre application a des pages HTML pré-rendues et les sert uniquement aux robots d’exploration. Les utilisateurs réels interagissent avec la version normale de l’application rendue par le 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 disposent de la version mise à jour de la page.

Conclusion

Chaque Framework JS a les moyens de relever le défi SEO. Angular fournit une solution complète appelée Angular Universal.

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