Nuxt 4 SEO та Meta Теги у 2026: useHead, useSeoMeta та Питання на Співбесідах

Nuxt 4 надає два composables для управління SEO meta тегами: useHead для загальних елементів head та useSeoMeta для типізованих SEO метаданих. Підтримка Nuxt 3 завершується 31 липня 2026, тому розуміння цих composables у Nuxt 4.5 є критично важливим для кожного Vue розробника, який готується до технічних співбесід.

useSeoMeta: Типізовані SEO Метадані в Nuxt 4

Composable useSeoMeta приймає плоский об'єкт з понад 100 типізованими властивостями. Такий підхід усуває поширені помилки, як-от плутанина атрибутів name з property у тегах Open Graph.

<!-- pages/product/[id].vue -->
<script setup lang="ts">
const product = await useFetch(`/api/products/${route.params.id}`)

useSeoMeta({
  title: () => product.data.value?.name,
  description: () => product.data.value?.description,
  ogTitle: () => product.data.value?.name,
  ogDescription: () => product.data.value?.description,
  ogImage: () => product.data.value?.imageUrl,
  ogType: 'product',
  twitterCard: 'summary_large_image',
  twitterTitle: () => product.data.value?.name,
  twitterDescription: () => product.data.value?.description,
  twitterImage: () => product.data.value?.imageUrl,
})
</script>

Синтаксис стрілкової функції () => value створює реактивні геттери. Коли product.data змінюється, meta теги оновлюються автоматично. Для статичних сторінок, де SEO теги ніколи не змінюються після початкового рендерингу, ця реактивність створює зайве навантаження.

Meta Теги Тільки для Сервера - Краща Продуктивність

Краулери пошукових систем та AI боти як GPTBot і ClaudeBot читають лише початкову HTML відповідь. Вони не виконують JavaScript. Це означає, що оновлення meta тегів на стороні клієнта для них невидимі.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'Про SharpSkill',
    description: 'Платформа підготовки до технічних співбесід для розробників',
    ogTitle: 'Про SharpSkill',
    ogDescription: 'Платформа підготовки до технічних співбесід для розробників',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

Обгортання useSeoMeta в import.meta.server гарантує, що composable виконується лише під час SSR. Meta теги з'являються в HTML, що надсилається краулерам, але реактивні watcher'и не створюються на стороні клієнта. Це зменшує розмір bundle та покращує продуктивність гідратації.

useHead для Скриптів, Посилань та Канонічних URL

Поки useSeoMeta охоплює SEO метадані, useHead керує всім іншим: зовнішніми скриптами, таблицями стилів, канонічними URL та атрибутами HTML і body.

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()

useHead({
  link: [
    {
      rel: 'canonical',
      href: `${config.public.siteUrl}/blog/${route.params.slug}`,
    },
    {
      rel: 'alternate',
      hreflang: 'fr',
      href: `${config.public.siteUrl}/fr/blog/${route.params.slug}`,
    },
  ],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.value?.title,
        author: { '@type': 'Person', name: 'Anthony Fillion-Maillet' },
        datePublished: article.value?.publishedAt,
      }),
    },
  ],
})
</script>

Масив link обробляє канонічні URL та hreflang теги для інтернаціоналізації. Масив script вставляє структуровані дані для розширених результатів пошуку. Обидва елементи критичні для SEO, але виходять за межі useSeoMeta.

Ієрархія Meta Тегів: Рівні App, Layout та Page

Nuxt 4 об'єднує meta теги з трьох рівнів: nuxt.config.ts (загальні налаштування додатку), layouts та сторінки. Теги рівня сторінки перевизначають теги рівня layout, які перевизначають теги рівня додатку.

export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s | SharpSkill',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ],
    },
  },
})

<!-- layouts/default.vue -->
<script setup lang="ts">
useSeoMeta({
  ogSiteName: 'SharpSkill',
  twitterSite: '@sharpskill',
})
</script>

<!-- pages/index.vue -->
<script setup lang="ts">
useSeoMeta({
  title: 'Підготовка до Технічних Співбесід',
  description: 'Підготуйтесь до наступної технічної співбесіди з практичними питаннями та симуляцією інтерв\'ю',
})
</script>

Фінальний відрендерений заголовок стає "Підготовка до Технічних Співбесід | SharpSkill", оскільки сторінка надає значення для placeholder'а %s, а конфігурація надає шаблон. Ця ієрархія уникає повторень, водночас дозволяючи перевизначення на рівні сторінки.

Типові Питання на Співбесідах про SEO в Nuxt

Технічні співбесіди на позиції Vue/Nuxt часто включають питання про SSR та оптимізацію SEO. Ось патерни, які очікують інтерв'юери.

Коли useSeoMeta має використовувати реактивні геттери, а коли статичні значення?

Статичні значення підходять для сторінок з фіксованим контентом: landing pages, сторінки про нас, юридичні документи. Реактивні геттери необхідні, коли meta теги залежать від отриманих даних або параметрів маршруту. Різниця в продуктивності важлива на масштабі: 50 сторінок з непотрібними watcher'ами витрачають пам'ять та сповільнюють гідратацію.

Чим AI краулери відрізняються від Googlebot?

Googlebot виконує JavaScript і чекає на рендеринг на стороні клієнта. AI краулери як GPTBot і ClaudeBot отримують сирий HTML без виконання скриптів. Meta теги, відрендерені на сервері, досягають обох. Meta теги тільки на стороні клієнта не досягають ні AI ботів, ні старіших пошукових систем.

Що найчастіше ламає теги Open Graph?

Відсутні розміри og:image. Facebook та LinkedIn агресивно кешують OG дані. Коли розміри зображення відсутні, платформи можуть відображати мініатюри неправильно або взагалі не відображати.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Попередній перегляд статті з редактором коду та синтаксисом Vue',
})
</script>

Включення ogImageWidth, ogImageHeight та ogImageAlt запобігає проблемам з рендерингом та покращує показники доступності.

useHeadSafe для Контенту від Користувачів

Коли meta теги містять введення користувача, XSS вразливості стають проблемою. Composable useHeadSafe очищує значення перед вставкою.

<!-- pages/profile/[username].vue -->
<script setup lang="ts">
const user = await useFetch(`/api/users/${route.params.username}`)

useHeadSafe({
  title: user.data.value?.displayName,
  meta: [
    { name: 'description', content: user.data.value?.bio },
  ],
})
</script>

Зловмисне ім'я користувача як <script>alert('xss')</script> екранується замість виконання. Стандартний useHead не очищує, тому useHeadSafe є обов'язковим для будь-якого ненадійного контенту.

Модуль Nuxt SEO для Розширених Вимог

Модуль Nuxt SEO об'єднує генерацію sitemap, управління robots.txt, розмітку schema.org та генерацію OG зображень. Для проєктів, що потребують комплексних SEO інструментів поза вбудованими composables, цей модуль зменшує boilerplate.

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],
  site: {
    url: 'https://sharpskill.dev',
    name: 'SharpSkill',
  },
})

Модуль автоматично генерує sitemap'и з маршрутів, обробляє нормалізацію trailing slash та надає composables для структурованих даних. Команди, що підтримують великі сайти, отримують користь від централізованої конфігурації.

Найкращі Практики SEO в Nuxt 4 для Продакшену

• Використання useSeoMeta для всіх SEO тегів (title, description, Open Graph, Twitter Cards) з автодоповненням TypeScript
• Використання useHead для канонічних URL, hreflang тегів, структурованих даних та зовнішніх скриптів
• Обгортання статичних meta тегів в import.meta.server для усунення навантаження реактивності на стороні клієнта
• Включення ogImageWidth, ogImageHeight та ogImageAlt для превью при шерінгу в соціальних мережах
• Використання useHeadSafe для контенту від користувачів для запобігання XSS атакам
• Встановлення загальних налаштувань на рівні додатку в nuxt.config.ts та перевизначення на рівні сторінки лише за необхідності
• Тестування за допомогою Google Rich Results Test для валідації структурованих даних
• Перевірка рендерингу у вкладці Network DevTools браузера з вимкненим JavaScript для симуляції поведінки краулера