React Helmet not updating meta title tag

M

2

9

I've been setting my react.js SPA's page titles by doing:

document.title = {some title}

...so far and it worked fine. Now, I also wanted to update the meta title tag and so I installed react-helmet.
In my component, I've imported Helmet from the library and did:

render() {
  {/* ... */}
  return (
    <div>
      <Helmet>
        <title>{docTitle}</title>
        <meta name="title" content={docTitle} />
      </Helmet>
      {/* ... */}
    </div>
  )
}

When opening the page, I saw that the document title is properly updated, but when inspecting the elements in the browser, I noticed that <meta name="title" is not being updated, while a few lines down, <title> is updated.

What am I doing wrong here?

Massengale answered 29/5, 2019 at 7:56 Comment(0)

M

11

In my <head> code, I added the following tag in the index.html file:

<meta name="title" content="Default Title">

When updating that meta tag using react-helmet, I still saw that tag un-updated in the index.html file when inspecting the elements in my browser.
However, what I did not notice, is that at the very bottom of the <head>, Helmet apparently added this tag instead:

<meta name="title" content="Default Title" data-react-helmet="true">

I'm guessing (and hoping) that this will be crawled by search engine bots.

Update:
After some time has passed, I can verify that Facebook and Google properly read helmet's title tag.

Massengale answered 30/5, 2019 at 7:17 Comment(0)

O

23

It's not documented in the readme, but you have to add data-react-helmet="true" to your meta tags that you want to replace with react-helmet. So as an example, in your index.html, your meta tag should be updated to look like this:

 <meta name="title" content="Default Title" data-react-helmet="true">

This should be in the readme, I don't know why it's not, and I saw a comment that someone had already opened a PR to add it.

Overstreet answered 12/6, 2020 at 2:25 Comment(0)

M

11

In my <head> code, I added the following tag in the index.html file:

<meta name="title" content="Default Title">

When updating that meta tag using react-helmet, I still saw that tag un-updated in the index.html file when inspecting the elements in my browser.
However, what I did not notice, is that at the very bottom of the <head>, Helmet apparently added this tag instead:

<meta name="title" content="Default Title" data-react-helmet="true">

I'm guessing (and hoping) that this will be crawled by search engine bots.

Update:
After some time has passed, I can verify that Facebook and Google properly read helmet's title tag.

Massengale answered 30/5, 2019 at 7:17 Comment(0)

Recommended topics

Hot tags