По состоянию на 2026 год SEO-оптимизация Nuxt.js сайта сводится к правильному использованию инструментов, которые фреймворк предоставляет из коробки и через экосистему модулей. Разработчики Vue.js, выбравшие Nuxt 3 или Nuxt 4, получают серверный рендеринг, статическую генерацию и гибридные режимы. Эти возможности решают классическую проблему SPA-приложений с индексацией. Ниже разбираем все ключевые механизмы: от управления мета-тегами до тонкой настройки рендеринга и структурированных данных.
Nuxt.js и SEO
Одностраничные приложения на Vue.js рендерят контент в браузере. Поисковые роботы при индексации получают пустой HTML. Google научился исполнять JavaScript, но делает это с задержкой и не всегда успешно. В результате страницы медленно попадают в индекс, а динамический контент может теряться. Яндекс и Bing обрабатывают JS ещё избирательнее. Nuxt решает эти проблемы через универсальный рендеринг (SSR/SSG).
При настройке ssr: true (настройка по умолчанию в Nuxt 3) сервер выполняет Vue-компоненты и возвращает полностью готовый HTML. Робот получает контент сразу после первого запроса. Это сокращает время до индексации и повышает вероятность корректного отображения в поисковой выдаче. Статическая генерация (nuxt generate) идёт дальше: HTML-файлы создаются на этапе сборки и раздаются как обычная статика. Такой подход снижает нагрузку на сервер и даёт максимально быстрый ответ.
Гибридный рендеринг, доступный через routeRules в Nuxt 3/4, позволяет комбинировать стратегии для разных маршрутов. Например, страницы каталога отдаются как ISR с кэшем на 10 минут, посты блога пререндерятся статически, а личный кабинет остаётся CSR. Такой подход не просто улучшает SEO — он даёт контроль над каждым URL и помогает избежать типовых ошибок с индексацией служебных страниц.
На практике мы сталкивались с тем, что поисковики по-разному воспринимают SSR-контент. Google индексирует страницы быстрее, но для Яндекса критичен именно мгновенно отдаваемый HTML. Здесь выручает статическая генерация критичных страниц и уведомление поисковиков через IndexNow. Подробнее о взаимодействии Nuxt с поисковыми системами — в статье Nuxt.js — SEO и индексация.
useHead и useSeoMeta
Управление мета-тегами в Nuxt 3 построено на двух composable-функциях: useHead и useSeoMeta. Обе работают на сервере и на клиенте, обеспечивая реактивное обновление <head>.
useHead: полный контроль над head
useHead принимает объект с любыми тегами — <title>, <meta>, <link>, <script>, <style>. Можно указывать атрибуты, в том числе кастомные, например для Open Graph или Twitter Cards. Функция автоматически мержит данные, если вызывается в нескольких местах. Это удобно, когда базовые мета-теги заданы в шаблоне, а специфичные для страницы — в компоненте.
useHead({
title: 'Страница товара',
meta: [
{ name: 'description', content: 'Описание товара длиной до 160 символов' }
],
link: [
{ rel: 'canonical', href: 'https://example.com/product' }
]
})При SSR вызов useHead на сервере собирает все теги в итоговый HTML. На клиенте гидрация поддерживает актуальность. Это избавляет от дублирования кода между сервером и браузером.
useSeoMeta: типизированные мета-теги
useSeoMeta — надстройка над useHead с упрощённым синтаксисом для SEO-тегов. Вместо массива объектов вы передаёте плоский объект со свойствами: title, description, ogTitle, ogDescription, ogImage и так далее. Модуль сам преобразует их в нужные теги. Это снижает количество шаблонного кода и защищает от опечаток в именах мета-свойств.
useSeoMeta({
title: 'Контакты',
description: 'Наш адрес и форма связи.',
ogTitle: 'Контакты',
ogDescription: 'Свяжитесь с нами через форму или по телефону.',
ogImage: '/og-image.png',
twitterCard: 'summary_large_image'
})Используйте useSeoMeta для страниц, где не требуется кастомная логика в <head>. Для сложных сценариев с нестандартными тегами или условной вставкой скриптов — useHead.
definePageMeta против useHead
definePageMeta — макрос для настройки метаданных на уровне страницы. Он выполняется только в компонентах из директории pages/ и имеет доступ к объекту маршрута. Это позволяет динамически формировать заголовок на основе параметров URL, без проброса useRoute в useHead.
definePageMeta({
title: route => `Товар ${route.params.slug}`,
description: 'Страница товара в каталоге.'
})Однако definePageMeta ограничена мета-информацией и не позволяет произвольно добавлять теги в <head>. Если нужно вставить скрипт структурированных данных или кастомный <link>, используйте useHead внутри страницы или лейаута. На проектах с каталогом из 15 000 товаров мы применяем definePageMeta для базового title/description и useHead для канонических ссылок и hreflang, чтобы не загромождать конфигурацию страниц.
Модуль @nuxtjs/seo
Экосистема Nuxt предлагает комплексный модуль @nuxtjs/seo, который объединяет несколько утилит под единой точкой входа. На момент 2026 года модуль включает в себя @nuxtjs/sitemap, @nuxtjs/robots, @nuxtjs/og-image и @nuxtjs/schema-org. Установка выполняется одной командой.
npx nuxi module add @nuxtjs/seoПосле подключения в nuxt.config.ts модуль автоматически генерирует sitemap всех статических и динамических маршрутов, формирует robots.txt, предоставляет composable для структурированных данных и создаёт Open Graph изображения. Подробнее о генерации карты сайта — в материале Как создать sitemap для Nuxt.js сайта.
Сравнение отдельных модулей и @nuxtjs/seo
| Возможность | Отдельные модули | @nuxtjs/seo |
|---|---|---|
| Sitemap | @nuxtjs/sitemap — ручная настройка | Автоматически для всех страниц, с фильтрацией по noindex |
| Robots.txt | @nuxtjs/robots — конфиг в nuxt.config | Генерация на основе правил из маршрутов и модуля sitemap |
| OG Image | @nuxtjs/og-image — требует отдельных композаблов | Встроен в SEO-мета, автоматическая подстановка |
| Schema.org | nuxt-schema-org — отдельный composable | Единый useSchemaOrg, интегрированный с мета-тегами |
| Конфигурация | Каждый модуль требует отдельного блока в nuxt.config | Централизованная секция seo |
Единый модуль снижает риск конфликтов и упрощает обновление. Например, при добавлении новой страницы sitemap обновляется без дополнительных действий. Если страница помечена как noindex через definePageMeta или useSeoMeta, модуль автоматически исключает её из sitemap и добавляет правило в robots.txt.
Практический пример настройки @nuxtjs/seo
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/seo'],
seo: {
// базовый URL для абсолютных путей в sitemap и канонических ссылках
baseUrl: 'https://example.com',
// настройки sitemap
sitemap: {
exclude: ['/admin/**', '/personal/**'],
autoLastmod: true
},
// генерация robots.txt
robots: {
rules: [
{ userAgent: '*', allow: '/' },
{ userAgent: 'Yandex', disallow: '/admin' }
]
}
}
})Open Graph изображения генерируются «на лету» через Satori. Достаточно передать объект с заголовком, подзаголовком и логотипом. Изображение не нужно сохранять на диск — оно отдаётся как ответ сервера по пути /__og-image__/static/....
Режимы рендеринга
Выбор режима рендеринга влияет на индексацию, скорость загрузки и нагрузку на сервер. Nuxt 3 поддерживает четыре базовых стратегии: SSR, SSG, CSR и гибридную. Начиная с Nuxt 3.8, гибридный рендеринг стал основным, а параметр ssr: true лишь включает серверный рендеринг по умолчанию, но не исключает статическую генерацию.
Конфигурация режимов
Ключевой инструмент — свойство routeRules в nuxt.config.ts. Оно задаёт правила для конкретных путей или групп. Каждое правило определяет стратегию рендеринга и кэширования. Рассмотрим типовые значения.
| Правило | Описание | Пример использования |
|---|---|---|
| ssr: false | Чистый CSR; HTML пустой, рендер на клиенте | Админ-панель, дашборды |
| prerender: true | Генерация статики на этапе сборки | Блог, лендинги, страницы с постоянным контентом |
| swr: 3600 | ISR с устареванием кэша; страница отдаётся из кэша, затем фоново обновляется | Каталог товаров, где цена меняется не срочно |
| isr: 600 | Гибридный вариант, похож на swr, но с более точным контролем stale-while-revalidate | Часто обновляемые списки |
| cache: { maxAge: 300 } | Заголовки кэширования для CDN | API-маршруты, которые не меняются часто |
Гибридный рендеринг позволяет точечно выбирать стратегию. Например, на сайте с 50 000 товаров статическая генерация всех страниц затянет сборку на часы. С помощью routeRules мы пререндерим только 500 избранных товаров, а остальные генерируем по первому запросу с кэшированием через ISR.
Prerendering конкретных маршрутов
По умолчанию nuxt generate обходит приложение и находит все пути по внутренним ссылкам. Этого может не хватить для динамических маршрутов, которые не связаны перекрёстными ссылками. В Nuxt 3 маршруты для пререндеринга задаются в конфигурации Nitro.
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ['/user/1', '/user/2'],
// можно использовать функцию для запроса из API
async routes() {
const users = await $fetch('https://api.example.com/users')
return users.map(u => `/user/${u.id}`)
}
}
}
})Этот подход гарантирует, что даже страницы с далеко спрятанной глубиной попадут в статику. На проекте интернет-магазина мы генерировали так карточки товаров, которые не попали в категорийные списки из-за фильтрации, но должны были индексироваться.
useFetch и useAsyncData для SEO
Данные, от которых зависит контент страницы, должны загружаться на сервере, чтобы попасть в исходный HTML. useFetch и useAsyncData — основные composable для асинхронных запросов в Nuxt. По умолчанию они выполняются и на сервере, и на клиенте. На этапе SSR запрос уходит, результат сериализуется вместе с HTML, и на клиенте гидрация использует готовые данные без повторного обращения к API.
Чтобы поисковый робот получил полный контент, следует избегать вызова useFetch в клиентском хуке onMounted без соответствующего серверного предзапроса. Правильный шаблон:
const { data: product } = await useFetch(`/api/products/${route.params.slug}`)
// В шаблоне выводим product.title, product.description
При генерации статики вызов useFetch срабатывает на этапе сборки, и результат зашивается в HTML. Если API возвращает разные данные в зависимости от заголовков или IP, учитывайте это — статический HTML будет содержать «замороженный» ответ. Для таких случаев применяйте ISR или SSR без пререндеринга.
Оптимизация изображений
Изображения прямо влияют на Core Web Vitals, особенно на показатель LCP (Largest Contentful Paint). С 2024 года Google заменил FID на INP, но задержка отрисовки самого большого элемента остаётся критичной. Модуль @nuxt/image (или nuxt/image) автоматически оптимизирует картинки, генерируя srcset, преобразуя форматы и применяя lazy loading.
Модуль поддерживает несколько провайдеров: встроенный IPX для обработки на лету, Cloudinary, imgix, Storyblok и другие. IPX запускается на том же сервере Nitro и не требует внешних сервисов. При большом трафике лучше использовать Cloudinary или imgix, чтобы снять нагрузку с ноды.
Пример компонента с адаптивным изображением:
<template>
<NuxtImg
src="/product-hero.jpg"
format="webp"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Товар в интерьере"
loading="lazy"
/>
</template>Sizes и srcset формируются автоматически на основе конфигурации провайдера. Loading="lazy" исключает изображения из критического пути рендеринга для внеэкранных картинок. Для главного баннера лучше использовать priority: true, чтобы браузер загружал его без задержки.
На проекте с блогом на 5 000 статей мы столкнулись с тем, что дефолтное качество IPX создавало размытые превью. Решением стала тонкая настройка параметров сжатия для каждого провайдера. Для IPX это делается через image.ipx.quality в nuxt.config, для Cloudinary — через экологичные трансформации.
Structured Data
Микроразметка в формате JSON-LD помогает поисковым системам понимать тип контента и формировать расширенные сниппеты. Nuxt предлагает модуль nuxt-schema-org, который в составе @nuxtjs/seo предоставляет composable useSchemaOrg.
Пример для страницы товара:
useSchemaOrg([
defineProduct({
name: 'Смарт-часы',
description: 'Водонепроницаемые часы с GPS',
image: '/watch.jpg',
offers: {
price: '299.99',
priceCurrency: 'RUB',
availability: 'InStock'
}
})
])Модуль автоматически сериализует схему, добавляет тег <script type="application/ld+json"> в <head> и обеспечивает её вывод как на SSR, так и на статике. Для списков товаров используйте defineItemList, для хлебных крошек — defineBreadcrumb.
Важно не дублировать данные в микроразметке и видимом контенте. Поисковики могут пессимизировать сайт за несоответствие. Наша практика: сначала верстаем карточку, а затем по тому же объекту данных строим схему. Это исключает расхождения.
Перенаправления
Редиректы с кодом 301 сообщают поисковикам, что страница переехала навсегда. В Nuxt 3 их можно реализовать двумя способами: через серверный обработчик событий или через модуль nuxt-redirects.
defineEventHandler для кастомных редиректов
Создайте файл server/api/redirects.get.ts или добавьте middleware. Например, для массового перенаправления старых URL на новые по карте:
export default defineEventHandler((event) => {
const redirects = {
'/old-page': '/new-page',
'/old-blog/2022': '/blog/2022'
}
const path = event.path
if (redirects[path]) {
sendRedirect(event, redirects[path], 301)
}
})Этот код выполняется на сервере, поэтому робот получает 301 сразу, без клиентского JavaScript. Для более сложной логики можно загружать карту редиректов из базы данных или внешнего API.
Nuxt Redirects модуль
Модуль nuxt-redirects (или @nuxtjs/redirects в составе SEO-комплекта) позволяет описывать редиректы прямо в nuxt.config:
export default defineNuxtConfig({
redirects: {
'/category/old': '/category/new',
'/promo': 'https://new-domain.com/promo'
}
})Он поддерживает регулярные выражения, статус-коды и конфигурацию на основе маршрутов. На продакшене модуль интегрируется с Nitro и обрабатывает редиректы до того, как запрос дойдёт до Vue-приложения, что даёт минимальную задержку.
Уведомление поисковых систем о новых страницах
Даже при идеально настроенном серверном рендеринге и карте сайта поисковики могут неделями не заходить на сайт. Для ускорения индексации в 2026 году стандартом стал протокол IndexNow. Его поддерживают Яндекс, Bing, Naver, а Google принимает сигналы в экспериментальном режиме. Протокол работает просто: после публикации новой или обновлённой страницы вы отправляете POST-запрос с URL на конечную точку поисковика. Тот в течение нескольких минут приходит и забирает контент.
Сервис Index-Now.ru берёт на себя отправку запросов ко всем поддерживающим системам. Вы передаёте список новых URL, и платформа одновременно оповещает Яндекс, Bing, Naver и Google. Это избавляет от написания интеграции для каждого поисковика. На одном из проектов с новостным сайтом после внедрения такого оповещения мы сократили среднее время попадания новости в выдачу с трёх дней до нескольких часов. Сервис особенно полезен для динамических сайтов на Nuxt, где контент генерируется регулярно и требует оперативной индексации.
Часто задаваемые вопросы
Нужно ли включать SSR для всех страниц в Nuxt 3, если SEO важно?
Не обязательно. Для страниц, которые должны индексироваться и содержат уникальный контент, SSR или SSG критичны. Для личных кабинетов, админок и вспомогательных разделов можно оставить CSR. Используйте routeRules, чтобы задать ssr: false или prerender: false для исключённых маршрутов. Главное — не отдавать пустой HTML ботам на целевых страницах.
Чем useHead отличается от definePageMeta в контексте SEO?
useHead подходит для любых компонентов и даёт полный контроль над тегами в <head>, включая скрипты и стили. definePageMeta используется только в страницах из pages/ и предоставляет реактивные мета-теги с доступом к параметрам маршрута. Для SEO-метаданных удобнее definePageMeta, но если нужны кастомные теги, комбинируйте с useHead.
Как динамически генерировать sitemap, если маршруты зависят от API?
Модуль @nuxtjs/sitemap поддерживает асинхронное получение списка URL через свойство dynamicUrls. Вы можете указать функцию, которая запрашивает все необходимые пути из API и возвращает массив. Например, для блога: dynamicUrls: async () => { const posts = await fetchPosts(); return posts.map(p => `/blog/${p.slug}`) }. Карта обновится при генерации сайта или при запросе на /sitemap.xml в режиме SSR.
Как быть с хлебными крошками для SEO?
Хлебные крошки стоит реализовывать на двух уровнях: визуальном (через компонент на странице) и в структурированных данных. Для микроразметки используйте defineBreadcrumb из useSchemaOrg. Убедитесь, что канонические ссылки на каждом уровне указывают на себя, а не на родительскую страницу. Это помогает поисковикам правильно выстроить иерархию.
Какие инструменты использовать для аудита SEO Nuxt-приложения?
Рекомендуем связку: Google Search Console для контроля индексации и Core Web Vitals, Яндекс.Вебмастер для отслеживания ошибок в Яндексе, Lighthouse в Chrome DevTools для измерения производительности. Для глубокого анализа отрендеренного HTML используйте curl с User-Agent бота или сервисы типа SEO-анализаторов, которые умеют ждать JavaScript. Дополнительно проверьте, что сервер возвращает корректный статус-код (200/301/404) и заголовок Content-Type с charset=utf-8.