Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

gatsby-plugin-react-helmet orders the components too late in <head>

See original GitHub issue

Description

When I use gatsby-plugin-react-helmet I notice that the <Helmet /> components come way too late in the head tag. I have noticed that on occasion for instance Facebook does not always parse the og tags if they come too late in the head.

Steps to reproduce

Just use <Helmet />, and notice in the static output files there is a lot of CSS related stuff etc. above the helmet tag in the <head>.

Expected result

Helmet tags should be prioritised when doing the <head /> tag.

Workaround

Currently there is easy workaround, but I consider that gatsby’s default is broken. We should not need workaround for this.

gatsby-ssr.js

var React = require("react");

// Hack, to reorder the helmet components as first in <head> tag
exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
    /**
     * @type {any[]} headComponents
     */
    const headComponents = getHeadComponents();

    headComponents.sort((a, b) => {
        if (a.props && a.props["data-react-helmet"]) {
            return 0;
        }
        return 1;
    });
    replaceHeadComponents(headComponents);
};

Issue Analytics

State:
Created 4 years ago
Reactions:26
Comments:122 (15 by maintainers)

Top GitHub Comments

34reactions

ttstausscommented, Jun 2, 2020

I ran into the same issue. I tried checking the meta/og tags via several tools (e.g. Open Graph Check, Meta Tags, and Social Share Preview) and none of them were able to pick them up.

Once I mad a tweak similar to @Ciantic’s I was able to retrieve them successfully.

I beleive this was mainly caused by a rather large style tag being placed before the meta tags.

My solution requried a bit more to get it working. I had to implement the following in my gatsby-ssr.js (you may be able to get away with just using the onRenderbody api, but I used the onPreRenderHTML api as well to move them completely to the top):

const React = require("react")
const { Helmet } = require("react-helmet")

exports.onRenderBody = (
  { setHeadComponents, setHtmlAttributes, setBodyAttributes },
  pluginOptions
) => {
  const helmet = Helmet.renderStatic()
  setHtmlAttributes(helmet.htmlAttributes.toComponent())
  setBodyAttributes(helmet.bodyAttributes.toComponent())
  setHeadComponents([
    helmet.title.toComponent(),
    helmet.link.toComponent(),
    helmet.meta.toComponent(),
    helmet.noscript.toComponent(),
    helmet.script.toComponent(),
    helmet.style.toComponent(),
  ])
}

exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents()

  headComponents.sort((x, y) => {
    if (x.props && x.props["data-react-helmet"]) {
      return -1
    } else if (y.props && y.props["data-react-helmet"]) {
      return 1
    }
    return 0
  })

  replaceHeadComponents(headComponents)
}

11reactions

LekoArtscommented, Jun 23, 2020

We are happy to review a PR changing the behavior of gatsby-plugin-react-helmet however we won’t work on this and thus the bot asking for activity is correct. We don’t consider this being broken but a feature request.