Existing meta tags don't get overriden

[mhluska]

I was curious for the rationale here. Ideally I would like to have default meta tags that exist before React is loaded for SEO reasons. But this library forces me to remove them otherwise I'll have duplicates. So then I'm looking at adding server-side rendering which is a huge undertaking just to have some static meta tags. Is there any alternative solution?

[xRahul]

Looks like this is only touching tags with Helmet attribute: https://github.com/nfl/react-helmet/blob/master/src/HelmetUtils.js#L416

I think it's the right thing to do as we can't be sure which tags need to be replaced, and touching code out of it's scope should not be done lightly as it can have spill over impact.

[izakfilmalter]

@mhluska I've gotten around this by doing the following inside of my index.html file.

<meta name="theme-color" content="#004ba0" data-react-helmet="true" />

Seems to only work when the tag is self closing and when data-react-helmet="true" is present.

[electic]

This is a good workaround. However, if you do not override it in your child pages, then putting the data-react-helmet in your html file will just cause it to get deleted.

[Zimovets]

in my index.html have code <meta name="description" content="some text ...."> and in one of the components have code <Helmet> <meta name="description" content={smallText} data-react-helmet="true" /> <title>{name}</title> </Helmet>

when I check the code in google chrome panel I see that title rewrites but description no??? where is the problem???

[Zimovets]

I tried to delete meta description from index.html and nothing happened, It looks like helmet doesn't see this tag in code, but it see title???

[TheKidCoder]

I think this should be documented in the main readme. I feel this is a common enough use case and an easy mistake to make.

Will open a PR.

[bdombro]

I added the following code to my app to manually remove original header elements:

let originalDescriptionElements = document.querySelectorAll('meta[name=description]');
originalDescriptionElements.forEach(e => {
  // @ts-ignore: ignore html.dataset being unknown
  if (!e.dataset) throw new Error("Helmet: html.dataset is not available in this browser.");
  // @ts-ignore: ignore html.dataset being unknown
  else if (!e.dataset.reactHelmet)
    e.parentNode.removeChild(e);
});

[thoughtworks-tcaceres]

@mhluska I've gotten around this by doing the following inside of my index.html file.

<meta name="theme-color" content="#004ba0" data-react-helmet="true" />

Seems to only work when the tag is self closing and when data-react-helmet="true" is present.

This fixed my issue of not being able to override the meta description tag. Thank you so much!

[webmobiles]

the solutions does not work for me:

      <Helmet>
        <meta name="description" content={t('projectcalls.homepage.description')} data-react-helmet="true" />
        <title>{t('projectcalls.homepage.title', {
          ns: 'seo'
        })}</title>
      </Helmet>

[webmobiles]

but i've solved upgrading the lib and using this code, on

componentDidMount() {
    const description = document.querySelector('meta[name="description"]');
    if (description) {
      description.remove();
    }

  }

[tommedema]

@TheKidCoder did you ever open that PR?

[mmahdigh]

@mhluska I've gotten around this by doing the following inside of my index.html file.

<meta name="theme-color" content="#004ba0" data-react-helmet="true" />

Seems to only work when the tag is self closing and when data-react-helmet="true" is present.

This seems to make the default tag disappear. even in the pages that the meta tag is not overriden, the index.html meta tag isn't showing up in the html code. I really can't see the difference between this workaround and deleting the meta tag in your index.html altogether.

[benoitkopp]

I'm using react-helmet-async but I had to use data-rh attribute in the index.html like : <meta name="description" content="Your content" data-rh="true" />

[Elius94]

I think the problem of metadata not being recognized by SEO tools is not affected by the data-rh="true" attribute or similar, I think it is due to the fact that these SEO tools check the tags directly on the index.html file before it is modified by the React system.

[CongCong-1228]

Has anyone solved this problem, I feel like there is no difference between adding that property and removing it

[Elius94]

Hello everyone! To solve this I've written this simple tool

https://www.npmjs.com/package/seo-injector

It changes the output HTML

[Deveshb15]

Did anyone get a workaround for this?

[0xwallett]

wow, react helmet just simply doesn't work

[vardhaman-ck12]

the solutions does not work for me:

      <Helmet>
        <meta name="description" content={t('projectcalls.homepage.description')} data-react-helmet="true" />
        <title>{t('projectcalls.homepage.title', {
          ns: 'seo'
        })}</title>
      </Helmet>

You need to add "data-react-helmet" attribute in index.html which you want to override and not in Helmet. Helmet by default will add this attribute.

[fadiakkad]

This solution is 100% working (you DON'T need to add data-react-helmet) const DESCRIPTION = "your des " <Helmet onChangeClientState={(newState) => { const metaDescription = document.querySelector('meta[name="description"]'); if (metaDescription) { metaDescription.setAttribute('content', DESCRIPTION || ''); } }}>

    </Helmet>

[devDanielCespedes]

This solution is 100% working (you DON'T need to add data-react-helmet) const DESCRIPTION = "your des " <Helmet onChangeClientState={(newState) => { const metaDescription = document.querySelector('meta[name="description"]'); if (metaDescription) { metaDescription.setAttribute('content', DESCRIPTION || ''); } }}>

    </Helmet>

Worked for me. Thanks a lot <3