close

    Настройка тегов head

    Добавление тегов head (например, мета-тегов) на веб-страницы крайне важно для оптимизации SEO и корректного отображения при шаринге в социальных сетях. Например, протокол Open Graph управляет тем, как страница будет выглядеть при публикации в соцсетях.

    На данный момент Rspress автоматически добавляет следующие теги head:

    ТегОписание
    <meta name="generator" content="Rspress v${version}">Указывает генератор сайта и его версию
    <meta property="og:type" content="website">Тип Open Graph, фиксированное значение website
    <meta property="og:title" content="${title}">Заголовок Open Graph, берётся из заголовка текущей страницы (если доступен)
    <meta name="description" content="${description}">Описание страницы, берётся из метаданных или глобальной конфигурации (если задано)

    Если вы хотите добавить теги head, можно воспользоваться следующими способами:

    Глобальная конфигурация head

    В файле rspress.config.ts вы можете задать HTML-метаданные (теги head) для всех страниц. Подробности смотрите в разделе Конфигурация - head.

    Конфигурация через метаданные

    Вы можете изменять поля title и description в блоке метаданных, чтобы задать заголовок и описание для отдельных страниц.

    Также можно использовать метаданные - head, чтобы настроить пользовательские мета-теги страницы для оптимизации SEO.

    Например, если вы хотите добавить <meta name="og:description" content="Это описание"> в тег <head>, можно указать метаданные следующим образом:

    example.mdx
    ---
head:
  - - meta
    - name: og:title
      content: Это заголовок
  - - meta
    - name: og:description
      content: Это описание
---

    Компонент Head

    Если вам нужна более сложная настройка тегов head, вы можете использовать компонент Head, предоставляемый Rspress, чтобы динамически задавать теги head на страницах или в компонентах макета.

    Конфигурация html.tags в Rsbuild

    Через builderConfig.html.tags вы можете внедрять пользовательский контент в HTML, например добавлять код аналитики, скрипты или стили:

    rspress.config.ts
    import { defineConfig } from '@rspress/core';

export default defineConfig({
  builderConfig: {
    html: {
      tags: [
        {
          tag: 'script',
          attrs: {
            src: 'https://cdn.example.com/analytics.js',
          },
        },
      ],
    },
  },
});

    Подробности конфигурации см. в документации Rsbuild html.tags.

    Отличие от конфигурации head в Rspress
    • Конфигурация head в Rspress: Может получать доступ к информации о маршрутах, поддерживает динамическую установку тегов head в зависимости от разных страниц
    • Rsbuild html.tags: Статическая конфигурация времени сборки, подходит для глобального единого внедрения тегов (например, код аналитики)

    Если вам нужно динамически изменять содержимое head в зависимости от маршрутов страниц, используйте глобальную конфигурацию head или компонент Head.