how to give dynamic meta tags in react js project

Question

Currently, I am using meta tags inside the js file with react-helmet. It gives me the meta tags nodes while inspecting the element, but when I view the page source code or while trying to share my links in any social media like Facebook or Twitter, I am getting only the values in the index.html file. I want to have a separate set of meta tags in each page. How can I do that?

After doing some research I came across this link. But I am not getting how to use SSR. Is this what I need? Can someone help me to understand it?

Answer 1

You can use npm i react-meta-tags

refer: https://www.npmjs.com/package/react-meta-tags

import React from 'react';
import MetaTags from 'react-meta-tags';

class Component1 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta name="description" content="Some description." />
            <meta property="og:title" content="MyApp" />
            <meta property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div className="content"> Some Content </div>
        </div>
      )
  }
}

You can also refer official docs: https://facebook.github.io/create-react-app/docs/title-and-meta-tags