react-helmet-async icon indicating copy to clipboard operation
react-helmet-async copied to clipboard

Published 20 hours ago • verified publisher icon staylor

Duplicate description meta tag

Open advanceddev opened this issue 4 years ago • 3 comments

Hello there. I have default meta-tag description at the index.html React-helmet can replace meta-tag description at the index.html, but not react-helmet-async

Now i have two meta-tag description: from index.html and from another page.

Usage:

index.html <meta name="description" content="My awesome description" data-react-helmet="true" />

anotherPage.js <Helmet defer={false} titleTemplate="%s - My site" defaultTitle=My default title"> <title>Title for page</title> - work fine <meta name="description" content="Another description" data-react-helmet="true" /> - not working...

But if i remove description tag from index.html, i don't see any description tag.

Remove data-react-helmet="true" didn't help.

P.s sorry for my English :)

advanceddev avatar Oct 28 '20 13:10 advanceddev

A late solution here, in case anyone encounters the same problem: for react-helmet-async, the attribute to set is data-rh="true" instead of data-react-helmet="true". It should really be documented, though 🤔

antoinegaillardpaloit avatar Mar 02 '21 15:03 antoinegaillardpaloit

@antoinegaillardpaloit thank you. I came across this issue today + this saved me some time!

maha2490 avatar May 19 '22 15:05 maha2490

As @antoinegaillardpaloit said, using data-rh="true" on static meta tags work, but I noticed some important behavior to mention:

  • Suppose you have this hardcoded meta in your HTML template: <meta name="xyz" content="ABC" data-rh="true"/>
  • Now you render a React app but don't render this: <Helmet><meta name="xyz" content="ABC" data-rh="true"/></Helmet>
  • Your SSR output will contain the xyz metadata
  • After hydration, the xyz metadata will be erased by Helmet

slorber avatar Aug 19 '22 13:08 slorber

  • Suppose you have this hardcoded meta in your HTML template: <meta name="xyz" content="ABC" data-rh="true"/>

add data-rh="true" to tags not rendered by Helmet probably voids your warranty

staylor avatar Nov 20 '23 19:11 staylor

I have tried these solution but still when I share a link to specific page of my site I get the meta tags that are defined in the index.html file. I am using CSR.

Hat52 avatar Dec 28 '23 03:12 Hat52

I have a React project where the metadata is changing. But when I share my URL with someone, their title and description don't update. I have separate metadata for each page.

heyalizaid avatar Dec 28 '23 18:12 heyalizaid

I have a React project where the metadata is changing. But when I share my URL with someone, their title and description don't update. I have separate metadata for each page.

I am facing similar issue.

Hat52 avatar Dec 28 '23 18:12 Hat52

I have a React project where the metadata is changing. But when I share my URL with someone, their title and description don't update. I have separate metadata for each page.

I am facing similar issue.

Suggestions are to use NextJs SSR (Server Side Renderering) and also to use a separate system for this to preload pages. This is the article I am following to resolve this https://ravikirandhulipala.medium.com/how-to-resolve-meta-data-issues-in-react-spa-with-server-side-rendering-firebase-cloud-functions-7e5549690820

heyalizaid avatar Dec 28 '23 18:12 heyalizaid

I have a React project where the metadata is changing. But when I share my URL with someone, their title and description don't update. I have separate metadata for each page.

I am facing similar issue.

Suggestions are to use NextJs SSR (Server Side Renderering) and also to use a separate system for this to preload pages.

This is the article I am following to resolve this https://ravikirandhulipala.medium.com/how-to-resolve-meta-data-issues-in-react-spa-with-server-side-rendering-firebase-cloud-functions-7e5549690820

But I can't use SSR @heyalizaid

Hat52 avatar Dec 28 '23 18:12 Hat52