CODEWITHSUNDEEP
javascripthtmlreactjs
Abhishek Kumar
Abhishek Kumar

Reputation: 564

React helmet not overriding the title and meta tags

I am developing a project in react. I have given the default title tag and meta tags in index.html. I am trying to update the title and meta tag for each page through props using react-helmet. The title tag gets updated but only for a few seconds. Whenever I change the browser tab after 5-10 secs, the title reverts back to the default value. As for the other meta tags, those tags do not override at all.

index.html

<head>
  <title>Content...</title>
  <meta name="description" content="description/>
</head>

My Component

<Helmet>
  <title>{this.state.meta_title}</title>
  <meta name="description" content={this.state.meta_description}/>
</Helmet>

I tried using data-react-helmet="true".

<meta name="description" content={this.state.meta_description} data-react-helmet="true"/>

but it didn't help. I am trying to fix this problem from last two days but no luck. If anyone can help me, please help.

Update

I got the solution. I was calling the Helmet inside the page. When I called the Helmet component inside the App.js file, it started working. The title issue is fixed but the meta tags are not updating. New meta tags get to add at the bottom of the head.

Upvotes: 14

Views: 15967

Answers (1)

Lars Flieger
Lars Flieger

Reputation: 2554

data-react-helmet="true" is replace with data-rh="true" now

It's like @TomFinney said: Just add data-react-helmet="true" to tags in the index.html. Since react-helmet identifies these elements by the attribute when you update them.

index.html:

<title>From Index</title> <!-- title is an exception and does not require it -->
<meta name="description" content="From Index" data-react-helmet="true" />

App.jsx:

<Helmet>
  <title>From Helmet</title>
  <meta name="description" content="From Helmet" />
</Helmet>

Works: https://e8bnj8.csb.app/ | https://codesandbox.io/s/tender-gould-e8bnj8?file=/src/App.js

You can test it by disabling javascript in your browser.

Upvotes: 12

Related Questions