How do I use react-helmet with netlify prerender?

Question

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 ?

Have you considered the 24-48 hour cache in effect on all prerendered content? does it happen to URL's that might not be in the cache already (e.g. create a new page and try scraping it)? — fool
@fool I did. Changes shows up but the tags from react helmet never do. — Iwazaru
I'm seeing it work in a Prerender server with Chrome as well. You might want to get in touch with Netlify and see if they can figured out what might be the cause of that. It could just be a timing issue or something. — Prerender.io

Iwazaru Iwazaru · Accepted Answer · 2018-06-07T07:26:03

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.

How do I use react-helmet with netlify prerender?

1 Answers