CODEWITHSUNDEEP
reactjsfacebook-opengraphprerendernetlifyreact-helmet
clemlatz
clemlatz

Reputation: 8063

How do I use react-helmet with netlify prerender?

I'm trying to set up netlify prerendering with a react + react router + react helmet app. I'm trying to display the page title in the tag and some open graph meta tags when a page is crawled.

Here's the code calling react-helmet:

    <Helmet>
      <title>{entry.title} — Road Trip en Islande</title>
      <meta name="description" content="Nested component" />
      <meta property="og:title" content={entry.title} />
      <meta property="og:url" 
        content={`https://roadtrips.iwazaru.fr/entry/${entry.id}`} />
    </Helmet>

from https://github.com/iwazaru/road-trips/blob/fb0d93af1d441b5f4378ee5d3e6f3bf0724b22e3/src/components/Entry/Entry.js

It does work in the browser without prerendering: https://roadtrips.iwazaru.fr/entry/S

It also works when prerending locally using netlify prerender, the correct title and open graph tags show up in the prerendered html.

But when crawling the page with the facebook debugger, nothing that I put in react helmet seems to be prerendered although the rest of the page is correctly prerendered: https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Froadtrips.iwazaru.fr%2Fentry%2FS

Am I doing something wrong ?

Upvotes: 2

Views: 3140

Answers (1)

clemlatz
clemlatz

Reputation: 8063

Solved it. The problem was apparently that there were open graph meta tags in the index.html template file, loaded before react-helmet. I still can't explain why they would be replaced when using prerender locally and not when using netlify's prerender.

Upvotes: 1

Related Questions