close

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

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

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

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

    Как определяется описание

    По умолчанию Rspress извлекает первый содержательный абзац под заголовком h1 в качестве описания страницы (см. markdown.extractDescription). Если результат извлечения вас не устраивает, вы можете указать поле description в frontmatter, чтобы переопределить его:

    example.mdx
    ---
description: Пользовательское описание для этой страницы.
---
    Совет

    Вы можете использовать навык агента rspress-description-generator для автоматической генерации описаний для всех страниц. Подробнее см. Навыки агентов.

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

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

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

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

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

    example.mdx
    ---
title: Пользовательский заголовок страницы
description: Пользовательское описание страницы для мета-тега description и Open Graph.
---

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

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

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

    Компонент Head

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

    Хук useHead

    Если вы уже находитесь внутри React-компонента и предпочитаете декларацию в виде объекта, используйте useHead:

    import { useHead } from '@rspress/core/runtime';

export function PageMeta() {
  useHead({
    title: 'Пользовательский заголовок страницы',
    meta: [
      {
        name: 'description',
        content: 'Пользовательское описание страницы для SEO и социальных сетей.',
      },
    ],
  });

  return null;
}

    По сравнению с Head, useHead обычно более удобен, когда итоговые теги зависят от пропсов, состояния или вспомогательных функций.

    Конфигурация 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 или хук useHead.