How to update meta tags in React.js?

Question

I was working on a single page application in react.js, so what is the best way to update meta tags on page transitions or browser back/forward?

Answer 1

According to the official documentation React Doc - Title and Meta Tags, you can also use React Helmet

Answer 2

You can use react-meta-tags. It allows you to write title and other meta tags in a declarative way and in normal jsx format, which will be moved to head (Check server usage on the doc).

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

You may also like to check react-helmet if you have an advanced use case.

Answer 3

I've used react-document-meta in an older project.

Just define your meta values

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

and place a

<DocumentMeta {...meta} />

in the return

Answer 4

It is mentioned in other answers and comments, but it deserves highlighting - You almost definitely want to use:

React Helmet

This seems to be the solution that the community almost exclusively uses - 600,000 weekly downloads vs the 6,000 given in other solutions. "Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly." - and has support for server-side rendering.

Answer 5

Nice and very straightforward React Helmet usage example here:

https://dev.to/guimg/dynamic-document-head-with-react-helmet-28o6

The simple idea is you can use <Helmet></Helmet> component blocks to change your meta tags in accordance with your dynamic/internal pages content, like:

<Helmet>
  <title>Dynamic title with some {variable}</title>
  <meta name="description" content="Dynamic meta description with some {variable}" />
</Helmet>

Answer 6

You cand also give the page title and meta tags description in the following way.

place a meta tag of description in your index.html file like this.

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

in your .js files or .jsx files below the render() method write the page title and meta description for the page like this .

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>
);
}