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?

knada knada · Accepted Answer · 2020-10-07T17:11:14

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)}
    />

insert django tag in react gatbsy helmet

2 Answers