Добавление meta-тегов в Nuxt.js: руководство по SEO и соцсетям

Кратко: В статье объясняется, как добавлять meta-теги в Nuxt.js глобально, на отдельных страницах и динамически для блога или карточек товара. Показаны рабочие примеры кода, рекомендации по SEO и чеклист для приёмки.

Почему это важно

Meta-теги — это небольшие фрагменты HTML, которые дают поисковым системам и соцсетям информацию о странице: заголовок, описание, изображение и прочие параметры. В Nuxt.js, как в фреймворке с серверным рендерингом (SSR), meta-теги особенно важны, потому что они доступны при рендеринге на сервере и корректно читаются ботами.

Важно: если вы используете только клиентский режим (SPA), многие поисковые роботы и соцсети могут не увидеть динамически добавленные теги. Для надёжной индексации используйте SSR или Nuxt generate.

Что такое meta-теги

Meta-теги — элементы внутри секции HTML-документа. Они не отображаются пользователю напрямую, но управляют тем, как страница выглядит в результатах поиска и при шаринге в соцсетях (Open Graph, Twitter Cards).

Краткое определение: meta-тег — это пара ключ–значение в , описывающая содержание или поведение страницы.

Подготовка: создание проекта Nuxt.js

Если у вас ещё нет проекта, создайте его командой (нужно Node.js):

npx create-nuxt-app my-app

Следуйте подсказкам генератора. После создания откройте каталог my-app и продолжайте конфигурацию.

Добавление meta-тегов глобально

Чтобы задать базовые теги для всего сайта, откройте файл nuxt.config.js и добавьте свойство head в экспортируемый объект. Пример базовой конфигурации:

module.exports = {  
  head: {  
    title: 'My App',  
    meta: [  
      { charset: 'utf-8' },  
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }  
    ]  
  }  
}

Рекомендация: задайте и шаблон для title (например, ‘%s — Название сайта’), а также общую description и базовое изображение для Open Graph.

Добавление meta-тегов на отдельной странице

Если нужно изменить теги только для конкретной страницы, добавьте объект head в компонент страницы:

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

Динамические meta-теги для блога или карточек

Для страниц с динамическим содержимым (посты блога, товары) формируйте теги на основе данных страницы. Пример компонента для поста:

Пояснение: asyncData выполняется на сервере при SSR, поэтому данные и мета-теги будут доступны ботам и соцсетям.

Запуск приложения

Запустите dev-сервер командой:

npm run dev

Откройте приложение в браузере и просмотрите исходный код страницы (View source) — теги в должны отображаться уже в HTML, если используется SSR.

Советы по улучшению SEO с помощью meta-тегов

• Title: уникальный и читабельный, до ~60 символов.
• Description: 120–160 символов, описывает содержание страницы и содержит важные ключи.
• Open Graph: добавьте og:title, og:description, og:image и og:url для корректного шаринга.
• Twitter Cards: используйте twitter:card, twitter:title, twitter:description, twitter:image.
• Hid: всегда используйте hid в динамических тегаx, чтобы Nuxt корректно обновлял их.

Когда meta-теги не работают

• Страницы полностью рендерятся на клиенте (SPA) и не индексируются ботом. Решение: подключите SSR или pre-render.
• Дублированные теги без hid: Nuxt может добавлять несколько записей. Решение: используйте hid для уникальности.
• Неверные URL/изображения в og:image: соцсети могут не загружать картинки без абсолютного URL и корректных размеров.

Альтернативные подходы

• Vue Meta напрямую: если вы не используете Nuxt, можно подключать vue-meta вручную.
• Серверная генерация (Nuxt generate) для статических сайтов — подходящая альтернатива, когда нужен быстрый статический хостинг.
• Сторонние сервисы для превью (например, прелоадер картинок и CDN) — когда важно стабильное og:image.

Практическая методология: шаги для каждой страницы

1. Определите цель страницы (информационная, коммерческая, лендинг).
2. Сформулируйте title и description с учётом ключевых слов.
3. Добавьте Open Graph и Twitter-метки.
4. Убедитесь, что og:image доступно по абсолютному URL и подходит по размеру (1200×630 px рекомендовано).
5. Протестируйте с Facebook Sharing Debugger и Twitter Card Validator.
6. Проверяйте исходный HTML в браузере и индексирование через консоль поиска.

Чеклист ролей

• Разработчик: реализовать head/head() с hid и корректным SSR.
• SEO-специалист: подготовить тексты для title/description и список целевых ключей.
• Контент-менеджер: обеспечить доступные и оптимальные изображения с правильными URL.

Критерии приёмки

• В исходном HTML (View source) страницы присутствуют ожидаемые meta-теги.
• og:image загружается по абсолютному URL и отображается в дебаггерах соцсетей.
• При навигации между страницами теги корректно обновляются (нет дубликатов).
• Тесты валидируют twitter: и og: теги.

Факто-бокс

• Title: до ~60 символов.
• Description: 120–160 символов.
• Рекомендованный размер og:image: 1200×630 пикселей.
• Используйте hid для динамических тегов.

Примеры тест-кейсов

• Открыть исходный код страницы поста и проверить наличие og:title и og:description.
• Проверить, что при изменении поста meta-теги обновляются после перезагрузки страницы.
• Проверить корректность отображения превью в Facebook и Twitter через их отладчики.

Резюме

Meta-теги в Nuxt.js легко задавать глобально, на уровне страницы и динамически. Для корректной индексации и красивого шаринга в соцсетях используйте SSR, hid в динамических тегах и тестируйте превью изображений. Следуйте чеклисту ролей и критериям приёмки, чтобы обеспечить предсказуемое поведение и улучшить видимость сайта в поиске и социальных платформах.

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