How to add dynamic meta data (Page wise) using React Helmet for Client Side Rendering App(using CRA)?

[krupalox]

Hello,

I am using ReactJS for my front-end pages (public pages) using Create React Application (CRA) method.

To have SEO-Friendly web app, I would like to have a meta title and description page wise. To achieve this, I have already installed below NPM (react-helmet) which makes console data dynamic BUT the dynamic data is NOT displaying as expected for source code. NPM : https://www.npmjs.com/package/react-helmet

Question: Is there any way to have a dynamic meta title and description (page-wise) using a react-helmet and CSR based ReactJS app?

NOTE: At the moment, I am not looking to convert into SSR using expressJS or NextJS.

[Lucas-Geitner]

You should use it with https://github.com/stereobooster/react-snap ;)

[krupalox]

You should use it with https://github.com/stereobooster/react-snap ;) @Lucas-Geitner Thanks for your response. I will review the same. Do you know any website which is developed using "react-snap"?

[TrejoCode]

Explain a 'real' case, I use it in a Layout with dynamic data without problems. Like a:

<Layout title = "Homepage" description = "Blah, blah" keywords= "seo, tags, for, current, page">
   <AllPageComponent />
</Layout>

The Layout component is based in React Helment

<>
   <Helmet>
        <title> { title } </title>
        <meta name="description" content = { description } />
        <meta name = "keywords" content = { keywords } />
    </Helmet>
    <div className="layout">
        { children }           
    </div>
</>

[TrejoCode]

@krupalox Your issue is solved?

[krupalox]

@TrejoCode Thanks for your response. I am still looking for concrete solution.

By integrating react-helmet library, I can update page title and meta data successfully. That's fine.

At the moment, my concern is, due to some reason, it is showing main page data (title and meta details) in the source code for all the internal page. Having said that, Google Bot is NOT able to fetch page-wise data (title and meta details) so our SEO rank is very low a crawling of inner pages is not working.

I am not sure, if I missed anything in configuration. Glad to have your input for this.

[TrejoCode]

@krupalox, I understand you, @Lucas-Geitner has the answer, remember it is not for all use cases. By default in CRA it is not the best option for SEO, the SEO you will get will be low with respect to the SSR approach, even using tools such as 'react-snap' and 'react-helmet'. A tip for the future: If you need to continue with React, I recommend that you migrate to Next.js, it has everything we like about React + SSR with minimal configuration.

[vaibhav-systango]

@krupalox @TrejoCode any solution to the issue that Krupal is facing? i.e. can we use CSR and achieve SEO ? Also @krupalox did you find any alternative solution apart from switching to next.js or SSR a create react app using node express ? I even tried node-express server and run the code using SSR but there react-router-dom doesn't loads meta dynamically it's just when we use hrefs for changing routes on our client side code then it works !

[krupal-jeeves]

@vaibhav-systango As a permanent solution, we have used NextJS to have SSR which is working fine for us.