In this article we are going to talk about how you can add seo tools in angular application. Angular provides server side rendering where you can make an angular application fully seo friendly.
ng add @nguniversal/express-engine
I have a complete article on angular universal setup here. please have a look before proceeding as it is necessary to enable angular universal in your app in order to make your angular application seo friendly.
Angular SEO Meta Services
To use angular meta services we need to import meta and title from @angular/platform-browser angular library where we can file functions to implement seo meta services. lets create a new component called universal in my case by using this command
ng g c universal
And import Meta and title from this library.
import { Meta, Title } from '@angular/platform-browser';
Now lets import Meta and Title from plateform-browser and add them in the constructor to use the services. now see how we can add the title and meta description for this individual page.
import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Component({
selector: 'app-universal',
templateUrl: './universal.component.html',
styleUrls: ['./universal.component.css']
})
export class UniversalComponent implements OnInit {
pageTitle = 'This is Universal Page';
constructor( private title: Title,
private meta: Meta) { }
ngOnInit(): void {
this.title.setTitle(this.pageTitle);
this.meta.updateTag(
{ name: 'description', content: 'This is universal desciption here!' }
);
}
}
Now lets create a build to see if the desired changes are relected on browser? For that we need to create angular universal bundle using the following command:
npm run build:ssr
After you see the universal bundle generated successfully now we need to serve it on browser by using this command:
npm run serve:ssr
import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Component({
selector: 'app-universal',
templateUrl: './universal.component.html',
styleUrls: ['./universal.component.css']
})
export class UniversalComponent implements OnInit {
pageTitle = 'This is Universal Page';
constructor( private title: Title,
private meta: Meta) { }
ngOnInit(): void {
this.title.setTitle(this.pageTitle);
this.meta.addTags([
{ name: 'keywords', content: 'Angular Universal, SSR,HTML Tags, Meta tags, Angular Universal' },
{ name: 'robots', content: 'index, follow' },
{ name: 'description', content: 'This is universal desciption here!' },
{ name: 'author', content: 'Akash Chauhan' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'date', content: '2021-05-06', scheme: 'YYYY-MM-DD' },
{ charset: 'UTF-8' }
]);
}
}
And here is the result we get in view source of the page:
Functions in Meta Service
Now lets have a look on functions that meta service provides, we have all functions we need to complete our requirement while building angular seo friendly application with universal.
- addTag(): It used to add one meta tag.
- addTags(): You can add multiple meta tags at once in angular component.
- getTag(): Gets HTMLMetaElement for the specified meta selector in angular.
- getTags(): Returns array of HTMLMetaElement for the specified meta selector in angular.
- updateTag(): It is used to update the existing meta tag by name.
- removeTag(): Used to remove meta tag for the specified selector.
- removeTagElement(): Removes meta tag for the specified HTMLMetaElement in angular
If you don"t mind proceed with this extraordinary work and I anticipate a greater amount of your magnificent blog entries fivem