Meta‑теги в Nuxt.js: как добавить SEO и соц‑карточки

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

Meta‑теги — это фрагменты HTML, которые описывают страницу (заголовок, описание, данные для соцсетей и пр.). Они находятся в секции и не отображаются напрямую пользователю, но важны для SEO и превью в мессенджерах и соцсетях.

Определение в одну строку: meta‑тег — метаданные страницы, помогающие поисковым и соцплатформам понять содержимое.

Почему это важно для Nuxt.js

Nuxt.js поддерживает серверный рендеринг (SSR) и статическую генерацию, поэтому корректные meta‑теги видны при рендеринге на сервере — это повышает индексируемость и качество превью при шаринге.

Важные сценарии:

• Статические сайты и блоги — уникальные meta‑теги для постов.
• Магазины — карточки товаров с изображением и ценой.
• Маркетинговые лендинги — оптимизированные title и description.

Быстрый пример: создать Nuxt‑приложение

Перед началом убедитесь, что у вас установлен Node.js. В терминале выполните:

npx create-nuxt-app my-app

Следуйте подсказкам установщика для настройки проекта.

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

Чтобы задать базовые 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 и базовый набор метаданных, которые применяются ко всем страницам по умолчанию.

Добавление meta‑тегов на отдельных страницах

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

Этот подход подходит для статичных страниц (О компании, Контакты и т. п.).

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

Для динамически генерируемых страниц (например, посты блога) используйте asyncData/fetch и функцию head(), чтобы вернуть уникальные значения для каждой записи:

Такая структура генерирует корректные Open Graph‑теги для красивого превью в соцсетях.

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

Запустите dev‑сервер Nuxt:

npm run dev

Откройте приложение в браузере и проверьте исходный HTML (View Source) — мета‑теги должны быть в секции . Помните: при SSR теги видны ботам поисковых систем; при чистом CSR (одностраничное приложение без SSR) часть ботов может их не увидеть.

Шаблоны мета‑тегов (базовый набор)

• title — заголовок страницы (до 60 символов рекомендуется)
• description — краткое описание (120–160 символов)
• charset — кодировка
• viewport — адаптивность
• og:title, og:description, og:image, og:url — Open Graph для Facebook/Telegram
• twitter:card, twitter:title, twitter:description, twitter:image — Twitter Cards
• article:published_time, article:author, article:section — для статей

Пример минимального набора в head:

meta: [
  { name: 'description', content: 'Короткое описание страницы' },
  { property: 'og:type', content: 'article' },
  { property: 'og:image', content: 'https://example.com/image.jpg' }
]

Когда meta‑теги не помогают (когда это не работает)

• Клиентский рендеринг без SSR: некоторые поисковые роботы и социальные платформы не исполняют JS полностью и не увидят динамические теги.
• Неправильный hydratation или ошибки в asyncData/head: при ошибке загрузки данных теги останутся дефолтными.
• Кешированные превью в соцсетях: соцсети кешируют OG‑данные, нужно чистить кеш (например, Facebook Debugger).

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

• Использовать модуль @nuxtjs/seo или @nuxtjs/axios + custom head helpers.
• Статическая генерация (nuxt generate) для максимально предсказуемых метаданных.
• Серверные middleware или шаблонизаторы, если нужна интеграция с CMS на серверной стороне.

Чек‑лист по ролям

Developer:

• Установил meta‑теги в nuxt.config.js и на страницах
• Использует hid для предотвращения дублирования
• Проверил SSR и View Source

SEO‑специалист:

• Проверил длину title/description
• Обновил Open Graph и Twitter Cards
• Проверил отображение в Facebook/Telegram/Slack

Content Editor:

• Написал уникальные descriptions для каждой статьи
• Загрузил корректные og:image и alt‑описания

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

• Для каждой публичной страницы в View Source есть title и description.
• Для записей блога присутствуют og:title, og:description, og:image и og:url.
• При шаринге в Telegram/Facebook отображается превью с изображением и описанием.
• Нет дублирующих meta с одинаковым hid.

Тесты и приёмка (как проверить)

1. Открыть View Source страницы — убедиться, что теги присутствуют.
2. Использовать Facebook Sharing Debugger и Twitter Card Validator — проверить отображение и очистить кеш при необходимости.
3. Использовать curl или инструмент для проверки: curl -L https://example.com/page | grep -i “og:title”
4. Проверить поведение при отключённом JS (эмуляция SSR) — теги должны быть видимы.

Мини‑методология: внедрение meta‑тегов за 1–2 спринта

1. Базовые теги в nuxt.config.js (1 день).
2. Шаблон для страниц и компонент для генерации OG (1–2 дня).
3. Интеграция с CMS/данными: динамические head() (1–3 дня).
4. Тестирование и очистка кеша соцсетей (1 день).

Примеры шаблонов (шпаргалка)

Статья:

• title: {{ post.title }}
• description: первая 150–200 символов поста
• og:image: постер/миниатюра
• article:published_time, article:author

Карточка товара:

• title: {{ product.name }} — магазин
• description: цена и ключевые свойства
• og:image: фото товара

Decision flow (когда использовать какой подход)

flowchart TD
  A[Есть CMS и много страниц?] -->|Да| B[Использовать SSR или SSG]
  A -->|Нет| C[Небольшой статический сайт]
  B --> D[Динамические head'' в страницах]
  C --> E[Глобальные мета в nuxt.config.js]

Советы по безопасности и приватности

• Не включайте приватные или персональные данные в публичные meta‑теги.
• Для чувствительных ресурсов используйте robots.txt или заголовки для ограничения индексации.

Примеры ошибок и как их исправить

Ошибка: OG‑изображение не обновляется после замены — решение: очистить кэш Facebook Debugger / Telegram не всегда обновляет мгновенно.

Ошибка: Дублирование meta — решение: использовать поле hid у Nuxt (vue‑meta) чтобы предотвращать дубли.

Короткое резюме

Meta‑теги в Nuxt.js — простой и эффективный инструмент улучшения SEO и внешнего вида при шаринге. Используйте глобальные теги для базовых настроек, head() в страницах и динамическую генерацию для уникальных записей. Тестируйте через View Source и инструменты соцсетей.

Важно: при CSR без SSR некоторые боты могут не увидеть динамически созданные теги — в таких случаях предпочтителен SSR или статическая генерация.

Замечания:

• Проверяйте длину title и description.
• Используйте og/tw метки для соцсетей.
• Чистите кеш соцсетей при изменениях.