Nuxt 4 SEO i Meta Tagi w 2026: useHead, useSeoMeta i Pytania Rekrutacyjne

Nuxt 4 dostarcza dwa composables do zarządzania meta tagami SEO: useHead dla ogólnych elementów nagłówka oraz useSeoMeta dla typowanego metadanych SEO. Nuxt 3 osiągnie koniec wsparcia 31 lipca 2026, dlatego znajomość tych composables w Nuxt 4.5 jest niezbędna dla każdego programisty Vue przygotowującego się do rozmów technicznych.

useSeoMeta: Typowane Metadane SEO w Nuxt 4

Composable useSeoMeta przyjmuje płaski obiekt z ponad 100 typowanymi właściwościami. Takie podejście eliminuje częste błędy, jak mylenie atrybutów name z property w tagach 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>

Składnia funkcji strzałkowej () => value tworzy reaktywne gettery. Gdy product.data ulega zmianie, meta tagi aktualizują się automatycznie. Dla stron statycznych, gdzie tagi SEO nigdy się nie zmieniają po początkowym renderowaniu, ta reaktywność wprowadza niepotrzebny narzut.

Meta Tagi Tylko dla Serwera - Lepsza Wydajność

Crawlery wyszukiwarek i boty AI takie jak GPTBot czy ClaudeBot czytają tylko początkową odpowiedź HTML. Nie wykonują JavaScript. Oznacza to, że aktualizacje meta tagów po stronie klienta są dla nich niewidoczne.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'O SharpSkill',
    description: 'Platforma do przygotowania do rozmów technicznych dla programistów',
    ogTitle: 'O SharpSkill',
    ogDescription: 'Platforma do przygotowania do rozmów technicznych dla programistów',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

Opakowywanie useSeoMeta w import.meta.server gwarantuje, że composable działa tylko podczas SSR. Meta tagi pojawiają się w HTML wysyłanym do crawlerów, ale żadne reaktywne watchery nie są tworzone po stronie klienta. Zmniejsza to rozmiar bundle i poprawia wydajność hydracji.

useHead dla Skryptów, Linków i Kanonicznych URL-i

Podczas gdy useSeoMeta obsługuje metadane SEO, useHead zarządza wszystkim innym: zewnętrznymi skryptami, arkuszami stylów, kanonicznymi URL-ami oraz atrybutami HTML i 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>

Tablica link obsługuje kanoniczne URL-e i tagi hreflang dla internacjonalizacji. Tablica script wstrzykuje dane strukturalne dla rozbudowanych wyników wyszukiwania. Oba elementy są kluczowe dla SEO, ale wykraczają poza zakres useSeoMeta.

Hierarchia Meta Tagów: Poziomy App, Layout i Page

Nuxt 4 łączy meta tagi z trzech poziomów: nuxt.config.ts (domyślne ustawienia aplikacji), layouty i strony. Tagi na poziomie strony nadpisują tagi z poziomu layoutu, które z kolei nadpisują tagi z poziomu aplikacji.

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: 'Przygotowanie do Rozmów Technicznych',
  description: 'Przygotuj się do następnej rozmowy technicznej z pytaniami praktycznymi i symulacjami rozmów',
})
</script>

Końcowy wyrenderowany tytuł to "Przygotowanie do Rozmów Technicznych | SharpSkill", ponieważ strona dostarcza wartość dla placeholder'a %s, a konfiguracja dostarcza szablon. Ta hierarchia eliminuje powtórzenia, jednocześnie umożliwiając nadpisywanie na poziomie strony.

Typowe Pytania Rekrutacyjne o SEO w Nuxt

Rozmowy techniczne na stanowiska Vue/Nuxt często zawierają pytania o SSR i optymalizację SEO. Oto wzorce, których oczekują rekruterzy.

Kiedy useSeoMeta powinno używać reaktywnych getterów, a kiedy statycznych wartości?

Statyczne wartości sprawdzają się dla stron ze stałą treścią: landing pages, strony o nas, dokumenty prawne. Reaktywne gettery są niezbędne, gdy meta tagi zależą od pobranych danych lub parametrów trasy. Różnica w wydajności ma znaczenie na dużą skalę: 50 stron z niepotrzebnymi watcherami marnuje pamięć i spowalnia hydrację.

Czym różnią się crawlery AI od Googlebot?

Googlebot wykonuje JavaScript i czeka na renderowanie po stronie klienta. Crawlery AI takie jak GPTBot i ClaudeBot pobierają surowy HTML bez wykonywania skryptów. Meta tagi renderowane po stronie serwera docierają do obu. Meta tagi tylko po stronie klienta nie docierają ani do botów AI, ani do starszych wyszukiwarek.

Co najczęściej psuje tagi Open Graph?

Brakujące wymiary og:image. Facebook i LinkedIn agresywnie cache'ują dane OG. Gdy brakuje wymiarów obrazka, platformy mogą wyświetlać miniatury niepoprawnie lub wcale.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Podgląd artykułu pokazujący edytor kodu z składnią Vue',
})
</script>

Dołączenie ogImageWidth, ogImageHeight i ogImageAlt zapobiega problemom z renderowaniem i poprawia wyniki dostępności.

useHeadSafe dla Treści Generowanych przez Użytkowników

Gdy meta tagi zawierają dane wprowadzone przez użytkownika, podatności XSS stają się problemem. Composable useHeadSafe oczyszcza wartości przed wstrzyknięciem.

<!-- 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>

Złośliwa nazwa użytkownika jak <script>alert('xss')</script> zostaje escapowana zamiast wykonana. Standardowy useHead nie oczyszcza, więc useHeadSafe jest obowiązkowy dla każdej niezaufanej treści.

Moduł Nuxt SEO dla Zaawansowanych Wymagań

Moduł Nuxt SEO łączy generowanie sitemap, zarządzanie robots.txt, znaczniki schema.org i generowanie obrazków OG. Dla projektów wymagających kompleksowych narzędzi SEO wykraczających poza wbudowane composables, ten moduł redukuje boilerplate.

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

Moduł automatycznie generuje sitemapy z tras, obsługuje normalizację trailing slash i dostarcza composables dla danych strukturalnych. Zespoły utrzymujące duże serwisy korzystają z zcentralizowanej konfiguracji.

Najlepsze Praktyki SEO w Nuxt 4 dla Produkcji

• Stosowanie useSeoMeta dla wszystkich tagów SEO (title, description, Open Graph, Twitter Cards) z autouzupełnianiem TypeScript
• Stosowanie useHead dla kanonicznych URL-i, tagów hreflang, danych strukturalnych i zewnętrznych skryptów
• Opakowywanie statycznych meta tagów w import.meta.server aby wyeliminować narzut reaktywności po stronie klienta
• Dołączanie ogImageWidth, ogImageHeight i ogImageAlt dla podglądów udostępniania w mediach społecznościowych
• Stosowanie useHeadSafe dla treści generowanych przez użytkowników w celu zapobiegania atakom XSS
• Ustawianie domyślnych wartości na poziomie aplikacji w nuxt.config.ts i nadpisywanie na poziomie strony tylko gdy jest to konieczne
• Testowanie za pomocą Google Rich Results Test w celu walidacji danych strukturalnych
• Weryfikacja renderowania w zakładce Network w DevTools przeglądarki z wyłączonym JavaScript aby zasymulować zachowanie crawlera