Unable to share react web page on facebook after implement react-helmet

[skjangid]

Hi, I just implement react-helmet for making the meta tags dynamic, react-helmet is working for making meta tags dynamic but whenever i ma trying to share page link on facebook, default meta tag content rendered. unable to get dynamic meta data.

Any one guys can help me to find the solution my error ?

[carlitoplatanito]

Are you using server side rendering? I could be wrong but I don't think Facebook processes your front-end JS before pulling the tags, etc. so it would have to be available in your DOM from the server or initial page load.

[skjangid]

No, i am using client side rending? can you please give me some idea how i can use server side rendering ?

[tsvecak]

Is this something that can be looked after? Cheers!

[HimaniPatelTH]

i am facing same issue anybody have any solution ?

[carlitoplatanito]

Sorry, I'm not really keeping up with this thread but here is Medium article on server-side rendering (https://medium.freecodecamp.org/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e) it depends how much control you have over the backend and what languages you're using. The easiest would be to use express JS with some react middleware, but it def is a lot more than can be covered in a forum response.

https://medium.freecodecamp.org/server-side-rendering-your-react-app-in-three-simple-steps-7a82b95db82e

[TheKidCoder]

And if SSR is not within reach, there are services such as http://prerender.io that will render your page as static HTML for bots to read like googlebot & facebook.

[manubenjamin]

While sharing a page to Facebook, if you are seeing default meta tag content, check the following,

• Inspect your html and ensure that your title tag and meta description are dynamically changing for each page.

• If title and description are changing dynamically and you are still seeing default meta tag content, then check whether you are using open graph meta tags(og tags) and it is dynamically changing or not.

[charan-r]

I'm also facing the same issue, pls someone suggest solution for this issue!

[jonnyfluckey]

I was having this issue with my website.

If you are using Netlify for your deployments, there is a setting you can enable in your build & deploy called "prerendering". I enabled this setting, and within 2 minutes, it fixed my issue. I'm guessing other deployment services may have similar settings. If not, http://prerender.io is an option as well.

[michaelolo24]

Eventually found the fix here. You'll have to update it via the server if you want social cards (fb or twitter) to show the change.

See: https://github.com/facebook/create-react-app/issues/1261

TLDR; https://create-react-app.dev/docs/title-and-meta-tags#generating-dynamic-meta-tags-on-the-server https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

There are some potential issues using ^ method if your index.html file is cached, but the way I got around that was using htmlWebpackPlugin to generate a template html file for dynamic data from the server and leave my index.html file untouched. Don't forget to sanitize your meta tags if you use the above route!

[hex-knight]

I was having this issue with my website.

If you are using Netlify for your deployments, there is a setting you can enable in your build & deploy called "prerendering". I enabled this setting, and within 2 minutes, it fixed my issue. I'm guessing other deployment services may have similar settings. If not, http://prerender.io is an option as well.

Thank you! That solved my issue for my a client-side-rendering web site I have in Netlify