SEO y Meta Tags en Nuxt 4 en 2026: useHead, useSeoMeta y Preguntas de Entrevista

Nuxt 4 proporciona dos composables para gestionar las meta tags de SEO: useHead para elementos head generales y useSeoMeta para metadatos SEO con tipado seguro. Con el fin de vida de Nuxt 3 programado para el 31 de julio de 2026, dominar estos composables en Nuxt 4.5 resulta esencial para cualquier desarrollador Vue que se prepare para entrevistas técnicas.

useSeoMeta: Metadatos SEO con Tipado Seguro en Nuxt 4

El composable useSeoMeta acepta un objeto plano con más de 100 propiedades tipadas. Este enfoque elimina errores comunes como confundir los atributos name con property en las tags 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 sintaxis con arrow function () => value crea getters reactivos. Cuando product.data cambia, las meta tags se actualizan automáticamente. Para páginas estáticas donde las tags SEO nunca cambian después del render inicial, esta reactividad añade overhead innecesario.

Meta Tags Solo en Servidor para Mejor Rendimiento

Los rastreadores de motores de búsqueda y los bots de IA como GPTBot y ClaudeBot solo leen la respuesta HTML inicial. No ejecutan JavaScript. Esto significa que las actualizaciones de meta tags del lado del cliente les resultan invisibles.

<!-- pages/about.vue -->
<script setup lang="ts">
if (import.meta.server) {
  useSeoMeta({
    title: 'Acerca de SharpSkill',
    description: 'Plataforma de preparación para entrevistas técnicas para desarrolladores',
    ogTitle: 'Acerca de SharpSkill',
    ogDescription: 'Plataforma de preparación para entrevistas técnicas para desarrolladores',
    ogImage: 'https://sharpskill.dev/og-about.png',
    robots: 'index, follow',
  })
}
</script>

Envolver useSeoMeta en import.meta.server garantiza que el composable solo se ejecute durante el SSR. Las meta tags aparecen en el HTML enviado a los rastreadores, pero no se crean watchers reactivos en el cliente. Esto reduce el tamaño del bundle y mejora el rendimiento de hidratación.

useHead para Scripts, Enlaces y URLs Canónicas

Mientras useSeoMeta cubre los metadatos SEO, useHead maneja todo lo demás: scripts externos, hojas de estilo, URLs canónicas y atributos 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: 'es',
      href: `${config.public.siteUrl}/es/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>

El array link maneja URLs canónicas y tags hreflang para internacionalización. El array script inyecta datos estructurados para resultados enriquecidos. Ambos son críticos para el SEO pero quedan fuera del alcance de useSeoMeta.

Jerarquía de Meta Tags: Niveles App, Layout y Página

Nuxt 4 fusiona las meta tags de tres niveles: nuxt.config.ts (valores por defecto de la app), layouts y páginas. Las tags a nivel de página sobrescriben las del layout, que sobrescriben las de la 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: 'Preparación para Entrevistas Técnicas',
  description: 'Prepárate para tu próxima entrevista técnica con preguntas de práctica y simulaciones',
})
</script>

El título final se convierte en "Preparación para Entrevistas Técnicas | SharpSkill" porque la página proporciona el valor del placeholder %s y la config proporciona la plantilla. Esta jerarquía evita la repetición mientras permite sobrescrituras específicas por página.

Preguntas Comunes de Entrevista sobre SEO en Nuxt

Las entrevistas técnicas para posiciones Vue/Nuxt frecuentemente incluyen preguntas sobre SSR y optimización SEO. Estos son los patrones que los entrevistadores esperan.

¿Cuándo debe useSeoMeta usar getters reactivos versus valores estáticos?

Los valores estáticos funcionan para páginas con contenido fijo: landing pages, páginas de acerca, páginas legales. Los getters reactivos son necesarios cuando las meta tags dependen de datos obtenidos o parámetros de ruta. La diferencia de rendimiento importa a escala: 50 páginas con watchers innecesarios desperdician memoria y ralentizan la hidratación.

¿Cómo difieren los rastreadores de IA de Googlebot?

Googlebot ejecuta JavaScript y espera el renderizado del lado del cliente. Los rastreadores de IA como GPTBot y ClaudeBot obtienen HTML sin procesar sin ejecutar scripts. Las meta tags renderizadas en servidor llegan a ambos. Las tags solo del cliente no llegan ni a los bots de IA ni a motores de búsqueda antiguos.

¿Qué rompe más frecuentemente las tags Open Graph?

La ausencia de dimensiones de og:image. Facebook y LinkedIn cachean datos OG de manera agresiva. Cuando faltan las dimensiones de imagen, las plataformas pueden mostrar miniaturas incorrectamente o no mostrarlas en absoluto.

<script setup lang="ts">
useSeoMeta({
  ogImage: 'https://example.com/og-image.png',
  ogImageWidth: 1200,
  ogImageHeight: 630,
  ogImageAlt: 'Vista previa del artículo mostrando editor de código con sintaxis Vue',
})
</script>

Incluir ogImageWidth, ogImageHeight y ogImageAlt previene problemas de renderizado y mejora las puntuaciones de accesibilidad.

useHeadSafe para Contenido Generado por Usuarios

Cuando las meta tags incluyen entrada de usuarios, las vulnerabilidades XSS se convierten en una preocupación. El composable useHeadSafe sanitiza los valores antes de la inyección.

<!-- 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 nombre de usuario malicioso como <script>alert('xss')</script> se escapa en lugar de ejecutarse. El useHead estándar no sanitiza, por lo que useHeadSafe es obligatorio para cualquier contenido no confiable.

Módulo Nuxt SEO para Requisitos Avanzados

El módulo Nuxt SEO agrupa generación de sitemap, gestión de robots.txt, marcado schema.org y generación de imágenes OG. Para proyectos que requieren herramientas SEO completas más allá de los composables integrados, este módulo reduce el código repetitivo.

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

El módulo auto-genera sitemaps desde las rutas, maneja la normalización de trailing slashes y proporciona composables para datos estructurados. Los equipos que mantienen sitios grandes se benefician de la configuración centralizada.

Mejores Prácticas de SEO en Nuxt 4 para Producción

• Usar useSeoMeta para todas las tags SEO (title, description, Open Graph, Twitter Cards) con autocompletado TypeScript
• Usar useHead para URLs canónicas, tags hreflang, datos estructurados y scripts externos
• Envolver las meta tags estáticas en import.meta.server para eliminar el overhead de reactividad del cliente
• Incluir ogImageWidth, ogImageHeight y ogImageAlt para vistas previas de compartir en redes sociales
• Usar useHeadSafe para cualquier contenido generado por usuarios para prevenir ataques XSS
• Establecer valores por defecto a nivel de app en nuxt.config.ts y sobrescribir a nivel de página solo cuando sea necesario
• Probar con Google Rich Results Test para validar datos estructurados
• Verificar el renderizado en la pestaña Network de DevTools del navegador con JavaScript deshabilitado para simular el comportamiento de los rastreadores