Как установить метатеги 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.

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

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

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

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

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

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

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

Заключение

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

связанные с

Похожие

Комментарии