Search engine optimization with Angular 12

15/05/21 danny

What are we going to do?

We will use Google's Lighthouse test tool to test our application.
We will use the Angular version 12.0.0 javascript framework.

This is Step 9 of our Angular guide which will allow us to obtain a PWA Web Application.

All created sources are indicated at the end of the tutorial.

The application is at the following address

https://angular.ganatan.com

Before you start

The application we are going to test uses the following features

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

We need to install our Angular application on a server (or virtual machine).

Note
The deployment of this application must be done on a server using the Https protocol.
In this case, you must acquire a corresponding SSL certificate.

Lighthouse

Lighthouse is an extension of Chrome that will allow us to perform multiple audits

Performance
Accessibility
Best practices
SEO

Lighthouse is available in Chrome by activating development tools
We must use Ctrl + Maj + J or F12 then select the Audit tab
Run the test with the Run audits button

The result obtained is the following.

Modifications

The audit tests show us a number of areas for improvement.
We will solve them to improve the results obtained.

Add 2 robots.txt and sitemap.xml files
Edit the angular.json file
Add meta tags for SEO
Edit the home.component.ts file

Sitemap

We will create the following files

Robots.txt
Sitemap.xml

The sitemap.xml file can be obtained by going to the sitemap generation site
https://www.xml-sitemaps.com

The robots.txt file is a standard file
These 2 files will be adapted to suit your website and its address (just replace www.wosiris.com by www.mysite.com)
Finally, it will be necessary to modify the file angular.json to take into account these files.

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/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

We will use the Meta service provided by angular to use and add meta tags.
The file called when launching the first page is home.component.ts

After modifications, the source code obtained will be the following.

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 prototype',
          description: 'Bootstrap Prototype Description',
          icon: 'fab fa-bootstrap',
          link: 'bootstrap-prototype'
        },
        {
          name: 'Reactive Form',
          description: 'Reactive Form Description',
          icon: 'fab fa-bootstrap',
          link: 'reactive-form'
        },
        {
          name: 'Services',
          description: 'Services Description',
          icon: 'fab fa-bootstrap',
          link: 'services'
        },
        {
          name: 'Components',
          description: 'Components Description',
          icon: 'fab fa-bootstrap',
          link: 'components'
        },
        {
          name: 'Template Driven Forms',
          description: 'Template Driven Forms Description',
          icon: 'fab fa-bootstrap',
          link: 'template-driven-forms'
        },
      ];

  }

  ngOnInit(): void {

    this.loadScript('assets/params/js/index.js');

    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 11.2.10 et bootstrap 4.6.0' +
          ' Elle applique le Routing, le Lazy loading, le Server side rendering et les Progressive Web App (PWA)'
      });
  }


  loadScript(name: string): void {

    if (isPlatformBrowser(this.platformId)) {
      const s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = name;
      s.async = false;
      document.getElementsByTagName('head')[0].appendChild(s);
    }
  }

}

Conclusion

All that remains is to perform a new audit test to obtain the final result.

Source code

The source code used at the beginning of the tutorial is available on github
https://github.com/ganatan/angular-pwa

The source code obtained at the end of this tutorial is available on github
https://github.com/ganatan/angular-seo

The tutorials for obtaining the application are as follows

Step 10 : Build a Full Web application with Angular

The source code of the application is available on github
https://github.com/ganatan/angular11-app