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