SEO
Next step in SEO is to set up meta-tags. If you want to know how to do it in Angular, this lesson will help you to find the answer.
Manipulating title and meta tags#
Last but not least, you need to set up <title> and meta-tags of your sub-pages. Generate a service that will be used for this purpose:
ng g s seo --skipTests
Implement SeoService by adding the following code to src/seo.service.ts:
import { Injectable } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
@Injectable({
providedIn: 'root',
})
export class SeoService {
private titleBase: string = `Angular Universal (work)shop - `;
constructor(private title: Title, private meta: Meta) {}
public setTitle(titlePart: string): void {
this.title.setTitle(this.titleBase + titlePart);
}
public setDescription(description: string): void {
this.meta.updateTag(
{ name: 'description', content: description }, 'name=description');
}
public setKeywords(keywords: string[]): void {
this.meta.updateTag(
{name: 'keywords',
content: keywords.reduce(
(prev, curr) => (prev += `, ${curr}`)
),
},
'name=keywords');
}
}
SeoService injects the Title and Meta services available in @angular/platform-browser. These services are used in the methods that SeoService exports:
setTitle()adjusts the<title>entity for each sub-page.setDescription()is used to manipulate<meta name="description">.setKeywords()is used to manipulate<meta name="keywords">.
Now you need to import and use SeoService in several components.
import { SeoService } from '../seo.service';
ProductsListComponent:
This page is a preview of The newline Guide to Angular Universal