React js change meta tags dynamically

Question

I have two flow of my application one is user side the other is admin side. My user side is responsive so i want meta tag to say <meta name="viewport" content="width=device-width, initial-scale=1" /> and my admin side is not responsive so i want to enforce browser to open in desktop mode which requires this meta tag to be like this <meta name="viewport" content="width=1024" />

I am using react-document-meta with the following objects

const metaUser = {
  title: "User meta tags",
  description: "Basically make the application responsive when on user side",
  meta: {
    name: { keywords: "viewport" },
    content: "width=device-width, initial-scale=1",
  },
};
const metaAdmin = {
  title: "Admin meta tags",
  description: "Make the application default in desktop mode",
  meta: {
    name: { keywords: "viewport" },
    content: "width=1024",
  },
};

but it creates new meta on the head tag and those tags doesn't work

Lichfield

Will it be okay to use another package or do you want to get it done by using react-documet-meta package only? – Disremember

Seems it has split the name and data into two metas. react-helmet is the better alternative => npmjs.com/package/react-helmet – Credendum

Yeah i think ill opt for react-helmet lets see if that works – Lichfield

Answer 1

I suggest using react-helmet.

You can install it using the npm command: npm i react-helmet

And then import in in your component/page:

import {Helmet} from "react-helmet";

And use all your tags inside the Helmet component, which you would put inside the regular head tag in html, with the syntax of jsx

    <Helmet>
        <title>{`${admin ? "Admin Title" : "Client Title"}`}</title>
        <meta name="description" content={`${admin ? "Admin Content" : "Client Content"}`} />
    </Helmet>

Disremember

dude you're awesome. I can also use this library now to change title on my application thank you so much – Lichfield

I tried helmet but the tags we are adding from helmet are not fetching in search engine as well as fb and it is adding an attribute data helmet attribute true which is breaking the SEO boats – Bangka

@Vipuljain I have the same issue — the tags are being updated dynamically, but are not being used by search engines, social media, etc. I assume this is because I don't have server side rendering on my app(?) If you have any additional information on this please share : ) – Pyles

@WaldoFrank same issue. I spent yesterday moving from nginx to expressjs. I'm thinking about doing something like blog.logrocket.com/…, where I dynamically add the meta tags myself before serving index.html and before the React App even loads. Not sure what choice I have. – Bachelor

I've had this same problem - react helmet does update the meta tags but after the initial render, and since most crawlers don't execute js, they only see the default meta tags from my index.html file. Short of re-platforming to something like next.js to move to SSR, I'm without a solution for this. – Arjuna