Come aggiornare i meta tag in React.js?

Question

Stavo lavorando su un'applicazione a pagina singola in react.js, quindi qual è il modo migliore per aggiornare i meta tag sulle transizioni di pagina o sul browser indietro/avanti?

Answer 1

Ho utilizzato react-document-meta in un progetto precedente.

Basta definire i valori meta

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' 
     } 
    } 

e mettere un

<DocumentMeta {...meta} /> 

nel ritorno

Answer 2

È possibile utilizzare react-meta-tags. Ti consente di scrivere titolo e altri meta tag in modo dichiarativo e nel normale formato jsx, che verrà spostato in primo piano (controlla l'utilizzo del server sul 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> 
    ) 
    } 
} 

Potrebbe piacerti anche per verificare react-helment se si dispone di un caso d'uso avanzato.

Answer 3

Si può anche fornire la descrizione del titolo della pagina e del meta tag nel modo seguente.

inserisci un meta tag di descrizione nel tuo file index.html come questo.

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<title>Dynamic Page title here</title> 

nei file .js o file .jsx sotto il metodo render() scrivere il titolo della pagina e meta description per la pagina come questa.

render() 
{ 
document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically"; 

return(
    <div>Page content</div> 
); 
}