Tutoriel SEO Angular 4 (Universel + Angular CLI)

Table des Matières

1. Introduction
2. Angular et le référencement SEO
3. Angular Universal : Qu'est-ce que c'est ?
4. Avantages de l'utilisation d'Angular Universal pour le référencement SEO
5. Mise en place d'un projet Angular avec Angular Universal
6. Installation des dépendances nécessaires
7. Configuration de l'application Angular
8. Création du module de l'application côté serveur
9. Création du serveur Express
10. Configuration des fichiers de compilation TypeScript
11. Exécution de l'application avec Angular Universal
12. Améliorations pour le référencement SEO avec Angular Universal
13. Conclusion

Angular et le référencement SEO

La mise en place d'un référencement SEO efficace pour une application Angular peut être un véritable casse-tête pour les développeurs. Heureusement, Angular Universal offre une solution pour rendre une application Angular plus conviviale pour les moteurs de recherche. Dans cet article, nous allons explorer le concept d'Angular Universal et discuter de ses avantages pour le référencement SEO. Nous allons également vous guider étape par étape dans la mise en place d'un projet Angular utilisant Angular Universal.

Qu'est-ce que Angular Universal ?

Angular Universal est un framework qui permet le rendu côté serveur (SSR) d'applications Angular. Cela signifie que les pages de votre application Angular seront rendues côté serveur avant d'être envoyées au navigateur de l'utilisateur. Cette approche diffère du rendu côté client traditionnel où le rendu de la page se produit dans le navigateur de l'utilisateur à l'aide de JavaScript. Le rendu côté serveur présente plusieurs avantages en termes de référencement SEO, car il permet aux moteurs de recherche d'indexer facilement le contenu de votre application.

Avantages de l'utilisation d'Angular Universal pour le référencement SEO

L'utilisation d'Angular Universal pour le rendu côté serveur présente de nombreux avantages pour le référencement SEO de votre application Angular. Voici quelques-uns des avantages les plus importants :

1. Meilleur classement dans les résultats de recherche : Le rendu côté serveur permet aux moteurs de recherche de lire facilement le contenu de votre application Angular, ce qui peut améliorer son classement dans les résultats de recherche.
2. Contenu indexable : Avec Angular Universal, votre application Angular sera rendue en HTML côté serveur, ce qui permet aux moteurs de recherche de lire directement le contenu. Cela permet aux moteurs de recherche d'indexer toutes les pages de votre application.
3. Réduction du temps de chargement : En rendant le contenu côté serveur, Angular Universal permet de réduire le temps de chargement de votre application. Cela peut améliorer l'expérience utilisateur et réduire le taux de rebond.
4. Amélioration de l'accessibilité : Le rendu côté serveur facilite l'accès au contenu de votre application pour les utilisateurs ayant des configurations ou des limitations spécifiques.
5. Support des réseaux sociaux : Le rendu côté serveur permet également aux plateformes de médias sociaux de lire facilement le contenu de votre application, ce qui peut améliorer le partage social et l'engagement de votre public.

En utilisant Angular Universal, vous pouvez maximiser les performances et le référencement SEO de votre application Angular tout en offrant une expérience utilisateur de haute qualité.

Mise en place d'un projet Angular avec Angular Universal

Pour commencer à utiliser Angular Universal dans votre projet Angular, vous devrez suivre quelques étapes de configuration. Nous allons vous guider à travers ces étapes afin que vous puissiez démarrer rapidement.

Installation des dépendances nécessaires

Avant de pouvoir démarrer avec Angular Universal, vous devrez installer les dépendances nécessaires. Assurez-vous d'avoir Node.js et NPM installés sur votre machine. Ensuite, ouvrez votre terminal et exécutez les commandes suivantes :

npm install @angular/platform-server @angular/animations --save
npm install @nguniversal/express-engine express --save

Ces commandes installeront les modules @angular/platform-server et @angular/animations pour le rendu côté serveur, ainsi que les modules @nguniversal/express-engine et express pour le serveur Express.

Configuration de l'application Angular

Une fois les dépendances installées, vous devrez effectuer quelques modifications dans votre projet Angular existant pour activer Angular Universal. Tout d'abord, ouvrez le fichier app.module.ts de votre projet.

Ajoutez l'importation du module ServerTransferStateModule à partir de @angular/platform-browser :

import { ServerTransferStateModule } from '@angular/platform-browser';

Ensuite, ajoutez ce module au tableau des imports dans la section imports :

imports: [
  BrowserModule.withServerTransition({ appId: 'my-app' }),
  ServerTransferStateModule
]

Cela permettra à Angular Universal de prendre en charge le rendu côté serveur.

Création du module de l'application côté serveur

Maintenant, nous allons créer un module spécifique pour le rendu côté serveur de notre application. Créez un nouveau fichier nommé app.server.module.ts à la racine de votre projet.

Ouvrez ce fichier et ajoutez les importations nécessaires :

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

Ensuite, créez une classe AppServerModule qui étend le module ServerModule :

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Cela indique à Angular de démarrer notre application en utilisant le module ServerModule pour le rendu côté serveur.

Création du serveur Express

Maintenant, nous allons créer le serveur Express qui sera responsable du rendu côté serveur de notre application. Créez un nouveau fichier nommé server.ts à la racine de votre projet.

Ouvrez ce fichier et ajoutez les importations nécessaires :

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import * as express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { readFileSync } from 'fs';
import { join } from 'path';

Ensuite, définissez les chemins vers les fichiers générés par Angular CLI en ajoutant ces lignes :

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = JSON.parse(
  readFileSync(join(process.cwd(), 'dist', 'server', 'main.js'), 'utf8')
);

Ensuite, créez une instance d'application Express et définissez le moteur de rendu Angular Express à l'aide de la fonction ngExpressEngine :

const app = express();

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

Enfin, définissez le gestionnaire de rendu Express pour renvoyer les fichiers statiques du dossier dist et écouter les demandes sur le port 4000 :

app.set('view engine', 'html');
app.set('views', 'dist');

app.get('*.*', express.static('dist', {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(4000, () => {
  console.log('Server listening on port 4000');
});

Cela configure le serveur Express pour utiliser le moteur de rendu Angular Express et renvoyer les fichiers statiques de notre application.

Configuration des fichiers de compilation TypeScript

Pour terminer la configuration, nous devons mettre à jour les fichiers de configuration TypeScript pour prendre en compte les modifications apportées au serveur Express. Ouvrez d'abord le fichier tsconfig.app.json et ajoutez les options suivantes :

"angularCompilerOptions": {
  "entryModule": "./src/app/app.module#AppModule"
}

Cela indique à l'Angular Compiler où se trouve le module principal de notre application.

Ensuite, ouvrez le fichier tsconfig.json à la racine de votre projet et ajoutez les options suivantes :

"angularCompilerOptions": {
  "genDir": "./dist/generated",
  "entryModule": "./src/app/app.module#AppModule"
}

Ces options spécifient le répertoire où les fichiers générés par l'Angular Compiler seront stockés ainsi que le module principal de notre application.

Exécution de l'application avec Angular Universal

Maintenant que nous avons terminé la configuration, nous pouvons exécuter notre application Angular avec Angular Universal. Ouvrez votre terminal et exécutez la commande suivante :

npm run build:ssr

Cela va compiler votre application avec Angular Universal et créer un dossier dist avec les fichiers nécessaires pour le rendu côté serveur.

Ensuite, exécutez la commande suivante pour démarrer le serveur Express :

npm run serve:ssr

Votre application Angular avec Angular Universal est maintenant en cours d'exécution sur le port 4000. Vous pouvez accéder à votre application en ouvrant votre navigateur et en visitant http://localhost:4000.

Améliorations pour le référencement SEO avec Angular Universal

Maintenant que votre application Angular utilise Angular Universal pour le rendu côté serveur, il y a quelques améliorations supplémentaires que vous pouvez apporter pour améliorer le référencement SEO de votre application :

1. Gérer les métadonnées : Utilisez les modules Title et Meta d'Angular pour définir des titres et des méta-descriptions uniques pour chaque page de votre application. Cela permettra aux moteurs de recherche de mieux comprendre le contenu de chaque page.

2. Gérer les URL canoniques : Angular Universal utilise des URL dynamiques pour le rendu côté serveur, ce qui peut entraîner des problèmes de contenu dupliqué. Utilisez les balises <link rel="canonical"> pour indiquer aux moteurs de recherche quelle est l'URL canonique de chaque page.

3. Améliorer la structure des URL : Utilisez des URL conviviales pour les moteurs de recherche en incluant des mots clés pertinents dans vos URL. Cela peut aider à améliorer le classement de votre application dans les résultats de recherche.

4. Optimiser les performances : Assurez-vous que votre application est optimisée en termes de performances, de temps de chargement et de vitesse. Les performances de votre application joueront un rôle important dans son classement dans les résultats de recherche.

En suivant ces conseils, vous pouvez maximiser le potentiel de référencement SEO de votre application Angular avec Angular Universal.

Conclusion

Dans cet article, nous avons exploré le concept d'Angular Universal et discuté des avantages de son utilisation pour le référencement SEO des applications Angular. Nous avons également fourni un guide étape par étape pour la mise en place d'un projet Angular avec Angular Universal. En utilisant Angular Universal, vous pouvez rendre votre application Angular plus conviviale pour les moteurs de recherche et améliorer son classement dans les résultats de recherche. N'oubliez pas d'optimiser vos métadonnées, vos URL et les performances de votre application pour optimiser son potentiel de référencement SEO.

FAQ Q&R

Q: Qu'est-ce qu'Angular Universal ? A: Angular Universal est un framework qui permet le rendu côté serveur d'applications Angular. Il permet de rendre une application Angular plus facilement indexable par les moteurs de recherche et offre plusieurs avantages en termes de référencement SEO.

Q: Quels sont les avantages de l'utilisation d'Angular Universal pour le référencement SEO ? A: L'utilisation d'Angular Universal pour le rendu côté serveur permet d'améliorer le classement de votre application dans les résultats de recherche, d'indexer le contenu de votre application de manière plus efficace, de réduire le temps de chargement et d'améliorer l'accessibilité de votre application.

Q: Comment configurer un projet Angular avec Angular Universal ? A: Pour configurer un projet Angular avec Angular Universal, vous devez installer les dépendances nécessaires, modifier le fichier app.module.ts pour activer Angular Universal, créer un module pour le rendu côté serveur, créer un serveur Express et mettre à jour les fichiers de configuration TypeScript.

Q: Comment améliorer le référencement SEO avec Angular Universal ? A: Pour améliorer le référencement SEO de votre application Angular avec Angular Universal, vous pouvez gérer les métadonnées, gérer les URL canoniques, améliorer la structure des URL et optimiser les performances de votre application.

Q: Pourquoi est-il important d'utiliser Angular Universal pour le référencement SEO d'une application Angular ? A: L'utilisation d'Angular Universal pour le rendu côté serveur permet d'améliorer le classement et l'indexation de votre application dans les résultats de recherche. Cela permet aux moteurs de recherche de lire facilement le contenu de votre application Angular et d'offrir une meilleure expérience utilisateur.

Q: Y a-t-il des inconvénients à utiliser Angular Universal pour le référencement SEO ? A: La mise en place d'Angular Universal peut nécessiter un certain temps et des connaissances techniques supplémentaires. De plus, le rendu côté serveur peut être plus coûteux en termes de ressources serveur par rapport au rendu côté client traditionnel. Cependant, les avantages en termes de référencement SEO l'emportent généralement sur ces inconvénients.

Q: Où puis-je trouver plus d'informations sur Angular Universal et le référencement SEO d'applications Angular ? A: Vous pouvez trouver plus d'informations sur Angular Universal et le référencement SEO d'applications Angular dans la documentation officielle d'Angular et dans divers tutoriels et articles en ligne. Assurez-vous de consulter les ressources recommandées à la fin de cet article pour en savoir plus.