Введение в метаданные в Nuxt

Пользователь видит заголовок вкладки и содержимое страницы, но браузер и внешние сервисы получают ещё служебную информацию из head документа. Часть её задаётся на уровне всего сайта, часть - отдельно для каждого адреса из app/pages.

В основном учебнике вы уже задавали заголовок вкладки и краткое описание через функцию useSeoMeta. Этого достаточно для поисковой строки и вкладки. Высший учебник добавляет соседние задачи: как ссылка выглядит в ленте соцсети, какая иконка стоит у домена, какие нестандартные теги нужны интерфейсу браузера, и что получают роботы при обходе сайта.

Когда адрес вставляют в мессенджер или соцсеть, сервис читает не разметку NuxtPage, а заранее объявленные поля карточки. Иконка сайта берётся из статического файла в public без Vue-шаблона. Отдельные метатеги, которых нет в наборе useSeoMeta, подключают через функцию useHead. Карта страниц и правила для краулеров часто отдаются как обычные текстовые ответы по фиксированным URL, без страницы в app/pages.

В Nuxt 4 такие ответы удобно держать в server/routes: имя файла задаёт путь, а обработчик возвращает XML или plain text с нужным заголовком content-type. Подробная схема серверных маршрутов разбирается в соседнем разделе; здесь достаточно коротких файлов для sitemap.xml и robots.txt.

Раздел собран на JavaScript. Страницы лежат в app/pages, корень приложения - app/app.vue. Примеры можно повторить в проекте my-app после npm create nuxt@latest и запуска npm run dev. Каждый урок разбирает один приём и не опирается на файлы из другой темы: шаги можно выполнять в чистом каталоге или постепенно наращивать один учебный проект.

Метаданные не заменяют вёрстку и не видны как обычный текст на экране, но влияют на первое впечатление от ссылки, на вкладку браузера и на то, какие адреса робот сочтёт допустимыми для индексации. Следующие уроки разберут каждый приём отдельно, без повторения базовых полей title и description как самостоятельную тему.