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

  1. Заключение

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

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

  • добавить метку
  • добавить теги
  • GetTag
  • getTags
  • updateTag
  • убрать тэг
  • removeTagElement

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

импорт {Meta} из '@ angular / platform-browser';

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

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

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

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

  • getTags
  • Подобно getTag, getTags также принимает строку селектора атрибута и возвращает массив HTMLMetaElement. Подобно:

  • updateTag
  • Этот метод обновляет содержимое любого существующего тега. Подобно:
    Здесь содержимое метатега описания обновляется. В этом случае он установлен на «Angular 4 meta service».

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

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

    Вот и все. Вы можете проверить демо на plnkr ,

    Заключение

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

    связанные с