Nuxt 4 SEO en Meta Tags in 2026: useHead, useSeoMeta en Sollicitatievragen

Nuxt 4 biedt twee composables voor het beheren van SEO meta tags: useHead voor algemene head-elementen en useSeoMeta voor type-veilige SEO metadata. Nu Nuxt 3 op 31 juli 2026 end-of-life bereikt, is het begrijpen van deze composables in Nuxt 4.5 essentieel voor elke Vue-ontwikkelaar die zich voorbereidt op technische sollicitatiegesprekken.

useSeoMeta: Type-Veilige SEO Metadata in Nuxt 4

De useSeoMeta composable accepteert een plat object met meer dan 100 getypeerde eigenschappen. Deze aanpak elimineert veelvoorkomende fouten zoals het verwarren van name en property attributen bij Open Graph tags.

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

De arrow function syntax () => value creëert reactieve getters. Wanneer product.data verandert, worden de meta tags automatisch bijgewerkt. Voor statische pagina's waar SEO tags nooit veranderen na de initiële render, voegt deze reactiviteit onnodige overhead toe.

Server-Only Meta Tags voor Betere Performance

Zoekmachine crawlers en AI bots zoals GPTBot en ClaudeBot lezen alleen de initiële HTML-respons. Ze voeren geen JavaScript uit. Dit betekent dat client-side meta tag updates onzichtbaar voor hen zijn.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'Over SharpSkill',
    description: 'Platform voor technische sollicitatievoorbereiding voor ontwikkelaars',
    ogTitle: 'Over SharpSkill',
    ogDescription: 'Platform voor technische sollicitatievoorbereiding voor ontwikkelaars',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

Het wrappen van useSeoMeta in import.meta.server zorgt ervoor dat de composable alleen tijdens SSR wordt uitgevoerd. De meta tags verschijnen in de HTML die naar crawlers wordt gestuurd, maar er worden geen reactieve watchers aangemaakt op de client. Dit vermindert de bundle-grootte en verbetert de hydration-performance.

useHead voor Scripts, Links en Canonieke URL's

Terwijl useSeoMeta SEO metadata dekt, beheert useHead al het andere: externe scripts, stylesheets, canonieke URL's en HTML/body attributen.

<!-- 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: 'nl',
      href: `${config.public.siteUrl}/nl/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>

De link array beheert canonieke URL's en hreflang tags voor internationalisatie. De script array injecteert gestructureerde data voor rich zoekresultaten. Beide zijn cruciaal voor SEO maar vallen buiten het bereik van useSeoMeta.

Meta Tag Hiërarchie: App-, Layout- en Paginaniveau

Nuxt 4 voegt meta tags samen van drie niveaus: nuxt.config.ts (app-brede defaults), layouts en pagina's. Tags op paginaniveau overschrijven tags op layoutniveau, die weer tags op app-niveau overschrijven.

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: 'Technische Sollicitatievoorbereiding',
  description: 'Bereid je voor op je volgende technische sollicitatie met oefenvragen en gesimuleerde interviews',
})
</script>

De uiteindelijk gerenderde titel wordt "Technische Sollicitatievoorbereiding | SharpSkill" omdat de pagina de %s placeholder-waarde levert en de configuratie het template biedt. Deze hiërarchie voorkomt herhaling terwijl pagina-specifieke overschrijvingen mogelijk blijven.

Veelgestelde Nuxt SEO Sollicitatievragen

Technische sollicitatiegesprekken voor Vue/Nuxt posities bevatten vaak vragen over SSR en SEO optimalisatie. Hier zijn de patronen die interviewers verwachten.

Wanneer moet useSeoMeta reactieve getters gebruiken versus statische waarden?

Statische waarden werken voor pagina's met vaste inhoud: landingspagina's, over-pagina's, juridische pagina's. Reactieve getters zijn nodig wanneer meta tags afhankelijk zijn van opgehaalde data of route-parameters. Het performance-verschil is relevant op schaal: 50 pagina's met onnodige watchers verspillen geheugen en vertragen hydration.

Hoe verschillen AI crawlers van Googlebot?

Googlebot voert JavaScript uit en wacht op client-side rendering. AI crawlers zoals GPTBot en ClaudeBot halen rauwe HTML op zonder scripts uit te voeren. Server-gerenderde meta tags bereiken beide. Client-only meta tags bereiken noch AI bots noch oudere zoekmachines.

Wat breekt Open Graph tags het vaakst?

Ontbrekende og:image dimensies. Facebook en LinkedIn cachen OG data agressief. Wanneer de afbeeldingsdimensies ontbreken, kunnen platforms thumbnails onjuist of helemaal niet weergeven.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Artikel preview met code editor en Vue syntax',
})
</script>

Het opnemen van ogImageWidth, ogImageHeight en ogImageAlt voorkomt rendering-problemen en verbetert toegankelijkheidsscores.

useHeadSafe voor Door Gebruikers Gegenereerde Content

Wanneer meta tags gebruikersinvoer bevatten, worden XSS-kwetsbaarheden een probleem. De useHeadSafe composable sanitized waarden voor injectie.

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

Een kwaadaardige gebruikersnaam zoals <script>alert('xss')</script> wordt escaped in plaats van uitgevoerd. Standaard useHead sanitized niet, dus useHeadSafe is verplicht voor alle niet-vertrouwde content.

Nuxt SEO Module voor Geavanceerde Vereisten

De Nuxt SEO module bundelt sitemap-generatie, robots.txt-beheer, schema.org markup en OG afbeelding-generatie. Voor projecten die uitgebreide SEO-tooling nodig hebben buiten de ingebouwde composables, vermindert deze module boilerplate-code.

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

De module genereert automatisch sitemaps van routes, handelt trailing slash normalisatie af en biedt composables voor gestructureerde data. Teams die grote sites onderhouden profiteren van de gecentraliseerde configuratie.

Nuxt 4 SEO Best Practices voor Productie

• Gebruik useSeoMeta voor alle SEO tags (titel, beschrijving, Open Graph, Twitter Cards) met TypeScript autocompletion
• Gebruik useHead voor canonieke URL's, hreflang tags, gestructureerde data en externe scripts
• Wrap statische meta tags in import.meta.server om client-side reactiviteit-overhead te elimineren
• Neem ogImageWidth, ogImageHeight en ogImageAlt op voor social sharing previews
• Gebruik useHeadSafe voor alle door gebruikers gegenereerde content om XSS-aanvallen te voorkomen
• Stel app-brede defaults in nuxt.config.ts in en overschrijf alleen op paginaniveau wanneer nodig
• Test met Google Rich Results Test om gestructureerde data te valideren
• Verifieer rendering in browser DevTools Network tab met JavaScript uitgeschakeld om crawler-gedrag te simuleren