Angular 7/8 SEO: Adding Title and Meta Tags to Your Universal App

In the previous tutorial, we've seen how to do server-side rendering of our Angular 8 application to make our app SEO friendly and increase the performance. Let's now learn how to add meta tags to our app which is also important for SEO.

Angular provides the Meta and Title services that allows you to either get or set the HTML meta tags and title.

In the previous tutorial, we've performed the following steps:

  • Step 1 - Setting up Angular CLI and Initializing a Project
  • Step 2 - Setting up Angular Universal
  • Step 3 - Building and Serving the App with Express Server

Now, let's do one more step!

Step 4 - Setting Meta Tags and Title

Open the src/app/app.component.ts file and start by importing the Meta and Title services as follows:

import { Component } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';

Next, inject both services via the component constructor:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Universal Example';

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

Next, import OnInit and implement it:

import { Component, OnInit } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';


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

Next, add the ngOnInit() method:

  ngOnInit() {
    this.titleService.setTitle(this.title);
    this.metaService.addTags([
      {name: 'keywords', content: 'Angular, Universal, Example'},
      {name: 'description', content: 'Angular Universal Example'},
      {name: 'robots', content: 'index, follow'}
    ]);
  }

Step 5 - Rebuild and Serve your App

Head back to your terminal, rebuild and serve the app using the following commands:

$ npm run build:ssr 
$ npm run serve:ssr

If you go to the http://localhost:4000/ address and inspect the source code, you should see the title changed to Angular Universal Example and the meta tags added: Angular SEO Meta Tags

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status