Cómo cambiar el título y los metadatos con React Helmet

Introducción

React Helmet es un componente para gestionar dinámicamente las headsecciones del documento. Algunos casos de uso comunes incluyen la configuración de las etiquetas title, descriptiony metapara el documento.

Cuando se combina con la representación del lado del servidor, permite configurar metaetiquetas que leerán los motores de búsqueda y los rastreadores de redes sociales. Esto hace que la representación del lado del servidor y React Helmet sean una combinación poderosa para crear aplicaciones que pueden beneficiarse de la optimización de motores de búsqueda (SEO) y los datos de redes sociales como oEmbed, Facebook Open Graph o Twitter Cards.

En este artículo, explorará la funcionalidad de React Helmet en una aplicación React.

Prerrequisitos

Para seguir este artículo necesitarás:

• Familiaridad con la instalación de paquetes con un administrador de paquetes como npmo yarn.
• Familiaridad con la importación y el uso de componentes en su proyecto React.

Nota: Este tutorial no cubrirá los pasos para crear un proyecto React ni para configurar la renderización del lado del servidor. Consulta Cómo habilitar la renderización del lado del servidor para una aplicación React .

Este tutorial fue verificado con Node v15.3.0, npmv6.14.9, reactv17.0.1 y react-helmetv6.1.0.

Paso 1: agregar React Helmet a su proyecto

Primero, instale el componente en su proyecto:

npm install react-helmet@6.1.0

Ahora puedes usar React Helmet en tu aplicación agregando los elementos que deben ir en el encabezado del documento como hijos del Helmetcomponente:

fuente/App.js

import { Helmet } from 'react-helmet';function App() {  return (    div className="App"      Helmet        titleApp Title/title        meta name="description" content="App Description" /        meta name="theme-color" content="#008f68" /      /Helmet    /div  );}export default App;

Luego, abre las herramientas para desarrolladores de tu navegador e inspecciona el headelemento:

Inspect Elementhead  !-- ... ---  titleApp Title/title  !-- ... --  meta name="description" content="App Description" data-react-helmet="true"  meta name="theme-color" content="#008f68" data-react-helmet="true"  !-- ... ---/head

Observa los titleelementos metaagregados por React Helmet.

Paso 2: sobrescribir valores

Los componentes que se encuentran más abajo en el árbol pueden anular los valores proporcionados al Helmetcomponente de un nivel superior.

Por ejemplo, considere un ChildComponentque contiene un Helmetcomponente que modifica title:

src/ChildComponent.js

import React from 'react';import { Helmet } from 'react-helmet';export default function ChildComponent() {  return (    div      Helmet        titleModified Title/title      /Helmet      h1Child Component/h1    /div  )}

A continuación, vuelva a visitar Appel componente e incluya lo nuevo ChildComponent:

fuente/App.js

import { Helmet } from 'react-helmet';import ChildComponent from './ChildComponent';function App() {  return (    div className="App"      Helmet        titleApp Title/title        meta name="description" content="App Description" /        meta name="theme-color" content="#008f68" /      /Helmet      ChildComponent /    /div  );}

Luego, abre las herramientas para desarrolladores de tu navegador e inspecciona el headelemento:

Inspect Elementhead  !-- ... ---  titleModified Title/title  !-- ... --  meta name="description" content="App Description" data-react-helmet="true"  meta name="theme-color" content="#008f68" data-react-helmet="true"  !-- ... ---/head

Se titlecambiará de App Titlea Modified Title. Las metaetiquetas para los valores descriptiony theme-colorpermanecerán iguales porque no se han sobrescrito.

Paso 3: Manejo de atributos para htmlybody

Incluso puedes incluir los elementos htmly bodysi necesitas especificar atributos para ellos.

Por ejemplo, considere un bodyelemento al que darkse le aplica un tema:

fuente/App.js

import { Helmet } from 'react-helmet';function App() {  return (    div className="App"      Helmet        titleApp Title/title        meta name="description" content="App Description" /        meta name="theme-color" content="#008f68" /        body /      /Helmet    /div  );}

Luego, abre las herramientas para desarrolladores de tu navegador e inspecciona el bodyelemento:

[seconday_label Inspect Element]body data-react-helmet="class"  !-- ... --/body

El classse establecerá en dark.

Paso 4: renderizado en el servidor

El beneficio completo de React Helmet se hace evidente cuando la aplicación se procesa en el servidor, de modo que la aplicación se entrega con los elementos correctos en el encabezado del documento.

Suponiendo que tiene configurada una aplicación renderizada del lado del servidor React, puede llamar renderStatical método de React Helmet inmediatamente después de llamar a ReactDOMServer renderToStringo renderToStaticMarkuppara obtener una instancia con propiedades para los Helmetdatos:

servidor/index.js

import React from 'react';import ReactDOMServer from 'react-dom/server';import express from 'express';import { Helmet } from 'react-helmet';import App from '../src/App';const PORT = process.env.PORT || 3006;const app = express();app.get('/*', (req, res) = {  const appString = ReactDOMServer.renderToString(App /);  const helmet = Helmet.renderStatic();  const html = `!DOCTYPE html    html      head        ${helmet.title.toString()}        ${helmet.meta.toString()}      /head      body        div          ${ appString }        /div      /body    /html  `  res.send(html);});app.listen(PORT);

Al llamar a Helmet, renderStaticse devuelve una instancia con propiedades como titley meta. También tendrá acceso a otras propiedades como link, script, noscript, style, htmlAttributesy bodyAttributes.

Paso 5: renderizado asincrónico conreact-helmet-async

Como lo mencionó aquí @mxstbr de Spectrum, React Helmet funciona de manera sincrónica, lo que potencialmente puede generar problemas en el servidor, especialmente con la transmisión.

Una bifurcación de React Helmet llega al rescate: react-helmet-async.

npm install react-helmet-async@1.0.7

La API es la misma, con la excepción de que es HelmetProvidernecesario encapsular el árbol de componentes tanto en el cliente como en el servidor:

import Helmet, { HelmetProvider } from 'react-helmet-async';function App() {  return (    HelmetProvider      div className="App"        Helmet          titleApp Title/title          meta name="description" content="App Description" /          meta name="theme-color" content="#008f68" /        /Helmet      /div    /HelmetProvider  );}

Hay más información sobre la intención y el uso de React Helmet Async disponible en la publicación de anuncio en el blog Open del New York Times .

Conclusión

En este artículo, exploraste la funcionalidad de React Helmet en una aplicación React. En particular, cómo funciona bien con la representación del lado del servidor para promover integraciones de SEO y redes sociales.

Si desea obtener más información sobre React, eche un vistazo a nuestra serie Cómo codificar en React.js o consulte nuestra página de temas de React para ver ejercicios y proyectos de programación.