Настройка мета-тегов для SEO в Nuxt

Главная

База знаний

nuxt

Запуск проектов

04 сентября 2025

Автор

Олег Марков

Введение

Если вы разрабатываете сайты на Nuxt, вам наверняка важно, чтобы ваш проект хорошо ранжировался в поисковых системах и был корректно представлен в соцсетях. Достигается это, в первую очередь, правильной настройкой мета-тегов. Nuxt предлагает удобный и гибкий способ по управлению мета-информацией для страниц сайта. Этот подход напрямую влияет на SEO-оптимизацию, внешний вид страницы в выдаче Google и других поисковых систем, а также на возможность красиво отображаться в соцсетях через Open Graph.

В этой статье я детально разберу, как работает настройка мета-тегов в Nuxt (и Nuxt 2 и Nuxt 3 — с акцентом на оба подхода), покажу примеры для базовых и динамических страниц, помогу понять общие best practice и поделюсь советами по отладке и тестированию SEO-мета-тегов.

Nuxt и head-менеджмент: как работает процесс

Для чего нужны мета-теги и как они влияют на SEO

Мета-теги — это информация, которая помещается в <head> документа. Примеры наиболее важных:

<title> — заголовок страницы в браузере и результатах поиска.
<meta name="description"> — краткое описание страницы для поисковых систем и социальных сетей.
Open Graph теги (og:title, og:description и др.) — форматируют вид страницы при расшаривании в соцсетях.
<meta name="robots"> — управление индексацией.
<link rel="canonical"> — ссылка на каноническую версию страницы.

Без правильной настройки этих тегов сайт не будет получать максимальный трафик из поиска и соцсетей.

Как Nuxt управляет head

Nuxt добавляет свою “надстройку” над head через специальные методы и плагины. В Nuxt 2 для этого отвечает свойство head в каждом компоненте или для роута. В Nuxt 3 используется useHead и composable-архитектура, что даёт больше гибкости.

Давайте я покажу, как выглядит базовая настройка для Nuxt 2 и Nuxt 3.

Настройка мета-тегов в Nuxt 2

Блок head в компонентах страниц

В Nuxt 2 добавить или изменить мета-теги можно прямо в каждом page-компоненте. Например:

export default {
  head() {
    return {
      title: 'Главная страница - Мой сайт', // Заголовок страницы
      meta: [
        { hid: 'description', name: 'description', content: 'Описание вашей страницы для поисковых систем' }, // Описание для SEO
        { hid: 'og:title', property: 'og:title', content: 'Главная страница - Мой сайт' }, // Open Graph для соцсетей
        { hid: 'og:description', property: 'og:description', content: 'Описание для соцсетей' }, 
      ],
      link: [
        { rel: 'canonical', href: 'https://example.com/' }, // Каноническая ссылка
      ]
      // можно добавить еще favicon, скрипты и стили, если требуется
    }
  }
}

hid используется для уникальной идентификации тега, чтобы Nuxt знал, какой именно мета-тег перезаписать при роутинге между страницами SPA.
Можно добавлять разные head-поля в каждом компоненте, чтобы для разных страниц были свои уникальные теги.

Динамические мета-теги

Зачастую теги должны подстраиваться под контент, например, для детальных страниц статей.

export default {
  asyncData({ params }) {
    // Получаем данные для статьи по slug
    return fetchArticle(params.slug).then(article => ({ article }))
  },
  head() {
    return {
      title: this.article.title,
      meta: [
        { hid: 'description', name: 'description', content: this.article.shortDesc },
        { hid: 'og:title', property: 'og:title', content: this.article.title },
        { hid: 'og:description', property: 'og:description', content: this.article.shortDesc }
      ]
    }
  }
}

Здесь показываю, как вы берёте данные с сервера в asyncData, а потом на их основе строите ваш head-блок.

Настройка глобальных мета-тегов

Иногда хочется задать значения “по умолчанию”, которые будут наследоваться всеми страницами, если не переопределены. Для этого измените файл nuxt.config.js:

export default {
  head: {
    titleTemplate: '%s — Мой сайт', // Формат для всех title
    meta: [
      { hid: 'charset', charset: 'utf-8' },
      { hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Общее описание сайта' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ]
  }
}

Этот блок head служит глобальным шаблоном, из которого все страницы “наследуются”.

Настройка мета-тегов — это важный шаг в SEO-оптимизации, но это лишь верхушка айсберга. Чтобы Nuxt-приложение действительно хорошо ранжировалось в поисковых системах, необходимо понимать, как работает SSR, как правильно организовать структуру проекта и как создавать качественный контент. Если вы хотите получить комплексные знания о SEO в Nuxt и других аспектах разработки, приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Модули для автоматизации (например, nuxt-seo)

Для типовых задач SEO и автозаполнения мета-данных существуют модули, например, @nuxtjs/seo.

Установка:

npm install @nuxtjs/seo

Добавление в modules в конфиге:

export default {
  modules: [
    '@nuxtjs/seo'
  ]
}

Модуль позволит автоматически настраивать Open Graph, Twitter Cards, описания и многое другое через простые опции.

Настройка мета-тегов в Nuxt 3

Основной способ — useHead

В Nuxt 3 настройка мета-тегов реализуется через composables. Ваш главный “друг” — функция useHead, которая импортируется из #app или пакета @vueuse/head.

Самый простой пример на странице:

<script setup>
import { useHead } from '#app'

// Здесь вы конфигурируете мета-теги
useHead({
  title: 'Главная страница - Мой сайт',
  meta: [
    { name: 'description', content: 'Описание для SEO в Nuxt 3' },
    { property: 'og:title', content: 'Главная страница - Мой сайт' },
    { property: 'og:description', content: 'Описание для социальных сетей' }
  ],
  link: [
    { rel: 'canonical', href: 'https://example.com/' }
  ]
})
</script>

Обратите внимание: теперь head можно настраивать не только в pages, но и в любых компонентах, а специальные поля hid не нужны — Nuxt сам разбирается, какие теги обновлять.

Динамические значения

В Nuxt 3 легко подставлять значения из props, data или с серверной части:

<script setup>
import { useHead } from '#app'
const route = useRoute()
// Получаем данные для страницы, например, статью
const { data: article } = await useAsyncData(() => fetchArticle(route.params.slug))

useHead({
  title: () => article.value?.title || 'Загрузка...',
  meta: [
    { name: 'description', content: () => article.value?.shortDesc || '' },
    { property: 'og:title', content: () => article.value?.title || '' }
  ]
})
</script>

Всё, что возвращаете через функцию, Nuxt будет отслеживать реактивно. Когда loaded — мета поменяется.

Глобальные настройки head

В Nuxt 3 глобальные мета-теги задаются в файле app.vue через useHead на уровне макета, либо в nuxt.config.ts с помощью поля app.head.

Пример в nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Мой сайт',
      titleTemplate: '%s – Мой сайт',
      meta: [
        { name: 'description', content: 'Описание вашего сайта в Nuxt 3' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

Любая страница переопределит эти значения, если использует свой useHead.

Использование дополнительного SEO-модуля

Как и раньше, в Nuxt 3 продолжают появляться модули, которые занимаются автоматизированной генерацией SEO-мета-тегов. Один из популярных пакетов — @vueuse/head, который уже встроен в Nuxt 3.

Преимущество модулей — поддержка JSON-LD, микроразметки, Twitter Cards, Open Graph в одном месте и в декларативном стиле.

Советы по работе с мета-тегами в Nuxt проектах

Делайте meta уникальными для каждой страницы

Заголовок, описание и Open Graph должны быть уникальными. Это важно для поисковых систем и для привлекательного отображения ссылок в соцсетях. Как только вы показываете разные типы контента (статьи, продукты, услуги) — используйте динамические данные.

Пользуйтесь валидаторами

Всегда проверяйте корректность своих мета-тегов через инструменты Google Structured Data Testing Tool, Facebook Sharing Debugger или Twitter Card Validator. Это гарантирует, что всё отображается как задумано.

Не забывайте о канонических ссылках

Канонические ссылки помогают поисковикам правильно определить основную версию страницы и не считать дубли страниц как отдельные сущности. Указывайте их динамически, если страница может дублироваться через UTM-метки или другие параметры.

Пример для динамического canonical в Nuxt 3:

useHead({
  link: [
    { rel: 'canonical', href: `https://example.com${useRoute().path}` }
  ]
})

Разделяйте глобальные и локальные head-настройки

Весь базовый набор (favicon, базовое описание) держите глобально. Всё специфичное — выносите в useHead (или head) в компонентах страниц.

Следите за производительностью

Неправильная работа с асинхронностью при подгрузке данных для динамических head может привести к “миганию” мета-тегов и некорректному их рендерингу на сервере. Предпочитайте асинхронные методы Nuxt — asyncData и useAsyncData — чтобы получать данные до рендера страницы.

Поддержка SSR, SPA и статической генерации

Nuxt прекрасно поддерживает изоморфный рендеринг. Всё, что вы задаете в head через соответствующие методы, попадает в итоговый HTML как на серверной стороне (SSR), так и при статической генерации (nuxt generate). Поэтому ваши страницы корректно отображаются и для поисковых роботов, и для пользователей с выключенным JS.

Для динамических страниц проверяйте данные на всех этапах — если что-то не догрузилось, SEO-теги могут остаться “пустыми”.

Тестирование и отладка head-тегов

Для проверки какой мета-тег в итоге попадает в head, просматривайте исходный HTML с помощью DevTools в браузере на готовой сборке. Для тестов SSR страницы используйте команды:

npm run build
npm run start

Для статических сайтов — откройте итоговые *.html файлы после nuxt generate.

Базовые ошибки — отсутствие уникальных hid, неправильный синтаксис, невалидные значения, забытые теги (например, только title без description) — легко находятся при визуальной проверке.

Интеграция с внешними SEO-инструментами

Nuxt позволяет легко внедрять скрипты, например, Google Analytics или Яндекс.Метрика, прямо в head через соответствующие поля script и noscript.

Пример:

useHead({
  script: [
    {
      src: "https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X",
      async: true
    }
  ]
})

Заключение

Мета-теги — важнейший элемент успеха любого сайта. Nuxt предоставляет интуитивно понятные возможности для гибкой настройки head-документа как на уровне каждой страницы, так и глобально для всего проекта. Благодаря этому вы можете быстро настраивать SEO-оптимизацию и внешний вид страниц в поиске и соцсетях. Используйте head, useHead, глобальные параметры и автоматизированные модули. Следите за тем, чтобы все данные были уникальными и актуальными, а динамические значения подставлялись корректно для каждой страницы.

Мета-теги играют важную роль в SEO, но это лишь один из множества факторов, влияющих на позиции сайта в поисковой выдаче. Чтобы создавать действительно эффективные и удобные для пользователей веб-приложения на Nuxt, необходимо освоить широкий спектр знаний и навыков, от роутинга и стилизации до работы с данными и авторизацией. На нашем курсе Nuxt - fullstack Vue фреймворк вы найдете все необходимые инструменты для достижения этой цели. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в Nuxt прямо сегодня.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Как задать разные мета-теги для разных языков сайта (мультиязычность)?

Если у вас мультиязычный сайт, используйте разные значения title, description и canonical для каждого языка. Обычно это делается через nuxt-i18n — используйте ключи переводов в head или useHead:

useHead({
  title: () => $t('home_title'),
  meta: [
    { name: 'description', content: () => $t('home_desc') }
  ],
  link: [
    { rel: 'alternate', hreflang: 'en', href: 'https://example.com/en/' },
    { rel: 'alternate', hreflang: 'ru', href: 'https://example.com/ru/' }
  ]
})

Как добавить json-ld разметку для расширенных сниппетов?

Для этого добавьте специальный тег script:

useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({ "@context": "https://schema.org", "@type": "Article", "headline": "..." })
    }
  ]
})

Обязательный шаг: добавьте v-html или dangerouslySetInnerHTML если используете React-подход, либо следите, чтобы Nuxt не эскейпил innerHTML.

Как полностью удалить ненужный мета-тег на определённой странице?

В Nuxt 2 используйте hid и возвращайте пустое значение или не добавляйте тег вовсе: js meta: [ { hid: 'description' } // описания нет - тег description не попадет в head ] В Nuxt 3 просто не добавляйте тег в массив meta на нужной странице.

Почему мета-теги иногда не обновляются при переходе между страницами?

Чаще всего причина — одинаковый hid/id для разных тегов, либо ваша SPA не правильно обновляет head (например, при обновлении только части данных). Решение: всегда используйте уникальные идентификаторы (hid/название тега) и проверьте настройки роутера.

Как добавить favicon для всех устройств и платформ?

Добавьте нужные теги в глобальный head или через useHead в app.vue:

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
  { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }
]

widget