React Helmet not updating meta tags

Question

React Helmet not updating meta tags

15k views Asked by Naor At 23 November 2024 at 17:04

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 :)

Original Q&A

There are 2 answers

**Beu** · Answer 1 · 2021-01-11 10:17:19

I faced the same issue. And solved it as below.

In your server file (say server/index.js), add const helmet = Helmet.renderStatic() after ReactDOMServer.renderToString. My code looks like:

const app = ReactDOMServer.renderToString(<App />);

const helmet = Helmet.renderStatic()
const indexFile = path.resolve('./build/index.html');
  fs.readFile(indexFile, 'utf8', (err, data) => {
     let updated = data.replace('<div id="root"></div>', `<div id="root">${app}</div>`);
     return res.send(updateHtmlContent(updated, helmet));
  }

and add the following function. This is to update html content with helmet tags.

function updateHtmlContent(app, helmet) {
      return `
        <!DOCTYPE html>
        <html lang="en">
          <head>
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
          </head>
          <body>
            <div id="root">
              ${app}
            </div>
          </body>
        </html>
      `
    }

This may help you :)

**roshan** · Answer 2 · 2020-11-19 04:37:44

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

From this node server return your index.html file and also pass head tags.

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

Here, tags is an array of HTML elements like <meta/>, <title/> etc.

Bonus: You can import the same tags module 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 as an engine, add this to your node sever

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

TechQA.

React Helmet not updating meta tags

There are 2 answers

Related Questions in HTML

Related Questions in REACTJS

Related Questions in META-TAGS

Related Questions in REACT-HELMET

Popular Questions

Popular Tags

Trending Questions