Search engine optimization avec Angular 13

23/12/21 danny


Nous allons utiliser l'outil de test Lighthouse proposé par google pour tester notre application.

Nous utiliserons le framework javascript Angular version 13.1.1

SEO avec Angular

Qu'allons nous faire ?


Il s'agit de l'étape 9 de notre guide Angular qui nous permettra d'obtenir une Application Web de type PWA.

Tous les sources créés sont indiqués en fin de tutoriel.

L' application est à l'adresse suivante 


Avant de commencer

L'application que nous allons tester utilise les fonctionnalités suivantes

  • Routing
  • Lazy loading
  • Bootstrap
  • Components
  • Services
  • Server side rendering
  • HttpClient
  • Transfer state
  • Progressive Web App

Il nous faut installer notre application Angular sur un serveur (ou machine virtuelle).
Le didacticiel suivant explique comment
https://www.ganatan.com/tutorials/angular-sur-ubuntu


Remarque
Le déploiement de cette application doit être effectué sur un serveur en utilisant le protocole Https.
Il faut dans ce cas acquérir un certificat ssl correspondant.


Lighthouse

Lighthouse est une extension de Chrome qui va nous permettre d'effectuer plusieurs audits 

  • Performance
  • Accessibilité
  • Best practices
  • SEO


Ligthouse est accessible dans Chrome en activant les outils de développement
Il nous faut utiliser Ctrl + Maj + J ou F12 puis sélectionner l'onglet Audit
Exécutons le test avec le bouton Run audits

Le résultat obtenu est le suivant.

Lighthouse avant SEO et Angular

Modifications

Les tests d'audit nous indiquent un certain nombre de points à améliorer.
Nous allons les résoudre afin d'améliorer les résultats obtenus.

  • Rajouter 2 fichiers robots.txt et sitemap.xml
  • Modifier le fichier angular.json
  • Rajouter les balises Meta permettant le SEO
  • Modifier le fichier home.component.ts
  • Modifier le fichier app.component.html

Sitemap

Nous allons créer les fichiers suivants

  • Robots.txt
  • Sitemap.xml


Le fichier sitemap.xml peut être obtenu en allant sur le site de génération  de sitemap
https://www.xml-sitemaps.com

Le fichier robots.txt est un fichier standard

Ces 2 fichiers seront bien sur adaptés en fonction de votre site internet et de son adresse (il suffit alors de remplacer angular.ganatan.com par www.monsite.com)

Il faudra enfin modifier le fichier angular.json pour tenir compte de ces fichiers.

src/robots.txt
User-agent: *
Disallow:
Sitemap: https://angular.ganatan.com/sitemap.xml
src/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->


<url>
  <loc>https://angular.ganatan.com/</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/about</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/contact</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/signin</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/bootstrap-prototype</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/reactive-form</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/pagination</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/httpclient</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/contact/mailing</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/contact/map</loc>
  <lastmod>2020-11-12T10:13:39+00:00</lastmod>
  <priority>0.64</priority>
</url>


</urlset>
angular.json
"options": {
    "outputPath": "dist/angular-starter/browser",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": [
      "src/favicon.ico",
      "src/assets",
      "src/manifest.webmanifest",
      "src/sitemap.xml",
      "src/robots.txt"
    ],

SEO

Nous utiliserons pour cela le service Meta fourni par angular pour utiliser et ajouter des meta balises.
Le fichier appelé lors du lancement de la première page est home.component.ts

Après modifications le code source obtenu sera le suivant.

src/app/modules/general/home/home.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../../../environments/environment';
import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  name = environment.application.name;
  angular = environment.application.angular;
  bootstrap = environment.application.bootstrap;
  fontawesome = environment.application.fontawesome;

  features: any;
  constructor(
    private meta: Meta,
    private titleService: Title,
    @Inject(PLATFORM_ID) private platformId: object) {
    this.features =
      [
        {
          name: 'Items',
          description: 'Items',
          icon: 'fab fa-bootstrap',
          link: 'httpclient'
        },
        {
          name: 'Bootstrap',
          description: 'How to use Buttons, Alerts, Pagination, Tables, Collapses',
          icon: 'fab fa-bootstrap',
          link: 'bootstrap'
        },
        {
          name: 'Components',
          description: 'Channel component with Input, Output and Event Emitter',
          icon: 'far fa-clone',
          link: 'components'
        },
        {
          name: 'Services',
          description: 'Use services to view a playlist and a youtube player',
          icon: 'fas fa-handshake',
          link: 'services'
        },
        {
          name: 'Reactive Forms',
          description: 'A model-driven approach to handling form inputs',
          icon: 'far fa-file-alt',
          link: 'forms'
        },
        {
          name: 'Template Driven',
          description: 'Forms are the mainstay of business applications',
          icon: 'far fa-file-alt',
          link: 'forms'
        },
      ];

  }

  ngOnInit(): void {

    if (isPlatformBrowser(this.platformId)) {
      let navMain = document.getElementById('navbarCollapse');
      if (navMain) {
        navMain.onclick = function () {
          if (navMain) {
            navMain.classList.remove("show");
          }
        }
      }
    }

    this.titleService.setTitle('angular.ganatan: Une Application Web avec Angular');
    this.meta.addTag({
      name: 'angular.ganatan',
      content: 'danny ganatan'
    });
    this.meta.updateTag(
      {
        name: 'description',
        content: 'Cette application a été développée avec Angular version 13.1.1 et bootstrap 5.1.3' +
          ' Elle applique le Routing, le Lazy loading, le Server side rendering et les Progressive Web App (PWA)'
      });

  }

}

Conclusion

Il ne reste plus qu'a effectuer un nouveau test d'audits pour obtenir le résultat final.

Lighthouse après SEO et Angular

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos guides complets

Démarrez avec angular CLI Démarrez avec angular CLI

Gérez le routing Gérez le routing

Appliquez le Lazy loading Appliquez le Lazy loading

Intégrez Bootstrap Intégrez Bootstrap


Utilisez Python avec Angular Utilisez Python avec Angular

Utilisez Django avec Angular Utilisez Django avec Angular

Utilisez Flask avec Angular Utilisez Flask avec Angular

Ganatan site Web avec Angular