Nueva API de Metadata en Next.js 13 con soporte SEO | Tutorial de Next.js 13.2

Tabla de contenidos

• Introducción
• Descripción de la versión 13.3 de Next
• Cambios en el archivo Head
• Uso de metadata en versiones futuras
• Etiquetas disponibles en el objeto metadata
• Uso de templates de título
• Agregar metadata en páginas sin layout
• Opciones avanzadas de metadata
• Migración de versiones anteriores
• Opiniones sobre el nuevo sistema de metadata en Next

📝 La nueva forma de utilizar metadata en Next 13.2 y versiones posteriores

En la última actualización de Next, la versión 13.3, se introdujeron cambios importantes en la forma en que se maneja la metadata en las aplicaciones. Si has creado una aplicación con Next recientemente, específicamente después de la versión 13.2, es posible que hayas notado que falta algo al abrir el directorio de la aplicación. El archivo Head ya no está presente. Esto se debe a que en la versión 13.3 se deprecó y eliminó el archivo Head, y ahora toda la metadata se guarda en el archivo layout.js.

Descripción de la versión 13.3 de Next

La versión 13.3 de Next trajo consigo cambios significativos en la estructura de los archivos y la forma en que se gestiona la metadata de las aplicaciones. Anteriormente, el archivo Head se utilizaba para almacenar la metadata, pero a partir de la versión 13.2, esta responsabilidad se trasladó al archivo layout.js. Esto significa que ahora debes utilizar la función export const metadata en el archivo layout.js para definir la metadata de tu aplicación.

Cambios en el archivo Head

En las versiones anteriores de Next, solíamos utilizar el archivo Head para mantener la metadata de nuestra aplicación. Sin embargo, esto cambió en la versión 13.2. A partir de ahora, toda la metadata se debe incluir dentro del objeto metadata en el archivo layout.js. Dentro de este objeto, existen varias etiquetas disponibles que te permiten controlar aspectos clave de tu aplicación.

Uso de metadata en versiones futuras

Con la eliminación del archivo Head, es vital comprender cómo funciona el nuevo sistema de metadata en Next. Ahora, en lugar de definir la metadata en un archivo separado, debes hacerlo dentro del objeto metadata en el archivo layout.js. Esto te brinda mayor control y flexibilidad sobre cómo se muestra la información de tu aplicación en las pestañas del navegador y en los resultados de búsqueda.

Etiquetas disponibles en el objeto metadata

Dentro del objeto metadata del archivo layout.js, hay varias etiquetas que puedes utilizar para definir la metadata de tu aplicación. Una de las etiquetas más importantes es title, que controla el nombre de tu sitio y se mostrará en la pestaña del navegador. Al actualizar el valor de esta etiqueta, podrás cambiar el título de tu aplicación de manera dinámica.

Además del título, existen otras etiquetas como description, que te permite agregar una descripción de tu aplicación que aparecerá en los resultados de búsqueda de Google. También puedes utilizar etiquetas como keywords y open graph para mejorar la visibilidad de tu aplicación en los motores de búsqueda y las redes sociales.

Uso de templates de título

Una característica interesante del nuevo sistema de metadata en Next es la capacidad de utilizar templates de título. Esto te permite establecer un título predeterminado en el archivo layout.js y luego modificarlo en páginas específicas utilizando la clave template y un signo de porcentaje seguido de la letra "s". Esto ofrece una gran flexibilidad al momento de personalizar los títulos de cada página.

Agregar metadata en páginas sin layout

Si tienes páginas en tu aplicación que no utilizan un layout específico, aún puedes agregar metadata a ellas utilizando el título predeterminado definido en el layout actual. Sin embargo, debes tener en cuenta que la metadata de la página se basará en el layout utilizado y no podrás personalizarla completamente a menos que utilices un layout diferente.

Opciones avanzadas de metadata

Además de las etiquetas mencionadas anteriormente, existen muchas otras opciones disponibles en el objeto metadata. Estas opciones te permiten controlar aspectos como los robots de indexación de Google, los íconos de la aplicación, el color del tema, las etiquetas de redes sociales, el manifest.json para extensiones web, entre otros. Puedes consultar la documentación oficial de Next para obtener más detalles sobre estas opciones avanzadas.

Migración de versiones anteriores

Si estás utilizando una versión anterior de Next y deseas migrar a la versión 13.2 o posterior, es importante que realices la transición del archivo Head al nuevo sistema de metadata en el archivo layout.js. De lo contrario, tu aplicación podría romperse cuando actualices a una versión más reciente. Asegúrate de revisar y actualizar tu código para garantizar una migración exitosa.

Opiniones sobre el nuevo sistema de metadata en Next

El nuevo sistema de metadata en Next ha generado diferentes opiniones en la comunidad de desarrolladores. Algunos consideran que brinda una mayor flexibilidad y control sobre la información mostrada en las pestañas del navegador y en los resultados de búsqueda, mientras que otros extrañan la simplicidad del archivo Head. ¿Qué opinas tú? ¿Te gusta este nuevo sistema de metadata en Next?

Pros y contras

Pros:

• Mayor flexibilidad en la gestión de metadata.
• Posibilidad de personalizar títulos y descripciones de cada página.
• Mejor visibilidad en motores de búsqueda y redes sociales.

Contras:

• Requiere una migración para las aplicaciones existentes.
• Puede haber confusión para aquellos acostumbrados al archivo Head.

Destacados

• La versión 13.3 de Next ha introducido cambios significativos en la forma de manejar la metadata en las aplicaciones.
• Ahora, toda la metadata se debe definir en el archivo layout.js utilizando el objeto metadata.
• Existen varias etiquetas disponibles en el objeto metadata, como title, description, keywords, entre otras.
• El nuevo sistema de metadata ofrece mayor flexibilidad y control sobre la información mostrada en las pestañas del navegador y en los resultados de búsqueda.
• Es posible utilizar templates de título para personalizar los títulos de cada página de forma dinámica.
• La migración de versiones anteriores al nuevo sistema de metadata es necesaria para evitar problemas en la aplicación.

Preguntas frecuentes

P: ¿Puedo seguir utilizando el archivo Head en Next 13.2? R: No, a partir de la versión 13.2, el archivo Head fue deprecado y se recomienda utilizar el nuevo sistema de metadata en el archivo layout.js.

P: ¿Puedo personalizar la metadata de cada página en Next? R: Sí, puedes utilizar templates de título para personalizar los títulos de cada página de forma dinámica.

P: ¿Qué sucede si no agrego metadata a una página en Next? R: Si no agregas metadata a una página, se utilizará el valor predeterminado definido en el layout actual.

Recursos adicionales:

• Documentación oficial de Next sobre el nuevo sistema de metadata: enlace