Una guía sobre la nueva función de metadatos de documentos de React 19

La reciente versión de React 19 introdujo los Metadatos de Documento , una función que gestiona metaetiquetas y elementos como títulos y descripciones directamente desde los componentes de React. Esta función simplifica la definición de elementos SEO, ya que permite definir metadatos directamente en los componentes de React y está integrada en React 19 y en todas las versiones futuras.

Antes del lanzamiento de React 19, los desarrolladores dependían de bibliotecas SEO como React Helmet o react-helmet-async para gestionar metadatos. Si bien estas bibliotecas ofrecen flexibilidad en la gestión de metadatos, presentan ciertas desventajas, incluyendo posibles vulnerabilidades.

En este artículo, aprenderá a usar la nueva función de metadatos de documentos de React 19 mediante ejemplos prácticos de código. Compararemos sus funcionalidades con bibliotecas SEO de terceros para determinar qué enfoque ofrece la gestión más eficiente de elementos SEO en aplicaciones React.

¿Qué son los metadatos del documento de React 19?

El éxito de un sitio web depende en gran medida de su visibilidad y accesibilidad para los rastreadores de motores de búsqueda. Los sitios web deben optimizarse para los motores de búsqueda mediante metadatos SEO, que pueden implementarse para los siguientes casos de uso:

• Mejorar la clasificación del sitio web, lo que a su vez mejora las tasas de conversión
• Agregar descripciones de productos y palabras clave para que su audiencia encuentre más fácilmente su producto o marca
• Agregar títulos de blogs y enlaces para hacer referencia y conectar páginas web o recursos relacionados

Los metadatos SEO permiten que las aplicaciones React consigan un mejor posicionamiento en buscadores y, en última instancia, generen más tráfico orgánico y conversiones. Los metadatos SEO se pueden implementar fácilmente mediante metadatos de documentos.

Los metadatos de documento de React 19 son una nueva función integrada que permite definir y añadir metaetiquetas SEO en los componentes de React. Esta función solo está disponible en React 19 y versiones posteriores. El uso de metadatos de documento ofrece numerosas ventajas, como una mejor configuración SEO de páginas web y las siguientes:

1. Declaración de metadatos sencilla: React 19 utiliza JSX, bastante fácil de usar, para declarar metadatos en componentes de React. JSX es una combinación de JavaScript y XML que permite escribir HTML en componentes de React. Este enfoque facilita la lectura y comprensión de los metadatos.
2. Gestión centralizada de SEO : La función de metadatos de documento permite gestionar los metadatos de SEO desde un único punto, reduciendo así los errores en las distintas páginas. Además, los metadatos de documento permiten actualizaciones dinámicas de los metadatos según el estado de la aplicación o las interacciones del usuario, lo cual es crucial para las aplicaciones de página única (SPA), donde el SEO ha sido tradicionalmente un reto. Las SPA garantizan que motores de búsqueda como Google reciban e indexen información precisa y actualizada. También garantizan que los usuarios reciban contenido relevante , ya que cargan dinámicamente los cambios en la página web mientras navegan.
3. Implementación más rápida: los metadatos del documento ahora están integrados en React 19 y serán nativos en futuras versiones, lo que significa que no tendrá que importar ni instalar bibliotecas de SEO de terceros para administrar sus metadatos.

En la siguiente sección verás un ejemplo de cómo incorporar metadatos SEO utilizando esta nueva función.

Cómo usar los metadatos de documentos de React 19

Implementar metadatos de documentos es fácil y rápido, ya que no es necesario instalar ninguna biblioteca ni configurar otros wrappers o componentes que los admitan. Y aunque requiere familiaridad con JSX, dado que la mayoría de los desarrolladores de React ya lo utilizan, esto no debería ser un problema al optar por ellos en lugar de bibliotecas SEO de terceros.

Para empezar a implementar los metadatos de los documentos, debes definir la función que configurará los metadatos SEO de un sitio web. Esta puede ser cualquier función que quieras alimentar con metadatos SEO.

Por ejemplo, podemos crear una función llamada CarModel. Esta función usará los metadatos del documento para definir el contenido de un sitio web que muestra coches exóticos. Esta función utiliza una propiedad llamada showroom. El showroomobjeto contiene todos los datos sobre el modelo del coche, incluyendo el nombre y el año:

función CarModel ({ sala de exposición }) { return (     

A continuación, el diseño del código cambia al agregar el código JSX que define y declara los metadatos SEO, configurando el articlecontenedor de elementos para que describa los metadatos SEO. El código obtiene el título del contenido invocando la showroompropiedad:

 artículo   título { sala de exposición . título }/ título      

Después de agregar el articleelemento, puedes comenzar a definir metaetiquetas SEO como name:

 meta name = "coche" content = "jaguar" / 

También puede definir relaciones entre el documento actual y recursos externos mediante los metadatos de enlace. Por ejemplo, vincula un archivo CSS externo al documento HTML y especifica la URL preferida para una página web. A continuación, se muestra un ejemplo con metadatos:link rel="stylesheet" href="styles.css"link rel="canonical" href="https://example.com/page"link rel

  link rel = "sala de exposición" href = "https://carsxy/sala de exposición" / 

Las palabras clave siempre proporcionarán a los motores de búsqueda información valiosa sobre el contenido de una página. Usar palabras clave precisas y relevantes ayuda a asociar la página web con las consultas de búsqueda correctas. Puedes definir palabras clave mediante metadatos de documentos, como se muestra en el siguiente ejemplo:

meta nombre = "palabras clave" contenido ={ showroom . keywords } /

Además de las metaetiquetas, también puedes agregar comentarios a tu código usando elementos de párrafo p:

 p  Este artículo muestra los mejores autos deportivos del mundo ... / p 

Cuando haya terminado de agregar los metadatos de SEO, cierre la función:

    / artículo  ); }  

Hay muchos elementos de metadatos que puedes agregar al usar Metadatos de documento, incluidas las siguientes metaetiquetas:

• Descripción : Un breve resumen del contenido de la página web, que los motores de búsqueda suelen mostrar en los resultados. Esta descripción ayuda a los usuarios a comprender el contenido de la página antes de hacer clic, lo que influye en la tasa de clics (CTR) de los resultados de búsqueda.
• Título : El título de la página web, que se muestra en la pestaña del navegador y que utilizan los motores de búsqueda.
• Juego de caracteres : Especifica la codificación de caracteres del documento HTML. Configurar el juego de caracteres correcto (p. ej., UTF-8) es esencial para mostrar el contenido correctamente, especialmente en páginas que incluyen caracteres de varios idiomas.
• Encabezado 1 (H1) : Representa el encabezado principal de una página web. La etiqueta H1 es crucial para el SEO y la experiencia de usuario, ya que proporciona a los motores de búsqueda y a los usuarios una comprensión inmediata del tema principal de la página.

La incorporación correcta de estos elementos de metadatos mediante metadatos de documentos mejora el SEO de su sitio web y garantiza que los motores de búsqueda y los navegadores puedan interpretar y mostrar sus páginas web de manera eficaz.

Metadatos de documentos frente a otras bibliotecas de gestión SEO de React

Antes del lanzamiento de Document Metadata, los desarrolladores usaban bibliotecas SEO para modificar los headcomponentes de React, ya que no existía una forma nativa de hacerlo. A diferencia de Document Metadata, que aún es nueva, estas bibliotecas SEO de React cuentan con amplios ecosistemas y soporte. Algunas alternativas a Document Metadata incluyen:

• react-helmet-async , una nueva variación de React Helmet diseñada para la renderización del lado del servidor
• Gancho de metaetiquetas de React
• etiquetas meta de reacción

Los metadatos de documentos son prácticos y seguros porque están integrados en React, mientras que las bibliotecas SEO como React Helmet presentan problemas de seguridad. React Helmet no ha tenido ninguna confirmación en GitHub desde 2020, aunque aún recibe alrededor de un millón de descargas semanales en npm. A pesar de su popularidad, el proyecto se abandonó debido a problemas de integridad y fugas de datos. Por consiguiente, Scott Taylor , desarrollador de React Helmet, lo archivó y lo reemplazó con react-helmet-async, que elimina los problemas de seguridad de React Helmet al encapsular los cambios en una solicitud del lado del servidor para evitar fugas de memoria.

A diferencia de los metadatos del documento, donde no es necesario importar ningún componente, las bibliotecas SEO requieren que importes componentes de la biblioteca SEO:

importar React desde 'react' ; importar { HelmetProvider } de 'react-helmet-async';        

A continuación se muestra un ejemplo de código que implementa elementos SEO usando react-helmet-async:

const app = (  HelmetProvider   App   Helmet   title  Blog de LogRocket / title   link rel = "canonical" href = "https://www.logrocket.com/" / / Helmet   h1  Hogar de contenido de primer nivel para desarrolladores frontend / h1  / App  / HelmetProvider  );                                                  

La ventaja que Document Metadata ofrece a los desarrolladores de React es que no tienen que instalar ni familiarizarse con bibliotecas de metadatos de terceros, pero no hace que estas herramientas queden obsoletas.

Las bibliotecas de SEO ofrecen diferentes características y capacidades de personalización, pero estas son algunas de las características comunes que ofrecen:

• Compatibilidad con todas las etiquetas de encabezado: Las bibliotecas SEO van más allá al ofrecer más etiquetas, como script, non-script, style y base. Estas etiquetas permiten añadir la mayor cantidad de información SEO posible. También proporcionan etiquetas de cuerpo y HTML.
• Representación del lado del servidor : las bibliotecas de SEO facilitan que los motores de búsqueda rastreen e indexen contenido HTML más rápido a través de la representación del lado del servidor.
• Priorizar etiquetas SEO específicas: bibliotecas como react-helmet-async tienen funciones que le permiten seleccionar etiquetas que aparecerán primero en el encabezado usando la prioritizeSeoTagsbandera

Bibliotecas como react-helmet-async ofrecen flexibilidad y un amplio soporte para metaetiquetas SEO, además de ser compatibles con las versiones anteriores y más recientes de React. Document Metadata se lanzó en React 19, por lo que pasará algún tiempo antes de que muchos desarrolladores comiencen a usarlo y a probar sus capacidades.

Conclusión

Los metadatos de documentos y React Helmet son excelentes para que los desarrolladores configuren metadatos SEO y mejoren su posicionamiento en las búsquedas de Google. Sin embargo, es importante saber que muchos aspectos técnicos afectan el posicionamiento de una aplicación web React, entre ellos:

• Diseño y maquetación de páginas
• Calidad del contenido
• Seguridad y estructura del sitio
• Retroenlaces SEO

Los metadatos de documentos son para desarrolladores que buscan una solución sencilla para los metadatos SEO sin tener que recurrir a las personalizaciones que ofrecen las bibliotecas de terceros. Es importante evaluar el estado de seguridad de la biblioteca SEO de terceros que se desea utilizar para evitar el riesgo de usar bibliotecas SEO abandonadas, como React Helmet, que presentan problemas de fugas de memoria.

Empieza ahora

Si quieres conocer otros artículos parecidos a Una guía sobre la nueva función de metadatos de documentos de React 19 puedes visitar la categoría Guias.