5

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:

enter image description here

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?

Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Martin Seubert
  • 978
  • 3
  • 21
  • 37
  • 1
    Why don't you set the title like this ```document.title = VOYD Fabrics``` in ```componentDidMount``` of any component you want to change it? – Gh05d Jun 02 '20 at 10:00
  • 3
    react helmet does the same – Sercan Paspal Jun 02 '20 at 10:09
  • 1
    How long has it been since you've used or updated your code with ```react-helmet```, it usually takes a while to get updated result on google. If you have google search console, you can request your page/pages to be re-indexed. if you dont have google search console account, I would recommend registering. – ertemishakk Jun 02 '20 at 13:05
  • This can not be the issue, there was a new indexing after the changes. I am sure about that. I also have a search console account, beacuse I checked the URL as I mentioned above. I removed the title and meta description in the index.html and after a few days google just showed the url and no more title and description. But I thought that the React Helmet injection would be enough and the right approach for this... – Martin Seubert Jun 02 '20 at 13:40
  • `helmet` is changing `html` head during render time which is far after what a crawler will get. check [this](https://medium.com/@stackedq/fixing-seo-problems-for-cra-create-react-app-c47e62f13be) out. – StackedQ Jun 28 '20 at 09:47
  • And this approach is changing title and description before the render? So it is faster than React Helmet? And how do I inject dynamic content to the description and title, beacuase I have multiple categories in my shop? Thanks for helping! – Martin Seubert Jun 29 '20 at 11:06

1 Answers1

2

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

phongnt
  • 711
  • 7
  • 13