Nuxt 4 SEO e Meta Tag nel 2026: useHead, useSeoMeta e Domande da Colloquio

Nuxt 4 fornisce due composable per la gestione dei meta tag SEO: useHead per gli elementi head generali e useSeoMeta per metadati SEO type-safe. Con Nuxt 3 che raggiunge la fine del ciclo di vita il 31 luglio 2026, comprendere questi composable in Nuxt 4.5 è essenziale per qualsiasi sviluppatore Vue che si prepara per colloqui tecnici.

useSeoMeta: Metadati SEO Type-Safe in Nuxt 4

Il composable useSeoMeta accetta un oggetto piatto con oltre 100 proprietà tipizzate. Questo approccio elimina errori comuni come la confusione tra attributi name e property nei tag 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>

La sintassi con arrow function () => value crea getter reattivi. Quando product.data cambia, i meta tag si aggiornano automaticamente. Per le pagine statiche dove i tag SEO non cambiano mai dopo il rendering iniziale, questa reattività aggiunge overhead non necessario.

Meta Tag Server-Only per Migliori Performance

I crawler dei motori di ricerca e i bot AI come GPTBot e ClaudeBot leggono solo la risposta HTML iniziale. Non eseguono JavaScript. Questo significa che gli aggiornamenti dei meta tag lato client sono invisibili per loro.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'Chi Siamo - SharpSkill',
    description: 'Piattaforma di preparazione ai colloqui tecnici per sviluppatori',
    ogTitle: 'Chi Siamo - SharpSkill',
    ogDescription: 'Piattaforma di preparazione ai colloqui tecnici per sviluppatori',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

Avvolgere useSeoMeta in import.meta.server assicura che il composable venga eseguito solo durante l'SSR. I meta tag appaiono nell'HTML inviato ai crawler, ma nessun watcher reattivo viene creato sul client. Questo riduce la dimensione del bundle e migliora le performance di hydration.

useHead per Script, Link e URL Canonici

Mentre useSeoMeta copre i metadati SEO, useHead gestisce tutto il resto: script esterni, fogli di stile, URL canonici e attributi 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: 'it',
      href: `${config.public.siteUrl}/it/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>

L'array link gestisce URL canonici e tag hreflang per l'internazionalizzazione. L'array script inietta dati strutturati per i rich result nei risultati di ricerca. Entrambi sono critici per la SEO ma esulano dall'ambito di useSeoMeta.

Gerarchia dei Meta Tag: Livello App, Layout e Pagina

Nuxt 4 unisce i meta tag da tre livelli: nuxt.config.ts (default a livello applicazione), layout e pagine. I tag a livello pagina sovrascrivono quelli a livello layout, che a loro volta sovrascrivono quelli a livello app.

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: 'Preparazione ai Colloqui Tecnici',
  description: 'Preparati al tuo prossimo colloquio tecnico con domande di pratica e simulazioni di interviste',
})
</script>

Il titolo finale renderizzato diventa "Preparazione ai Colloqui Tecnici | SharpSkill" perché la pagina fornisce il valore del placeholder %s e la configurazione fornisce il template. Questa gerarchia evita ripetizioni permettendo al contempo override specifici per pagina.

Domande Comuni sui Colloqui per Nuxt SEO

I colloqui tecnici per posizioni Vue/Nuxt includono spesso domande su SSR e ottimizzazione SEO. Ecco i pattern che gli intervistatori si aspettano.

Quando useSeoMeta dovrebbe usare getter reattivi invece di valori statici?

I valori statici funzionano per pagine con contenuto fisso: landing page, pagine about, pagine legali. I getter reattivi sono necessari quando i meta tag dipendono da dati recuperati o parametri di route. La differenza di performance è rilevante su larga scala: 50 pagine con watcher non necessari sprecano memoria e rallentano l'hydration.

Come differiscono i crawler AI da Googlebot?

Googlebot esegue JavaScript e attende il rendering lato client. I crawler AI come GPTBot e ClaudeBot recuperano HTML grezzo senza eseguire script. I meta tag renderizzati lato server raggiungono entrambi. I meta tag solo client non raggiungono né i bot AI né i motori di ricerca più vecchi.

Cosa causa più frequentemente problemi con i tag Open Graph?

Dimensioni og:image mancanti. Facebook e LinkedIn memorizzano nella cache i dati OG in modo aggressivo. Quando mancano le dimensioni dell'immagine, le piattaforme potrebbero visualizzare le anteprime in modo errato o non visualizzarle affatto.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Anteprima articolo che mostra editor di codice con sintassi Vue',
})
</script>

Includere ogImageWidth, ogImageHeight e ogImageAlt previene problemi di rendering e migliora i punteggi di accessibilità.

useHeadSafe per Contenuti Generati dagli Utenti

Quando i meta tag includono input degli utenti, le vulnerabilità XSS diventano un problema. Il composable useHeadSafe sanifica i valori prima dell'iniezione.

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

Un username malevolo come <script>alert('xss')</script> viene escaped invece di essere eseguito. Lo standard useHead non sanifica, quindi useHeadSafe è obbligatorio per qualsiasi contenuto non fidato.

Modulo Nuxt SEO per Requisiti Avanzati

Il modulo Nuxt SEO raggruppa generazione sitemap, gestione robots.txt, markup schema.org e generazione immagini OG. Per progetti che richiedono strumenti SEO completi oltre i composable integrati, questo modulo riduce il codice boilerplate.

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

Il modulo genera automaticamente sitemap dalle route, gestisce la normalizzazione del trailing slash e fornisce composable per i dati strutturati. I team che mantengono siti di grandi dimensioni beneficiano della configurazione centralizzata.

Best Practice Nuxt 4 SEO per la Produzione

• Utilizzare useSeoMeta per tutti i tag SEO (titolo, descrizione, Open Graph, Twitter Cards) con autocompletamento TypeScript
• Utilizzare useHead per URL canonici, tag hreflang, dati strutturati e script esterni
• Avvolgere i meta tag statici in import.meta.server per eliminare l'overhead di reattività lato client
• Includere ogImageWidth, ogImageHeight e ogImageAlt per le anteprime di condivisione social
• Utilizzare useHeadSafe per qualsiasi contenuto generato dagli utenti per prevenire attacchi XSS
• Impostare i default a livello app in nuxt.config.ts e sovrascrivere a livello pagina solo quando necessario
• Testare con il Google Rich Results Test per validare i dati strutturati
• Verificare il rendering nei DevTools del browser nella scheda Network con JavaScript disabilitato per simulare il comportamento dei crawler