Динамические метатеги ssr
Как выводить уникальные title, description, canonical, Open Graph и структурированные данные в серверном HTML каждой страницы.
Зачем формировать метатеги на сервере
У каждого публичного маршрута должны быть собственные title, description и canonical. Если эти значения появляются только после выполнения JavaScript, робот или сервис предпросмотра может получить общие данные приложения.
SSR формирует метаданные для текущего запроса, а SSG — во время сборки. Оба подхода позволяют включить их в первый HTML-ответ.
Основные и социальные метаданные
<title>Карточка товара</title>
<meta name="description" content="Описание товара">
<link rel="canonical" href="https://example.com/products/42">
<meta property="og:title" content="Карточка товара">
<meta property="og:image" content="https://example.com/images/42.jpg">Open Graph управляет видом ссылки в поддерживающих его сервисах. Эти теги не гарантируют рост трафика, но дают площадке корректный заголовок, описание и изображение для превью.
Данные маршрута и экранирование
Значения получают из того же источника, что и содержимое страницы. Пользовательские строки нужно экранировать, абсолютные адреса — собирать из доверенного базового URL, а отсутствующие изображения — заменять предсказуемым вариантом.
Для удалённой или закрытой страницы сервер должен вернуть подходящий код ответа. Одних метатегов недостаточно, если URL отвечает 200 для несуществующего объекта.
Проверка результата
Посмотрите исходный HTML каждого типа страницы, убедитесь в уникальности title и description и проверьте canonical. Для социальных карточек используйте валидатор выбранной площадки, а структурированные данные проверяйте отдельно.