React Helmet not updating meta tags
Question
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:)
3 answers
solution1
1 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);
solution2
0 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 :)
solution3
0 2023-01-12 06:49:35
For use React-Helmet meta tags, you should add meta tag in public/index.html first.
<html lang="en">
<head>
...
<meta
name="description"
content="Create personalized beer labels for you or your company; for parties, weddings and more! Do you need stylish, self-designed brands with your own message. Our custom beer or wine labels are durable and waterproof."
>
<meta
name="keywords"
content="beer label, wine label, cider label, jam label, create your own, order labels online, home brewer, label your beer batches, stickers, label, decal, wine labels, jam labels, word template, free shipping, brewed beer, custom labels"
>
...
</head>
it worked for me. Please make sure you write meta tag on index.html in public folder in your project.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.