Solución:
He usado react-document-meta en un proyecto anterior.
Simplemente defina sus meta valores
const meta = {
title: 'Some Meta Title',
description: 'I am a description, and I can create multiple tags',
canonical: 'http://example.com/path/to/page',
meta: {
charset: 'utf-8',
name: {
keywords: 'react,meta,document,html,tags'
}
}
y coloque un
<DocumentMeta {...meta} />
en el regreso
Puede utilizar react-meta-tags. Le permite escribir el título y otras metaetiquetas de forma declarativa y en formato jsx normal, que se moverá al encabezado (Verifique el uso del servidor en el documento).
import React from 'react';
import MetaTags from 'react-meta-tags';
class Component1 extends React.Component {
render() {
return (
<div class="wrapper">
<MetaTags>
<title>Page 1</title>
<meta id="meta-description" name="description" content="Some description." />
<meta id="og-title" property="og:title" content="MyApp" />
<meta id="og-image" property="og:image" content="path/to/image.jpg" />
</MetaTags>
<div class="content"> Some Content </div>
</div>
)
}
}
También puede comprobar react-helmet si tiene un caso de uso avanzado.
Es casi seguro que desea utilizar:
Reaccionar casco
En contraste con react-meta-tags puede anidar <Helmet>sy para que pueda definir sus metaetiquetas en lo profundo de su aplicación, como <title>s que deberían anularse entre sí. Y en contraste con react-document-meta puedes definir cosas usando jsx (y anidar cosas).
Esta parece ser la solución que la comunidad utiliza casi exclusivamente: 600.000 descargas semanales frente a las 6.000 dadas en otras soluciones. “Helmet toma etiquetas HTML simples y genera etiquetas HTML simples. Es muy simple y React amigable para principiantes”. – y tiene soporte para la representación del lado del servidor.
Aquí hay un ejemplo, adaptado de la portada:
<Parent>
I'm a parent
<Helmet>
<title>My Title</title>
<meta name="description" content="Helmet application" />
</Helmet>
<Child>
I'm a child
<Helmet>
<title>Nested Title</title>
<meta name="description" content="Nested component" />
</Helmet>
</Child>
</Parent>
salidas:
<head>
<title>Nested Title</title>
<meta name="description" content="Nested component">
</head>
<Parent>
I'm a parent
<Child>
I'm a child
</Child>
</Parent>