Angular 2 - управляем тегами title, meta description и meta robots

Чтобы оптимизировать страницы нашего приложения для поисковых систем нам необходимо иметь возможность управлять такими тегами как title, meta description и meta robots. Для этого в Angular 2 появились классы Title и Meta. На момент написания статьи данные классы в документации помечены как экспериментальные. Так что использовать на свой страх и риск.

Создадим сервис app.service.ts со следующим содержимым:

import {Injectable} from '@angular/core';
import {Title, Meta} from '@angular/platform-browser';

@Injectable()
export class AppService {

  constructor(private titleService: Title, private metaService: Meta) {  }

  setPageTitle(title: string) {
    this.titleService.setTitle(title);
  }

  setPageDescription(description: string) {
    this.metaService.updateTag({name: 'description', content: description});
  }
    
  setMetaRobots(robots: string) {
    this.metaService.updateTag({name: 'robots', content: robots});
  }
}

В модуле app.module.ts не забываем указать его в списке провайдеров:

import {AppService} from './app.service'

@NgModule({
  providers: [
    AppService
  ]
})

Теперь в других компонентах можем использовать наш сервис для задания тегов:

import {Component, OnInit} from '@angular/core';
import {AppService} from './app.service'

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private appService: AppService) {
  }

  ngOnInit() {
    this.appService.setPageTitle('My app page title');
    this.appService.setPageDescription('My app page description');
    this.appService.setMetaRobots('Index, Follow');
  }    
}