Search engine optimization with Angular

Updated : 08/09/2023 danny


We will use the Lighthouse test tool offered by google to test our application.

We will use the Angular javascript framework version 16.2.4

SEO avec Angular

What are we going to do ?


This is step 8 of our Angular guide which will allow us to obtain a PWA type Web Application .

All sources created 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
  • Server side rendering
  • Progressive Web App

We need to install our Angular application on a server (or virtual machine).
The following tutorial explains how
https://www.ganatan.com/tutorials/angular-sur-ubuntu


Noticed
The deployment of this application must be carried out on a server using the HTTPS protocol.
In this case, you must acquire a corresponding SSL certificate.

Lighthouse

Lighthouse is a Chrome extension that will allow us to perform several audits

  • Performance
  • Accessibility
  • Best practices
  • SEO


Ligthouse is accessible in Chrome by enabling the developer tools
We need to use Ctrl + Shift + J or F12 then select the Audit tab
Let's run the test with the Run audits button

The result obtained is as follows.

Lighthouse avant SEO et Angular

Modifications

The audit tests indicate to us a certain number of areas for improvement.
We will resolve them in order to improve the results obtained.

  • Add 2 robots.txt and sitemap.xml files
  • Edit angular.json file
  • Add Meta tags for SEO
  • Edit the home.component.ts file
  • Edit the app.component.html 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 of course be adapted according to your website and its address (just replace angular.ganatan.com with www.monsite.com)

Finally, you will need to modify the angular.json file to take these files into account.

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>2023-05-08T10:13:39+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/about</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/contact</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/signin</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/bootstrap-prototype</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/reactive-form</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/pagination</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/httpclient</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/contact/mailing</loc>
  <lastmod>2023-05-08T10:13:39+00:00</lastmod>
  <priority>0.64</priority>
</url>
<url>
  <loc>https://angular.ganatan.com/contact/map</loc>
  <lastmod>2023-05-08T10: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

For this 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 as follows.

src/app/modules/general/home/home.component.ts 
import { Component } from '@angular/core';
import { environment } from '../../../../environments/environment';
import { Feature } from './feature';
import { SeoService } from '../../../services/seo/seo.service';


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

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

  features: Array<Feature>;

  constructor(private seoService: SeoService) {

    const content =
      'This application was developed with ' + this.version + ' and ' + this.bootstrap +
      ' It applies Routing, Lazy loading and Progressive Web App (PWA)';

    const title = 'angular-seo Title : Home Page';

    this.seoService.setMetaDescription(content);
    this.seoService.setMetaTitle(title);

    this.features =
      [
        {
          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'
        },
      ];
  }


}

Conclusion

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

Lighthouse après SEO et Angular

Source Code

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

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

The following steps will allow you to obtain a prototype application.

​​​​​​​​​​​​​​
This last step allows you to obtain an example application

The source code for this final application is available on GitHub
https://github.com/ganatan/angular-app

​​​​​​​