I can't add React components inside Head

🙋Get Help
1

Hello!

I am trying to load some custom head tags like this:

<meta property="fb:pages" content="788243297878721" />
<meta property="fb:app_id" content="1699940936983049"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Los volantes de la temporada 2019 de FĂłrmula 1"/>
<meta property="og:site_name" content="CompeticiĂłn"/>
<meta property="og:url" content="https://www.diariomotor.com/competicion/noticia/los-volantes-de-la-temporada-2019-de-formula-1/"/>
<meta property="og:image" content="https://www.diariomotor.com/competicion/imagenes/2019/03/volanteferrari2019-mdmc.jpg"/> 
<meta property="og:description" content="La temporada 2019 de Fórmula 1 promete emociones fuertes, con cambios en la normativa, DRS más grande, alerones delanteros más simples y traseros más importantes... pero hay un detalle que siempre"/>

But I found some problems:

  • I can’t create a custom component inside the <head>, only certains components are allowed (event if the custom component returns the allowed component). This force me to apply logic on the main file.
  • If I try to insert the code inside a <> xxxx </> this is not visible on the html.
3

Hello @javier! We use react-helmet for the <Head> component. React helmet only renders supported head tags like meta, title, script and more as seen in the Readme.

That is to say, custom components, fragments and the likes will be ignored by the library.

4

@iamuchejude is right, don’t add React components inside the Head, instead, add the Head to your React components.

Don’t do this:

const MyMeta = () => <meta name="my-meta" content="some content" />;

const MyComponent = () => (
  <Head>
    <MyMeta />
  </Head>
);

Do this:

const MyMeta = () => <Head><meta name="my-meta" content="some content" /></Head>;

const MyComponent = () => (
  <MyMeta />
);

You can add as many <Head> as you want and they can be anywhere in your app, not only at the top.

You can use fragments outside the Head:

const MyMeta1 = () => <Head><meta name="my-meta-1" content="some content" /></Head>;
const MyMeta2 = () => <Head><meta name="my-meta-2" content="some content" /></Head>;

const MyComponent = () => (
  <>
    <MyMeta1 />
    <MyMeta2 />
  </>
);
2 Likes
7

I had a similar confusion as the OP which is why I changed the name of my “head” component to “meta” : https://github.com/jcklpe/desert-jackalope/blob/master/src/components/Meta/index.js

I’m a really shitty developer. Really more of a designer who sticks his nose into code. So I ain’t trying to tell anybody how to do their job because I certainly don’t know how to do it. But I raised this point before, that this was poorly named and was confusing, and… well, I think yeah… it’s confusing. This is poorly named. Ya’ll really should change the name.

Maybe I’m just not enough of a dev to grok why this is a good choice but it seems like a pretty bad choice to me.

Again, I’m also an idiot who doesn’t know what he’s doing and has doing the most basic things with React, so take it with a grain of salt.

1 Like
8

Thanks @thedonquixotic for your feedback. We will definitely look into your suggestion and act accordingly.

10

Thank you! this works perfectly!

1 Like