useSeoMeta
El composable useSeoMeta te permite definir las meta etiquetas SEO de tu sitio como un objeto plano con soporte completo para TypeScript.
Esto te ayuda a evitar errores comunes, como usar name en lugar de property, así como errores tipográficos, con más de 100 meta etiquetas completamente tipadas.
Esta es la forma recomendada de agregar meta etiquetas a tu sitio ya que es segura contra XSS y tiene soporte completo para TypeScript.
Uso
useSeoMeta({
title: 'Mi Sitio Asombroso',
ogTitle: 'Mi Sitio Asombroso',
description: 'Este es mi sitio asombroso, déjame contarte todo sobre él.',
ogDescription: 'Este es mi sitio asombroso, déjame contarte todo sobre él.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})Al insertar etiquetas que son reactivas, debes usar la sintaxis de getter computado (() => valor):
const title = ref('Mi título')
useSeoMeta({
title,
description: () => `Esta es una descripción para la página ${title.value}`
})Parámetros
Hay más de 100 parámetros. Consulta la lista completa de parámetros en el código fuente.
Ver también getting-started > seo-metaRendimiento
En la mayoría de los casos, las meta etiquetas SEO no necesitan ser reactivas ya que los robots de los motores de búsqueda principalmente escanean la carga inicial de la página.
Para un mejor rendimiento, puedes envolver tus llamadas a useSeoMeta en una condición solo para el servidor cuando las meta etiquetas no necesiten ser reactivas:
if (import.meta.server) {
// Estas meta etiquetas solo se agregarán durante el renderizado del lado del servidor
useSeoMeta({
robots: 'index, follow',
description: 'Descripción estática que no necesita reactividad',
ogImage: 'https://example.com/image.png',
// otras meta etiquetas estáticas...
})
}
const dynamicTitle = ref('Mi título')
// Solo usa meta etiquetas reactivas fuera de la condición cuando sea necesario
useSeoMeta({
title: () => dynamicTitle.value,
ogTitle: () => dynamicTitle.value,
})Esto anteriormente usaba el composable useServerSeoMeta, pero ha sido deprecado en favor de este enfoque.
※Esta página es una traducción no oficial de la documentación oficial de Nuxt.js.
La página correspondiente en la documentación oficial está aquí:
https://nuxt.com/docs/3.x/api/composables/use-seo-meta