React Helmet not updating meta tags

问题

I have my index.html page in react project as following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Bucard | Digital Business Card</title>

  <meta name="title" content="Bucard | Digital Business Card">
  <meta name="description" content="Bucard - Description for bucard" />
  <meta property="og:title" content="Bucard | Digital Business Card" />
  <meta property="og:image" content="http://m.digital-card.co.il/zedka/152/images/icon.png" />
  <meta property="og:description" content="Bucard - Description for bucard" />
  <meta property="og:url" content="https://bucard.co.il/" />
</head>

<body>
  <div id="root"></div>
</body>

</html>

And have my react-helmet section, which exist in component with a path of it self on the url:

<Helmet>
   <title>{"Digital card of " + this.state.card.Name}</title>

   <meta name="title" content={"Digital card of " + this.state.card.Name} />
   <meta name="description" content="Description for the react-helmet section" />
   <meta property="og:title" content={"Digital card of " + this.state.card.Name} />
   <meta property="og:image" content="http://m.digital-card.co.il/friedman/249/images/icon.png" />
   <meta property="og:description" content="Description for the react-helmet section" />
   <meta property="og:url" content={"https://bucard.co.il/digitalCard/" + this.state.card.ShortID} />
</Helmet>

Now, the propblem here is that the only tag that replaces here is the <title> tag, but none of the <meta> tags are replaced.

I don't have server side rendering, I do have server side (node.js) and function that returns json of some values, that I render in my react application.

I search for almost 2 weeks but couldn't solve this yet, and this is very important to my project. Tried also put data-react-helmet=true in different situations, still not working though.

Can anyone please help me figure this out? Thanks a lot :)

回答1:

For an SPA without SSR (server side rendering), from a bot's point of view, your head tags are in your static index.html file in your dist/public folder. To add the ability to serve dynamic elements from head tag to bots you can:

Use a pre-render service
Alternatively use next.js to render your pages (or parts of the page) on the server so bots can crawl this
Look into other solutions for SSR

You may read - https://github.com/nfl/react-helmet/issues/489

An approach that worked for me:

Direct your traffic to a node server

Run a node server that returns your index.html file and also passes head tags.

return res.render('index', {
  headTags: ReactDOMServer.renderToStaticMarkup(tags),
})

Here, tags is an array of elements like meta,title etc. You can use the same code on frontend to get the head tags for Helmet.

In your index.html you can use handlebars to read the head tags that are passed from node server and print the head tags in head section.
```
<head>

  {{{
    headTags
  }}}
  ...
</head>
```

and to use handlebar an an engine, add this to your node sever

app.engine('html', handlebars.engine);

来源：https://stackoverflow.com/questions/64184706/react-helmet-not-updating-meta-tags

标签

html

reactjs

meta-tags

react-helmet