search

nfl / react-helmet

A document head manager for React
MIT License
17.28k stars 656 forks source link

meta tag for facebook is not working. #668

Open alexaung opened 2 years ago

alexaung commented 2 years ago

Do you want to request a feature or report a bug?

What is the current behavior? Meta tags for facebook is not working but title show on chrome's title **If the current behavior is a bug, https://github.com/alexaung/my_chordsheep

What is the expected behavior? When share the link, facebook should grab the title, description

**Which versions of React and react-helmet, and which browser / OS are affected by this issue? "react": "^17.0.2", "react-helmet": "^6.1.0" Chrome macOS Monterey V12,1

Did this work in previous versions of React and/or react-helmet?** This is first time added

rmacuna commented 2 years ago

I have the same problem, meta tags for faecbook and twitter is not working. I have already tried by sorting the meta tags to place it at the top of the head but with no success. It seems that onPreRenderHTML is not even getting the meta tags that I dynamically set in my screens.

KuschL commented 2 years ago

The crawlers of Facebook and Twitter cannot interpret Javascript. Therefore, the meta tags must be rendered by the server.

To achieve this you can look at NextJS for example. Then you don't need this library anymore, because NextJS has a built-in one: https://nextjs.org/docs/api-reference/next/head

alexaung commented 2 years ago

@KuschL My app is created by vitejs with reactjs and hosted on firebase hosting. Do you mean I need to create another project with NextJs for SSR? I have no experience in NextJS.

KuschL commented 2 years ago

Unfortunately, I have no experience with vitejs. However, the documentation may help you: https://vitejs.dev/guide/ssr.html

alexaung commented 2 years ago

Oh. thanks for the documentation. I did not see it. I will look into it.

alex-bukach commented 1 year ago

Please check this solution.