如何将 react-helmet 与 netlify prerender 一起使用？

Question

我正在尝试使用 React + React 路由器 + React 头盔应用设置 netlify 预渲染。我试图在抓取页面时在标签中显示页面标题和一些开放图元标签。

这是调用 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>

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

无需预渲染即可在浏览器中运行： https://roadtrips.iwazaru.fr/entry/S

它在使用 netlify prerender 进行本地预渲染时也有效，正确的标题和打开的图表标签显示在预渲染的 html 中。

但是当使用 facebook 调试器抓取页面时，尽管页面的其余部分已正确预呈现，但我放入 React 头盔的任何内容似乎都没有预呈现： https://developers.facebook.com/tools/debug/echo/?q=https%3A%2F%2Froadtrips.iwazaru.fr%2Fentry%2FS

我是不是做错了什么？

Answer 1

解决了。问题显然是在 index.html 模板文件中有开放图形元标记，在 react-helmet 之前加载。我仍然无法解释为什么在本地使用 prerender 而不是在使用 netlify 的 prerender 时它们会被替换。

如何将 react-helmet 与 netlify prerender 一起使用？

How do I use react-helmet with netlify prerender?

prerender

facebook-opengraph

reactjs

netlify

react-helmet