Angular & SEO : Optimisez votre application en Angular 6 pour les moteurs de recherche

Table of Contents

1. Introduction
2. What is Angular?
3. The SEO Challenge with Angular
4. Introducing Angular Universal
5. Setting Up an Angular Application
6. Adding Server-Side Rendering with Angular Universal
7. Using ng-toolkit/universal Package
8. Updating Webpack CLI Version
9. Building and Pre-rendering Your Angular Application
10. Starting the Web Server
11. Comparing the Results
12. Conclusion
13. Additional Resources

🇫🇷 Présentation de Angular et de ses défis SEO

Angular est un framework d'application Web à page unique (SPA) qui présente certains défis en matière de référencement. En raison de son rendu côté client, les moteurs de recherche ont du mal à afficher le contenu et la structure d'un site Angular. Cela signifie que votre site peut ne pas être correctement indexé et affiché dans les résultats des moteurs de recherche. Heureusement, il existe une solution : Angular Universal. Dans cet article, nous explorerons comment utiliser Angular Universal pour ajouter un rendu côté serveur à votre application Angular, permettant ainsi aux moteurs de recherche d'interpréter et de référencer correctement votre site.

1. Introduction

Dans cette ère numérique, le référencement est essentiel pour assurer la visibilité en ligne. Cependant, les frameworks SPA tels que Angular peuvent présenter des défis en matière de référencement. En effet, leur rendu côté client ne permet pas aux moteurs de recherche de voir le contenu et la structure de manière efficace. Cela peut avoir un impact négatif sur le classement de votre site dans les résultats de recherche. Heureusement, Angular Universal offre une solution à ce problème en introduisant le rendu côté serveur.

2. Qu'est-ce que Angular ?

Angular est un framework populaire développé par Google pour la création d'applications Web dynamiques et interactives. Il utilise la technologie JavaScript et offre de nombreuses fonctionnalités puissantes pour faciliter le développement d'applications complexes. Angular fonctionne en rendant le contenu côté client, ce qui signifie que tout le code est exécuté dans le navigateur du client. Cependant, cela pose des problèmes en termes de référencement, car les moteurs de recherche ne peuvent pas voir le contenu généré côté client.

3. Le défi SEO avec Angular

Les moteurs de recherche comme Google sont conçus pour analyser et indexer le contenu des sites Web en exécutant le code HTML. Cependant, avec des applications Angular, une grande partie du contenu et de la structure sont générés côté client à l'aide de JavaScript. Par conséquent, les moteurs de recherche ont du mal à voir et à analyser le contenu d'une application Angular, ce qui les empêche de l'indexer correctement dans les résultats de recherche.

4. Présentation d'Angular Universal

Angular Universal est un outil qui permet de résoudre le problème du référencement avec Angular en ajoutant un rendu côté serveur à votre application. Il fonctionne en générant une version pré-rendue de votre site Web, côté serveur, avant de la renvoyer aux moteurs de recherche et aux utilisateurs. Ce faisant, Angular Universal permet aux moteurs de recherche de comprendre et d'indexer correctement le contenu de votre site, améliorant ainsi votre classement dans les résultats de recherche.

5. Configuration d'une application Angular

La première étape pour utiliser Angular Universal consiste à configurer une nouvelle application Angular. Pour ce faire, nous utiliserons Angular CLI, l'interface de ligne de commande Angular. Si vous ne l'avez pas déjà installé, vous pouvez le faire en exécutant la commande suivante :

npm install -g @angular/cli

Une fois Angular CLI installé, vous pouvez créer une nouvelle application en exécutant la commande suivante :

ng new mon-application-angular

Assurez-vous d'ajouter l'option --routing pour ajouter une configuration de routage de base à votre application. Cela nous permettra de naviguer entre différentes pages dans notre application.

6. Ajout du rendu côté serveur avec Angular Universal

Maintenant que nous avons configuré notre application Angular de base, nous pouvons ajouter le rendu côté serveur en utilisant Angular Universal. Pour cela, nous utiliserons le package @ng-toolkit/universal qui simplifie grandement le processus d'ajout de rendu côté serveur à une application Angular.

Pour ajouter ce package à notre projet, nous devons exécuter la commande suivante :

ng add @ng-toolkit/universal

Cette commande télécharge et installe le package @ng-toolkit/universal dans votre projet. Une fois l'installation terminée, votre application Angular sera prête à utiliser le rendu côté serveur.

7. Mise à jour de la version de Webpack CLI

Pour utiliser Angular Universal, nous devons nous assurer d'utiliser la version appropriée de Webpack CLI. Pour ce faire, ouvrez le fichier package.json de votre projet et vérifiez la version de Webpack CLI sous la section devDependencies. Assurez-vous que la version est supérieure ou égale à 3.1.

Si vous utilisez une version inférieure de Webpack CLI, vous pouvez la mettre à jour en exécutant la commande suivante :

npm install -D webpack-cli@latest

8. Construction et pré-rendu de votre application Angular

Maintenant que notre configuration est terminée, nous pouvons commencer le processus de construction de notre application Angular avec Angular Universal. Pour cela, nous devons exécuter la commande suivante :

npm run build:ssr

Cette commande va lancer le processus de construction de notre application, en générant les fichiers nécessaires pour le rendu côté serveur. Une fois la construction terminée, nous aurons une version pré-rendue de notre application prête à être exécutée.

9. Démarrage du serveur Web

Maintenant que nous avons notre application Angular avec le rendu côté serveur prête, nous pouvons démarrer un serveur Web pour la tester. Pour cela, nous allons exécuter la commande suivante :

npm run serve:ssr

Cela va démarrer un serveur local qui écoute sur le port 4000 par défaut. Vous pouvez accéder à votre application à l'adresse http://localhost:4000 dans votre navigateur.

10. Comparaison des résultats

Maintenant que notre serveur Web est en cours d'exécution, nous pouvons comparer les résultats entre la version pré-rendue et la version générée côté client.

Dans votre navigateur, accédez à http://localhost:4000 pour voir la version pré-rendue de votre application. Vous remarquerez que tout le contenu est visible, y compris les en-têtes, les images et le contenu des pages.

Pour voir la version générée côté client, nous allons utiliser la commande curl dans votre terminal. Exécutez la commande suivante :

curl http://localhost:4000

Vous verrez maintenant la représentation HTML de votre application Angular telle qu'elle serait vue par les moteurs de recherche. Comparez les résultats avec la version pré-rendue pour voir la différence.

11. Conclusion

Grâce à Angular Universal, il est possible d'obtenir un référencement efficace pour les applications Angular. En ajoutant le rendu côté serveur, les moteurs de recherche peuvent désormais indexer correctement le contenu d'un site Angular, améliorant ainsi sa visibilité dans les résultats de recherche. N'oubliez pas d'ajouter Angular Universal à vos projets Angular pour assurer un référencement optimal et maximiser la visibilité en ligne.

12. Ressources supplémentaires

• Angular Universal (anglais)
• Angular CLI
• Node Package Manager (NPM)