Generating Dynamic Meta Tags with Angular Universal
Provide a code example for dynamically creating meta tags in an Angular app using Angular Universal, allowing better content summary for search engines during the pre-rendering process.
import { Meta, Title } from '@angular/platform-browser';
constructor(private meta: Meta, private title: Title) {}
ngOnInit() {
// Set title
this.title.setTitle('Your Page Title');
// Set meta description
this.meta.updateTag({
name: 'description',
content: 'Your page description'
});
// Add custom meta tags dynamically
this.meta.addTags([
{ name: 'keywords', content: 'Angular, Universal, SEO' },
{ name: 'author', content: 'Your Name' },
{ name: 'robots', content: 'index, follow' }
]);
}
Inject the Meta and Title services from '@angular/platform-browser' and use them in the ngOnInit lifecycle hook to set the page title and update or add meta tags dynamically for improved SEO with Angular Universal.