Angular: Как работать с мета тегами title, description и другими

Метатег HTML хранит метаданные о документе HTML. Метаданные не отображаются на странице, но могут обрабатываться поисковыми роботами. Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора, последнего изменения и других метаданных. Метаданные могут использоваться браузерами (как отображать контент или перезагружать страницу), поисковыми системами или другими веб-сервисами. Мета-теги играют важную роль в SEO. В Angular 4 есть сервис с именем «Meta», который можно использовать для получения и добавления метатегов. Этот сервис может помочь вам установить соответствующие метатеги на основе активных маршрутов, что, в свою очередь, влияет на SEO вашего сайта. В этом посте рассказывается, как использовать этот сервис и получать / устанавливать метатеги HTML с помощью Angular 4 и выше.

Как установить метатеги HTML с помощью Angular 4

Сервис Meta довольно прост в использовании и имеет следующие методы и названия не требуют пояснений.

• addTag
• addTags
• getTag
• getTags
• updateTag
• removeTag
• removeTagElement

Нам нужно импортировать этот сервис из модуля @angular/platform-browser и внедрить его в ваш компонент или сервис. Подобно:

import { Meta } from '@angular/platform-browser';

addTag

Название метода объясняет его назначение. Он используется для добавления метатегов:

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})
export class HomeComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    this.meta.addTag({ name: 'keywords', content: 'Angular, Meta Service' });
  }
}

addTags

Метод addTag добавляет мета теги , один за другим, но с помощью addTags вы можете добавить сразу несколько мета тегов в одном наборе:

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})
export class HomeComponent {
  constructor(private meta: Meta) {
    this.meta.addTags([
      {name: 'description', content: 'How to use Angular 4 meta service'},
      {name: 'author', content: 'talkingdotnet'},
      {name: 'keywords', content: 'Angular, Meta Service'}
    ]);
  }
}

Оба метода addTag и addTags также принимают второй параметр (forceCreation), который является булевым значением (true / false) которое указывает, следует ли создавать тег если он уже существует:

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})
export class HomeComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' },true);
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
  }
}

и ниже сгенерированный HTML:

Здесь метатег description был добавлен дважды, поскольку для принудительного создания установлено значение true.

getTag

Метод getTag возвращает значение мета - тега. Этот метод принимает строку селектора атрибута и возвращает HTMLMetaElement. Вот пример того, как getTag можно использовать:

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})
export class HomeComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    const author = this.meta.getTag('name=author');
    console.log(author.content); //talkingdotnet
  }
}

getTags

Аналогично getTag, также принимает строку селектора атрибута и возвращает массив HTMLMetaElement:

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})
export class HomeComponent {
  constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    this.meta.addTag({ name: 'author', content: 'Other Author' }, true);
    const author = this.meta.getTags('name=author');
    console.log(author[0]); //
    console.log(author[1]); //
  }
}

updateTag

Этот метод обновляет содержимое любого существующего тега:

this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service' });

removeTag

Метод removeTag принимает селектор атрибута и удаляет тег. В реальном приложении вряд ли есть ситуации, когда вы захотите это сделать. Однако при необходимости вы можете использовать этот метод для удаления любого метатега:

this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
this.meta.removeTag('name="author"'); 

removeTagElement

Подобно методу removeTag, метод removeTagElementтакже удаляет метатег. Но он принимает HTMLTagElement напрямую вместо строкового селектора:

this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
const author = this.meta.getTag('name=author');
this.meta.removeTagElement(author); 

Здесь мы сначала получаем метатег author и передаем его removeTagElement для его удаления.

Заключение

Сервис Meta в Angular позволяет добавлять, обновлять, получать и удалять метатеги. Это помогает в создании динамических метатегов на основе активных маршрутов приложения Angular для улучшения SEO.