Search engine optimization with Angular 15
What are we going to do?
We will use Google's Lighthouse test tool to test our application.
We will use the Angular version 13.1.1 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
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.
User-agent: *
Disallow:
Sitemap: https://angular.ganatan.com/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>
"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.
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
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 1 : Getting started with Angular
- Step 2 : Routing with Angular
- Step 3 : Lazy loading with Angular
- Step 4 : Bootstrap with Angular
- Step 5 : Server Side Rendering with Angular
- Step 6 : HttpClient with Angular
- Step 7 : Transfer State with Angular
- Step 8 : Progressive Web App with Angular
- Step 9 : Search Engine Optimization with Angular
The source code of the application is available on github
https://github.com/ganatan/angular-app