Blog>
Snippets

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.