Cómo agregar metaetiquetas en Nuxt.js

Nuxt.js es un marco poderoso para crear aplicaciones Vue.js renderizadas en el lado del servidor. Además de proporcionar una base sólida para crear aplicaciones complejas, Nuxt.js también facilita la adición de etiquetas meta a sus páginas.

Descubra cómo incluir etiquetas meta en su aplicación Nuxt para mejorar el SEO y la visibilidad de su sitio en las redes sociales.

Las metaetiquetas son fragmentos de código que proporcionan información sobre una página web. Estas etiquetas están presentes en la fuente HTML, al igual que el contenido de su página, pero no son visibles en la página misma.

Las etiquetas meta pueden proporcionar información como el título de la página, la descripción y las palabras clave. También se utilizan para proporcionar información para compartir en las redes sociales y optimizar los motores de búsqueda.

Antes de sumergirse en la adición de etiquetas meta, cree una nueva aplicación Nuxt.js. Para eso, asegúrese de tener

Node.js instalado en su dispositivo. Luego, abre tu terminal y ejecuta el siguiente comando:

npx create-nuxt-app mi-aplicación

Esto creará una nueva aplicación Nuxt.js en un directorio llamado mi-aplicacion. Siga las indicaciones para configurar su aplicación según sea necesario.

Una forma de agregar etiquetas meta a su aplicación Nuxt.js es agregarlas globalmente. Para hacer esto, agregue una etiqueta de título y dos etiquetas meta: una para el conjunto de caracteres y otra para la ventana gráfica. Abre tu nuxt.config.js y agregue una propiedad head al módulo.exportaciones objeto:

módulo.exportaciones = {
 cabeza: {
 título: 'Mi aplicación',
 meta: [
 { juego de caracteres: 'utf-8' },
 { nombre: 'vista', contenido: 'ancho=ancho-dispositivo, escala-inicial=1' }
 ]
 }
}

Adición de metaetiquetas en páginas individuales

A veces, es posible que desee agregar metaetiquetas solo a páginas específicas en su aplicación. Para hacer esto, puede agregar una propiedad de encabezado a la definición del componente para la página: