React Helmet SEO

Question

I am using React Helmet in my React Application (CRA) to boost up my SEO. The App does not use SSR! I want to keep the client side rendering.

My current set up is as follows:

• removed <title> </title> from index.html
• removed <noscript> </noscript> from index.html

Added to my App.js (here my React Router is set up):

<Helmet> <title>VOYD Fabrics | Streetwear Online | Keine Versandkosten</title> <meta name="description" content="Willkommen bei VOYD Fabrics. Wir bieten dir durchdachte Streetwear aus einer Hand. Unser Label steht für klassische Designs, nachhaltige Produktion und ein nutzerfreundliches Shopping-Erlebnis." /> </Helmet>

Also I added to every single Route in my App:

<Helmet> <title>Page Title</title> <meta name="description" content="Page Description"/> </Helmet>

Unfortunatley the Google Result Page does not show any title or description, just the plain link to the website:

How do I set up React Helmet in a proper way in a CRA?

I also checked the URL via Google Search Console and it says <title/>. Actually I thought that react helmet is overriding this value?

Answer 1

React Helmet actually do nothing with Google, FB, Twitter SEO because crawler bot get meta data before React Helmet change your meta data header. That mean Helmet is quite useless with client side rendering. I research more and found some other way to make React become friendly with SEO :

• Change to NextJS, a ssr framework for React. That mean you have to change a lot of code.
• Using prerender techincal like: react-snap, prerender.io. But they are support only static page, it take a lot effort for dynamic page that change every day. Finally I get the idea of prerender.io and create my own solution.

My project using a React for front end, Nest for backend (actually it can be any framework, not important point in our case), nginx for proxy. All are deployed in a EC2. I change the config of nginx.conf. So it can detect if a request is from Google or FB bot, we render a html site with meta data tag. Google bot actually see this html page, does not see out react page.

  set $prerender 0;
if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|whatsapp") {
            set $prerender 1;
}
        if ($prerender = 1) {
                rewrite ^/srv/(.*) /srvs/$1;
        }

As you can see above, if Google bot come to crawl a blog page http://ourpage.com/srv/:id , nginx will override it, so page displayed is srvs/:id. And next step, what happend in srvs/:id?

location /srvs {            
   proxy_pass http://xx.xxx.xx.xxx:3001;
                            
}

srvs/:id now actually is create by our cache server (it can be our backend server). Backend will query database, get the data and return html file with metadata in header. Now Google, FB bot get it and show preview, description like other server side rendering website.

I post my implement here: https://gist.github.com/phongnt57/70a5c1c34e5a294120b46487599937b0/revisions

Original solution by prerender.io: https://gist.github.com/thoop/8165802