How to set up meta tags in React?

Question

I'm working on a React app using react router. There was a need for SEO optimization and adding meta tags to each page of the application. I tried react helmet, but the Yandex micromarkup validator (https://webmaster.yandex.ru/tools/microtest/) does not see these dynamic meta tags, it only sees those that were set in index.html. When you go to the page in the browser, all the given meta tags are naturally loaded.

Is there any way to solve this problem without resorting to ssr? Or are these dynamic tags enough for the Google search engine for indexing and you don’t have to worry?

I hope it have a solution without ssr, maybe other library to control meta tags?

Answer 1

React application involves dynamically updating the metadata of your HTML document, such as title, description, and other relevant information, to improve SEO and provide better sharing on social media platforms.

React Helmet: The most common way to manage meta tags in a React application is by using the react-helmet library. This library allows you to control the head section of your React components.

Install the library using npm

npm install react-helmet

In your React component where you want to set up meta tags, import and use the react-helmet library. Helmet is a component provided by react-helmet that lets you manage your document head.

const Table = () => {
  return (
    <div>
      <Helmet>
        <title>Your Page Title</title>
        <meta name="description" content="Your page description." />
        <meta property="og:title" content="Your Open Graph Title" />
        <meta property="og:description" content="Your Open Graph Description" />
        <meta property="og:image" content="url-to-your-image" />
        {/* Add more meta tags as needed */}
      </Helmet>
      {/* Your component's content */}
    </div>
  );
};

render and inspect the component you may get meta tags