Search engine optimization avec Angular 8

14/11/19 dannyEnglish Version

Qu'allons nous faire ?


Nous allons utiliser l'outil de test Lighthouse proposé par google pour tester notre application.
Nous utiliserons le framework javascript Angular version 8.2.14

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
  • 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.


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
  • Changer les couleurs pour améliorer l'accessibilité
  • Modifier le fichier home.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>2019-11-14T09:32:30+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://angular.ganatan/about</loc>
  <lastmod>2019-11-14T09:32:30+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan/contact</loc>
  <lastmod>2019-11-14T09:32:30+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan/items</loc>
  <lastmod>2019-11-14T09:32:30+00:00</lastmod>
  <priority>0.80</priority>
</url>


</urlset>
angular.json
"options": {
  "outputPath": "dist/browser",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "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 { Meta, Title } from '@angular/platform-browser';
import { environment } from '../../../../environments/environment';

@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;

  constructor(
    private meta: Meta,
    private titleService: Title) {
  }

  ngOnInit() {
    this.titleService.setTitle('angular.ganatan: Une Progressive Web App développée 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 8.2.12 et bootstrap ' +
          ' Elle applique le Routing, le Lazy loading, le Server side rendering et les Progressive Web App (PWA)'
      });
  }

}

Accessibilité

Le fichier à modifier est home.component.html.
Les modifications de couleur sont les suivantes.
 

src/app/modules/general/home/home.component.html
<div class="card" style="width: 18rem;">
	<div class="card-body">
		<h5 class="card-title">Items</h5>
		<p class="card-text">Test HttpClient</p>
		<a href="#" routerLink="/items" class="btn btn-dark">Items</a>
	</div>
</div>

Conclusion

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


Laissez un commentaire

Votre avis
Cette adresse ne sera pas publiée