search

nfl / react-helmet

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

react-helmet doesnt provide create-react-app application metadata to facebook debugger. #517

Open laurencefass opened 4 years ago

laurencefass commented 4 years ago

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

What is the current behavior? I'm rendering the default App Component using

ReactDOM.render(, document.getElementById('root'));

and 

<Helmet>
  <title>Syntapse Leaflet example</title>
  <meta property="og:title" content="Demo"/>
  <meta property="og:description" content="Demo"/>
  <meta property="og:image" content="https://myimgurl"/>
  <meta property="og:url" content="https://mydomain.x"/>
  <link rel="canonical" href="https://react.syntapse.co.uk" />
</Helmet>

While these are loaded on the page, facebook debugger is not recognising any of them and only loading the default head specified in index.html

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React and react-helmet. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I cant do this as its SEO related.

What is the expected behavior? I expect the page loading the component above to render SEO . At the moment Im relying on site-wide data in index.html.

**Which versions of React and react-helmet, and which browser / OS are affected by this issue? "react": "^16.13.0", "react-dom": "^16.13.0", "react-helmet": "^5.2.1",

Did this work in previous versions of React and/or react-helmet?** dont know.

bodhiwd commented 4 years ago

You probably need to have a server-side rendering (SSR) set up for this to work in any capability, which I believe CRA doesn't do out of the box.

stackedq commented 4 years ago

I wrote an article about this issue, if you plan to stick for CRA or any other kind of CSR (client-side rendering) it may give you some ideas about how to deal with it. check it out on medium.

gabimoncha commented 2 years ago

@laurencefass you can use react-snap together with it and then it works. By nature the indexer only looks for the meta tags inside index.html file. In CRA react-helmet adds those tags during the javascript run, so the indexer won't see them. Because of this you need to have a static site.

laurencefass commented 2 years ago

Thanks. SSR works also. Razzle is an excellent lightweight option.