Angular & SEO – Rendre les applications Web monopages d’Angular 6 compatibles avec les moteurs de recherche
Dans le tutoriel suivant, nous allons jeter un coup d’œil à l’approche la plus facile qui soit pour se débarrasser de cette limitation pour votre application Angular 6 en utilisant le rendu côté serveur avec Angular Universal.
Pour commencer laisse d’abord configurer une nouvelle application Angular dans les étapes suivantes.
Pour configurer une nouvelle application Angular, nous utilisons Angular CLI. Pour installer Angular CLI sur votre système, utilisez le Node.js Package Manager de la manière suivante sur votre ligne de commande:
$ npm install -g @angular/cli
Ayant installé Angular CLI avec succès, il est possible d’utiliser la nouvelle commande ng pour configurer un nouveau projet Angular à partir de zéro :
$ ng new ngseo --routing
Avec l’option new nous disons qu’un nouveau projet Angular doit être créé, ngseo est le nom du nouveau projet et en utilisant l’option – routing nous nous assurons qu’une configuration de routage de base est ajoutée au projet également.
Une fois que le projet a été configuré avec succès, nous sommes en mesure de basculer dans le dossier du projet nouvellement créé:
$ cd ngseo
Et démarrer le serveur web de développement en utilisant Angular CLI à nouveau de la manière suivante:
$ ng serve -o
Vous devriez maintenant être en mesure de voir le résultat suivant dans le navigateur :
Comment les crawlers voient les applications Web à page unique
Maintenant que nous avons une application Angular en cours d’exécution, explorons comment les crawlers des moteurs de recherche voient notre site Web. Nous avons une bonne impression lorsque nous utilisons l’outil de ligne de commande curl pour accéder à notre site :
$ curl localhost:4200
Le résultat que vous obtenez en retour devrait ressembler à ce qui suit :
Ici vous pouvez voir que le contenu principal du site web ne fait pas partie de ce document HTML. Au lieu de cela, vous trouverez l’élément placeholder <app-root> à l’intérieur de la section body. Cela signifie qu’Angular insère le contenu du site Web lorsque le code JavaScript du côté est exécuté. Cependant, le crawler n’est pas en mesure de voir ce contenu parce que le code JavaScript n’est pas exécuté.
Angular Universal For Server-Side Rendering
Alors, quelle pourrait être la solution à ce problème ? Oui, c’est le rendu côté serveur (SSR). Lorsque le rendu côté serveur est effectué, le code JavaScript de l’application Angular est déjà exécuté sur le serveur et la structure et le contenu HTML complets seront également disponibles pour les crawlers web.
La technologie qui permet le rendu côté serveur pour les applications Angular est appelée Angular Universal. Angular Universal génère des pages d’application statiques sur le serveur par le biais d’un processus appelé rendu côté serveur.
Une description détaillée de la façon d’utiliser Angular Universal est disponible à https://angular.io/guide/universal. Cependant, il existe une autre approche qui rend l’ajout d’Angular Universal très simple : l’utilisation du package @ng-toolkit/universal.
Ajouter Angular Universal avec @ng-toolkit/universal pour rendre votre application Angular conviviale pour les moteurs de recherche
Le paquet @ng-toolkit/universal est ajouté à out projet en utilisant la commande ng une fois de plus de la manière suivante:
$ ng add @ng-toolkit/universal
Après avoir ajouté le paquet, ouvrez package.json et assurez-vous que le paquet webpack-cli est listé dans la section dépendances avec au moins la version 3.1:
"webpack-cli": "^3.1.0"
Si ce n’est pas le cas, modifiez cette entrée en conséquence et exécutez la commande suivante:
$ npm install
Puis, au lieu d’exécuter ng serve -o vous exécutez :
$ npm run build:prod
et
$ npm run server
Le serveur est démarré sur localhost:8080 et si vous accédez à cette URL dans le navigateur, vous devriez pouvoir voir à nouveau le site web de l’application angular par défaut.
Essayons d’accéder à nouveau au site web via curl:
$ curl localhost:8080
La sortie devrait maintenant ressembler à ce que vous pouvez voir dans la capture d’écran suivante :
Cette fois, le contenu complet du site HTML est inclus. La raison en est que le côté HTML a été rendu dans le cadre du processus de construction (côté serveur) et est maintenant disponible sans qu’il soit nécessaire d’exécuter du code JavaScript côté client. Ainsi, un crawler d’un moteur de recherche est capable de trouver le contenu du côté et peut s’assurer qu’il est ajouté aux résultats de recherche correctement.
Conclusion
Par défaut, Angular utilise le rendu côté client, ce qui est un problème lorsque votre site Web doit être répertorié dans les résultats des moteurs de recherche. La solution consiste à effectuer le rendu de l’application côté serveur et à générer des éléments HTML finaux que les crawlers des moteurs de recherche peuvent interpréter facilement.
Le rendu côté serveur pour les applications Angular peut être réalisé avec Angular Universal. L’ajout d’Angular Universal à votre application Angular existante est très facile en utilisant le package @ng-toolkit/universal.
Ce post a été publié en premier sur CodingTheSmartWay.com.
#1 Angular 6 – The Complete Guide
Maîtrisez Angular (Angular 2+, incl. Angular 6) et construisez des applications web impressionnantes et réactives avec le successeur d’Angular.js
Aller au cours …
Disclaimer : Ce post contient des liens affiliés, ce qui signifie que si vous cliquez sur l’un des liens de produit, je recevrai une petite commission. Cela aide à soutenir ce blog!