search

nfl / react-helmet

A document head manager for React
MIT License
17.34k stars 660 forks source link

Social media link preview not shown #665

Closed azizbecha closed 2 years ago

azizbecha commented 2 years ago

Hello there, I'm implementing react-helmet v6 with react v17 and the meta tags are updated successfully. But the problem is that social media link previews are showing the default title (React App) and description (Web site created using create-react-app) for the react app. What's wrong ? What should I do ? I don't know why the link preview is not loading correctly as it should be and I hope this issue get fixed. Thank you.

RakeshPotnuru commented 2 years ago

I am also experiencing the same issue. There are many issues created regarding this but no solution was provided.

But the only solution is pre-rendering. I am using Netlify for deployment and it has a pre-rendering feature. So working fine now. If you are not using Netlify you can either use any pre-rendering tool or shift to NextJs.

soolidtech commented 2 years ago

Social Network crawlers do not run your JS, but only inspect html that's returned by your server for a specific url. The thing is that your server is likely to return same content for any url, that is : your client bundle.

There are several solutions to address your needs, one of most popular in 2022 is SSR (server side rendering) where your page content is generated server side first instead of getting scaffolded client side. It adds more complexity on your app though.

With SSR, facebook will get resource related meta, the way you seem to expect. @RakeshPotnuru was talking about pre-rendering service, which is another solution, left behind for a wild now.

azizbecha commented 2 years ago

Hello, first of all sorry @RakeshPotnuru for not replying. Second, yes the problem is that my app is rendering the content on the client side not the server side. The most modern solution is to migrate to NextJS. Anyway thank you both for your time..