insert django tag in react gatbsy helmet

Question

I have to put a django tag inside the head, so the template will render the dynamic metatags server side.

what I want to do is:

{% block metatags %}

<meta name="description" content="{{ metatags.description }}" />
<meta name="keywords" content="{{ metatags.keywords }}" />
<meta property="og:url" content="{{ metatags.og_url }}" />
<meta property="og:title" content="{{ metatags.og_title }}" />
<meta property="og:description" content="{{ metatags.og_description }}" />
<meta property="og:image" content="{{ metatags.og_image }}" />
<meta property="og:image:url" content="{{ metatags.og_image_url }}" />
<meta property="og:image:type" content="{{ metatags.og_image_type }}" />

{% endblock %}

Now, no problems for the meta tags inside helmet, since it's a accepted element for helmet. The problem is for the {% block metatags %} and {% endblock %}.

The compiled page won't have those two, probably because helmet ignores them. I tried also to put manually {% block metatags %} and {% endblock %} in the compilated page and it works.

I think I cannot achieve this with just helmet, since it will ignore every tag I put inside which are not recognised (script,meta,noscript,..). How could I do that?

The only solution maybe it's call a script after gatsby build and add those manually.. any better solutions?

Answer 1

What you wrote is how you'd do it in Django using django templates. You can't use that syntax in React/Gatsby. How are you accessing your django data in Gatsby?

Assuming you have the site data from your source, In gatsby using react-helmet your code would look like this.

import { Helmet } from "react-helmet"

<Helmet
        meta={[
            {
                name: `description`,
                content: metatags.description,
            },
            {
                name: `keywords`,
                content: metatags.keywords,
            },
            {
                property: `og:url`,
                content: metatags.og_url,
            },
            {
                property: `og:title`,
                content: metatags.og_title,
            },
            {
                property: `og:description`,
                content: metatags.og_description,
            },
            {
                property: `og:image`,
                content: metatags.og_image,
            },
            {
                property: `og:image:url`,
                content: metatags.og_image_url,
            },
            {
                property: `og:image:type`,
                content: metatags.og_image_type,
            },
        ].concat(meta)}
    />

Answer 2

Update:

after thinking about that solution proposed and after realized that was quite horrible, I've decided to use the common and right way, fetch the data remotely and fill Helmet with graphql. Everything worked correctly, the built html now has the correct metatags.

But for the facebook debugger the og props are still missing. It's impossible, since I checked the .html file and they are there, in a correct way. I tried many times to re-fetch again the FB debugger, but still nothing