React-helmet: is it possible to use react-helmet for not a server rendering react app?

[jsappme]

I have a react app that I build using https://github.com/facebookincubator/create-react-app

but I cant find a the way of setting the meta using react-helmet.

is it possible to use react-helmet for not a server rendering react app?

[cwelch5]

@jsappme Sure, import Helmet into any component in your app. Setup the props per the README and you should be up and running. Server side is purely optional.

[jsappme]

I did it, it does change the title but when looking at the source code, it's still the default title.

[cwelch5]

The source code is showing what the server rendering was, which would be the default title because your aren't doing any server side rendering with Helmet. Just on the client side you should see your window/tab have the title you set. And if you inspect with dev tools, you'll see the updated title in your DOM. Does that help?

[jsappme]

yes got it thanks.

I am trying to set the meta data for this page for example https://fishii.shop/post/-KY_R9d0j6Mc43UpvCW0 so when I share it with facebook and twitter, it shows the main photo as the screenshot but it does not work. I guess it requires the server side rendering.

[cwelch5]

ah, yes, for FB and TW you'll need server side rendering. Check out the docs and let us know how it goes.

[zeeshanjan82]

I am facing the same issue with title. I am using the following seed project which uses react-helmet and does server side rendering but I am facing this issue : https://github.com/reactGo/reactGo/issues/842

[LucienPerouze]

Hi, maybe late ...
A bot (facebook, twitter, google, ...) will not uses javascript on its environment to render your app so there is no js pluggin that can do the trick on the client side. You have to render your page from the server. If you are on AWS s3 there is a easy way to solve this : https://medium.com/@lucienperouze/how-to-layout-facebook-shares-of-a-react-web-app-hosted-on-aws-s3-cloudfront-1ee146dbb5d2

[vovkind]

It was reported that Google does know to parse JS and read/execute code. It means after the page has been rendered the bot will be able to read the title, description tags that were created by React Helmet (at client side).

But the reality is different. I do see the title and meta tags at my react-scripts created web app, but when I run any SEO online analyzer they are like not exist.

Can somebody suggest? Is only option is have SSR?

[johnandblue]

I know I'm joining the party late, but is there a solution up to date for metadata when only using CSR?
Google so far reads "ish" js, but what about other places?
I support @vovkind question.... Is the only solution to modify our code to SSR?

[AubreyHewes]

@vovkind @johnandblue

__Yes__ for supporting bots/clients/scrapers/seo-analyzers/etc that do not execute javascript or do, but depend on the initial html meta. __You will have to SSR__.

The reason is simple; they depend on the initial html meta. That is the initial html delivered by the server.

Give react-static a try, you won't have to change _that much (sic)_ when coming from a CRA project (as it is based on the same).

Most notable change is in react-static Helmet is imported via Head from react-static.

[najandhamed]

Google mentioned that all js files rendered but in real, I've lost my title and meta tag on this website and actually lost my top position on Google! I've searched a lot but it seems that all CRAs must have pre-rendered or using SSR to have their SEO-friendly protocole!

[wiadev]

I've created a project with create-react-app and after using this plugin, it seems like the window title was changed but it still read the title which was set in index.html in SEO online checking tools.

i.e. https://sitechecker.pro/

Is it something we can't resolve on the client side?

[kelseygasser]

Has anyone found a client side solution for this? I have been looking for it as well. I stumbled upon this article which makes it look like it is possible, but I'm not finding clear instructions.

https://medium.com/mixed-marketing-technology/our-solution-to-make-seo-work-for-a-react-js-site-rankwatch-blog-9a311b86fb5f

[AubreyHewes]

@graphap @wiadev @kelseygasser

for supporting bots/clients/scrapers/seo-analyzers/etc that do not execute javascript or do, but depend on the initial html meta. You will have to SSR.

The reason is simple; most if not all depend on the initial html (i.e. curl url). That is the initial html delivered by the server.

Some bots (like google) do run js, though it can not be trusted to wait for a "full page render".. so it will apply the initial html + any rendered content (if bothered). this is why a SPA (with routes) requires some sort of SSR for fulfilling any SEO requirement(s)..

It all comes down to "depend on the initial html meta". If you want your SPA to be reasonably SEO compat then you will need some kind of SSR (see for example react-static.. create-react-app like). There is not yet a client side solution for this (and maybe never will be). If you want a public site that is SEO compatible then you (currently) require some sort of SSR.

[kelseygasser]

Thanks Aubrey. In your opinion is react-static the easiest framework out there to migrate to from create-react-app? We had considered moving to Next.js but it looked like a really large undertaking for our team. In the meantime we were planning on using Prerender.io to bypass the SEO issue. Static react looks much preferable for us, but I wanted to double check that we weren't missing any other solutions.

[AubreyHewes]

@kelseygasser react-static is/was based on cra, so will be easier than migrating to next.js. The differences between the two are larger than this discussion.

prerender is also an option, this is in a way what next.js does. prerender on request. though requires extra infra.

react-static is generate static on deploy and overlay static with dynamic on runtime
nextjs is generate static on request (i.e. prerender), though the api is other than known cra

If already delivering via, for example, express.. both could support the needs. My experience with react-static is that you need to be able to support incremental updates; if the business domain does not support usable incremental then nextjs is one of the best next, viable, alternatives.

I can not tell you what your best direction should be, the choice is yours ;-)

[kelseygasser]

Thanks for answering my question - I realize it's broader than the thread. We are delivering with express, so I guess it's hard to say which option is best. Prerender doesn't seem to support meta headers and tags for social media sites, which is one of my concerns. Thanks for giving me a starting point to research more :)

[AubreyHewes]

@kelseygasser
Without knowing your site.. Next.js is probably your answer. due to it's runtime SSR .
react-static requires an incremental/rebuild and redeployment on each possible SEO change. If your site does not change that much then it could be the better option

[taykcrane]

@AubreyHewes thanks for the knowledge. Can you explain why simply doing:
<meta property="og:image" content="/social-facebook.png" />
Won't work when social-facebook.png is in the public folder?

As we know, the below works fine for the favicon:
<link rel="shortcut icon" href="/favicon.ico">

So why not for other image assets? Makes no sense to me.

[kolomiytsevs]

If you are delivering with express and are using create react app, you could always use react-snapshot pre renderer to create pre-renders during the build when deploying to production. You can then use react-helmet to include meta data and titles in your head, which is also great for SEO. I have used it for my current project and it has worked great - it's has really sped up loading time as well.

[harsharora04]

Hi @kolomiytsevs, if it's not too much to ask, can you please help me with it? I want to deliver my CRA via express (stuck here) and want meta tags to render.

[nairabhijit]

I think the most important point missed here is 'Cloaking'. So, if you are providing SEO information only when the crawlers crawl and not to the end-user, Google considers this as Cloaking, but how does it identify, this is unknown. It clearly states that it has a stringent policy for Cloaking and might blacklist those websites completely.

My Solution

1. You can use react-helmet for adding meta tags and SEO related stuff on the client-side
2. For server-side rendering, you can identify on your web server if the request is coming from a Google bot or any bot you want to serve, and provide them content appropriately, you don't need to serve the entire HTML stuff, only the required information like meta tags or json-ld in script tags, etc.

Since the seo information is the same when the Google crawls and when the website is rendered on the client machine, this saves you from Cloaking.