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

Ciantic · 2020-03-12T14:17:38Z

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

The text was updated successfully, but these errors were encountered:

pieh · 2020-03-12T16:40:03Z

Do you have any "sources" about facebook skipping trying to extract og tags if they are not early enough?

I'm not sure but ordering of this stuff shouldn't matter as long as it's there.

pieh · 2020-03-12T16:43:04Z

In https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element I don't see any notion about ordering. Only ordering restrictions relate to charset meta - https://html.spec.whatwg.org/multipage/semantics.html#charset :

The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.

pieh · 2020-03-12T16:44:06Z

So if facebook don't pick up those tags if they are later on in - it seems like it's facebook that doesn't follow spec?

Ciantic · 2020-03-12T17:15:44Z

No I don't have sources, this is a few years ago, I had the problem in entirely different stack. I watched the FB bot crawling and downloading only n-amount of bytes from the top, and if the og tags was not there it didn't parse them.

I also have Content-Security-Policy, and it's odd if it comes after the style files.

Ciantic · 2020-03-13T11:01:00Z

I gave the workaround in my main post already. If this is not actionable at the moment I will close this.

ttstauss · 2020-04-24T06:33:00Z

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

Dres90 · 2020-05-29T20:29:52Z

Thank you @ttstauss your fix worked perfectly.
This is an issue with whatsapp link sharing as well and other platforms that render previews. Hopefully it will be addressed in the main Gatsby release.

Ciantic · 2020-05-30T21:22:28Z

If this issue exists, then I will reopen this.

I think that Gatsby should handle the good ordering by default, and these hacks are just adding noise to us all trying to maintain configurations which should be in Gatsby itself.

jun-gh · 2020-06-02T18:07:22Z

What's the directory of gatsby-ssr.js?

ttstauss · 2020-06-02T18:09:46Z

What's the directory of gatsby-ssr.js?

@jun-gh, gatsby-ssr.js goes in the root of your project (https://www.gatsbyjs.org/docs/ssr-apis/)

jun-gh · 2020-06-02T19:18:11Z

What's the directory of gatsby-ssr.js?

@jun-gh, gatsby-ssr.js goes in the root of your project (https://www.gatsbyjs.org/docs/ssr-apis/)

I tried adding this on my root directory, but still Helmet tags are still under several style tags.

github-actions · 2020-06-23T00:07:57Z

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

Ciantic · 2020-06-23T10:46:29Z

I don't have means to add labels. I wish one could just give reaction to that bot to not close it. Short of that, I have to comment.

LekoArts · 2020-06-23T12:08:16Z

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.

Ciantic · 2020-06-23T12:53:25Z

I closed this, since that's what the bot would have done, if this is not actionable.

I would have thought that if the default gives a broken behavior as commented by others, it would be a bug. But others bug is someone's feature as the saying goes.

Edit: How can you read mr. @ttstauss and @Dres90 comments as anything else than a bug? The default behavior leads to OG meta tags not being identified correctly, isn't that a bug?

nhc · 2020-06-29T11:58:18Z

For the record I also had to implement this fix and I think ordering of head elements should be a feature. I want that level of control right out of the plugin

EricEisaman · 2020-06-30T13:36:44Z

Thank you @ttstauss . Your fix worked for me.

OWMC · 2020-07-03T09:17:36Z

one that this should be a feature. @ttstauss 's fix worked for me.

BagchiMB · 2020-07-07T22:11:15Z

@jun-gh I am also facing the same problem meta tags are still below the style tags, did you got a workaroud ?

evanmrose · 2020-07-08T00:30:27Z

Also facing this issue

jun-gh · 2020-07-08T06:55:52Z

No luck. I'm trying the prerender.io . I'll update if it works. Martin I. Abanes miabanes@gmail.com

…

On Wed, Jul 8, 2020 at 8:30 AM Evan Rose ***@***.***> wrote: Also facing this issue — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22206 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHI2Y5ZTZAEQXR4D5II7OTDR2O43DANCNFSM4LGNKWOQ> .

graysonhicks · 2021-11-19T03:08:07Z

Also, not entirely sure how onPreRenderHTML and onRenderBody work together and if this sorting can just be done in one, or should be done the same in both.

@KyleAMathews Any thoughts?

KyleAMathews · 2021-11-19T05:45:21Z

Gatsby renders the surrounding html separately from the body hence the two apis.

…

On Thu, Nov 18, 2021, 7:08 PM Grayson Hicks ***@***.***> wrote: Also, not entirely sure how onPreRenderHTML and onRenderBody work together and if this sorting can just be done in one, or should be done the same in both. @KyleAMathews <https://github.com/KyleAMathews> Any thoughts? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#22206 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAARLB4DGSGDOUONAJVJ2EDUMW5SHANCNFSM4LGNKWOQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

graysonhicks · 2021-11-19T14:32:24Z

Okay, so should they both use the same ordering mechanism or does it matter?

sandren · 2021-11-19T17:06:03Z

It essentially does the grouping you mention above in onPreRenderHTML. One thing I noticed and am not sure of is that several meta tags, namely charset, viewport don't ever show up in the array of head components, so I believe they are inserted by default at the top in html.js. I've tested this locally and the logging looks correct, but for some reason gatsby-dev-cli is complaining about running npm run serve so I will install the fork in the repo and test that way.

It looks like the tags present in html.js are already in the correct sequence (http-equiv is in the right spot for sites supporting IE). So as long as props.headComponents is sorted then the complete <head> should be in the correct sequence as well. 😀

KyleAMathews · 2021-11-19T19:16:53Z

Okay, so should they both use the same ordering mechanism or does it matter?

The body is literally just for the html body so there's no meta, etc tags there.

graysonhicks · 2021-12-03T16:06:56Z

Does anyone have a repo that I can use to reproduce this? Even if you've implemented one of the workarounds above, I am trying to test a fix in the framework itself. Let me know, thanks!

m99coder · 2021-12-03T16:15:29Z

My issue is that https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image interferes with this solution #22206 (comment) as it also uses setHeadComponents, I guess.

graysonhicks · 2021-12-03T16:24:49Z

@m99coder I believe the solution I am working on will always take place within the framework, after react-helmet.

graysonhicks · 2021-12-03T19:26:08Z

I think I was able to reproduce it here: https://github.com/graysonhicks/head-tags-test

Steps

git clone git@github.com:graysonhicks/head-tags-test.git
cd head-tags-test
nvm use (or use Node 14 however you do)
npm install
gatsby build
gatsby serve
http://localhost:9000
Open DevTools

Expected Result

All meta tags at the top of the head

Actual Result

Some meta tags stuck at the bottom/in the middle

I arbitrarily added as many head tags as I could 😅 (styles, links to page-data.json, gatsby-image, lots of og/twitter tags, etc.). See screenshot here to see tags added by Helmet coming up below the other meta tags with links in between. Going to test next with the change in framework to see if it resolves.

cc: @KyleAMathews

m99coder · 2021-12-03T20:00:15Z

@graysonhicks That’s exactly what also happens in my case. If you wanna have a look at a “live” site: https://woodist.de. Can’t share the source, though.

leandroboari · 2021-12-16T12:02:10Z

The problem is critical and no solution worked for my site.

graysonhicks · 2021-12-16T15:06:01Z

@leandroboari I have an approved PR here #34030 . Just need to get it merged and released 👍

alejandrozeppelinlabs · 2022-01-19T18:44:58Z

This update solved the order of the tag in general pages. Dynamically generated pages with createPages still have the problem though

graysonhicks · 2022-01-19T19:30:12Z

@alejandrozeppelinlabs Hm, I think the file this changed is called the same regardless of whether a page is creating with File System API, pages folder, or createPages. Is that correct @KyleAMathews ?

KyleAMathews · 2022-01-19T19:50:57Z

Yeah this fixes applies to all pages regardless of how it's created.

alejandrozeppelinlabs · 2022-01-19T20:23:44Z

mmm don't know what might be happening. This is the site as soon as you enter to any page inside https://zeppelinlabs.io/news/ the meta tags are mixed up. Thought it could be createPages because the difference between the news pages and the other ones is that. But I understand that it has to be something different might be happening

graysonhicks · 2022-01-19T21:48:37Z

@alejandrozeppelinlabs They look messed up after hydration, but I believe they are correct on the initial server response when is what a crawler will see:

<!DOCTYPE html>
<html>
    <head>
        <meta charSet="utf-8"/>
        <meta http-equiv="x-ua-compatible" content="ie=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <meta name="theme-color" content="#000000"/>
        <meta name="generator" content="Gatsby 4.5.4"/>
        <style data-href="/styles.b2d4aa3d09e5981af362.css" data-identity="gatsby-global-css">
            a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
                border: 0;
                border-radius: 0;
                font-family: inherit;
                font-size: inherit;
                font-style: inherit;
                font-weight: inherit;
                margin: 0;
                padding: 0
            }

        </style>
        <noscript>
            <style>
                .gatsby-image-wrapper noscript [data-main-image] {
                    opacity: 1!important
                }

                .gatsby-image-wrapper [data-placeholder-image] {
                    opacity: 0!important
                }
            </style>
        </noscript>
        <script type="module">
            const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){if(void 0===e.target.dataset.mainImage)return;if(void 0===e.target.dataset.gatsbyImageSsr)return;const t=e.target;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);
        </script>
        <title data-react-helmet="true"></title>
        <style data-styled="" data-styled-version="5.3.3">
            .gtLFoc {
                position: fixed;
                width: 100%;
                background-color: rgba(255,255,255,0.90);
                z-index: 3;
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
                -webkit-transition: background-color 0.5s;
                transition: background-color 0.5s;
            }
        </style>
        <link rel="icon" href="/favicon-32x32.png?v=9d13790161d26d017c128162fce262c8" type="image/png"/>
        <link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/>
        <link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=9d13790161d26d017c128162fce262c8"/>
        <link rel="preconnect" href="https://static.cdn.prismic.io"/>
        <link rel="dns-prefetch" href="https://static.cdn.prismic.io"/>
        <script>
            (function(w, d, s, l, i) {
                w[l] = w[l] || [];
                w[l].push({
                    'gtm.start': new Date().getTime(),
                    event: 'gtm.js'
                });
                var f = d.getElementsByTagName(s)[0]
                  , j = d.createElement(s)
                  , dl = l != 'dataLayer' ? '&l=' + l : '';
                j.async = true;
                j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl + '';
                f.parentNode.insertBefore(j, f);
            }
            )(window, document, 'script', 'dataLayer', 'GTM-N5PTRNT');
        </script>
        <link as="script" rel="preload" href="/webpack-runtime-c14352f5ae5c0beb3857.js"/>
        <link as="script" rel="preload" href="/framework-2d2fb147127452866d1a.js"/>
        <link as="script" rel="preload" href="/0a301732-48832a08591c661cd328.js"/>
        <link as="script" rel="preload" href="/app-476c5efbe67ebd2b6003.js"/>
        <link as="script" rel="preload" href="/commons-d2d73ce37fff1c813fcd.js"/>
        <link as="script" rel="preload" href="/7c9dd5ea1259f541a4abddcb03027eda9ef143f4-772b91a964e1e2a405b1.js"/>
        <link as="script" rel="preload" href="/e2ba3d7aaf288b951f738f679c2bf051b19f766c-7de5a5a76aa238ccbfe3.js"/>
        <link as="script" rel="preload" href="/e595614a484120394b08b73cfd724ad044ffe890-a9056180643f6004f079.js"/>
        <link as="script" rel="preload" href="/component---src-templates-article-template-tsx-014aeba6db0eee146a63.js"/>
        <link as="fetch" rel="preload" href="/page-data/news/we-are-hiring-ui-devs/page-data.json" crossorigin="anonymous"/>
        <link as="fetch" rel="preload" href="/page-data/app-data.json" crossorigin="anonymous"/>
    </head>
    <body>
        <noscript>
            <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N5PTRNT" height="0" width="0" style="display: none; visibility: hidden" aria-hidden="true"></iframe>
        </noscript>
        <div id="___gatsby">
            <div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper">
                <section class="preloader">
                    <p class="preloader__text">
                        Design<mark class="preloader__dot">.</mark>
                        <br/>
                        Creativity<mark class="preloader__dot">.</mark>
                        <br/>
                        Engineering<mark class="preloader__dot">.</mark>
                    </p>
                    <p class="preloader__number">0%</p>
                </section>
                <div class="InterPreloader__InterPreloaderWrapper-sc-11zkrel-0 hSvdRB">
                    <div class="curtain"></div>
                </div>
            </div>
            <div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div>
        </div>
        <script src="https://static.cdn.prismic.io/prismic.js?repo=zeppelinlabs-website&amp;new=true" defer=""></script>
        <script id="gatsby-script-loader">
            /*<![CDATA[*/
            window.pagePath = "/news/we-are-hiring-ui-devs";
            window.___webpackCompilationHash = "7d63c684317a7f10617d";
            /*]]>*/
        </script>
        <script id="gatsby-chunk-mapping">
            /*<![CDATA[*/
            window.___chunkMapping = {
                "polyfill": ["/polyfill-6e67cab801f04f24652f.js"],
                "app": ["/app-476c5efbe67ebd2b6003.js"],
                "component---src-pages-404-tsx": ["/component---src-pages-404-tsx-ef89cbfbe04acb9d6fbb.js"],
                "component---src-pages-about-tsx": ["/component---src-pages-about-tsx-a03ab99e0d36ab39414f.js"],
                "component---src-pages-approach-tsx": ["/component---src-pages-approach-tsx-3e5eefc4b3f61e36880b.js"],
                "component---src-pages-contact-tsx": ["/component---src-pages-contact-tsx-b6e21d122292014b3bad.js"],
                "component---src-pages-index-tsx": ["/component---src-pages-index-tsx-3e7f6d2ccc9dd569deaf.js"],
                "component---src-pages-news-tsx": ["/component---src-pages-news-tsx-3ea9d9983d9b7b9dad5e.js"],
                "component---src-pages-partners-tsx": ["/component---src-pages-partners-tsx-401c997c514f2c2a752d.js"],
                "component---src-pages-services-tsx": ["/component---src-pages-services-tsx-86fa4ded043cd821d934.js"],
                "component---src-templates-article-template-tsx": ["/component---src-templates-article-template-tsx-014aeba6db0eee146a63.js"]
            };
            /*]]>*/
        </script>
        <script src="/polyfill-6e67cab801f04f24652f.js" nomodule=""></script>
        <script src="/component---src-templates-article-template-tsx-014aeba6db0eee146a63.js" async=""></script>
        <script src="/e595614a484120394b08b73cfd724ad044ffe890-a9056180643f6004f079.js" async=""></script>
        <script src="/e2ba3d7aaf288b951f738f679c2bf051b19f766c-7de5a5a76aa238ccbfe3.js" async=""></script>
        <script src="/7c9dd5ea1259f541a4abddcb03027eda9ef143f4-772b91a964e1e2a405b1.js" async=""></script>
        <script src="/commons-d2d73ce37fff1c813fcd.js" async=""></script>
        <script src="/app-476c5efbe67ebd2b6003.js" async=""></script>
        <script src="/0a301732-48832a08591c661cd328.js" async=""></script>
        <script src="/framework-2d2fb147127452866d1a.js" async=""></script>
        <script src="/webpack-runtime-c14352f5ae5c0beb3857.js" async=""></script>
    </body>
</html>

Note I removed a lot of HTML and CSS that wasn't relevant to make the response somewhat smaller.

Most importantly, meta tags are all first.

stefan1968 · 2022-01-25T19:44:15Z

The above fix doesn't work with created pages.

https://developers.facebook.com/tools/debug/

Confirms this, it does seem to have fixed it on general pages

oscmimax2 · 2022-01-27T02:22:13Z

Struggling on why headComponents.sort has no effect ( or not being run)? The gatsby-ssr.js is under src directory.

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.type && x.type === 'meta') {
        return -1;
    }
    return 0;
  })
  replaceHeadComponents(headComponents)
}

m99coder · 2022-01-27T08:39:43Z

@stefan1968 I have dozens of dynamically created pages and all of them now have the correct order of <meta> tags. I assume there is something else wrong on your side – as it was for me for a couple of weeks before I found my human error 😉

@oscmimax2 I also had this snippet in my gatsby-ssr.js before. I removed it, as this is now part of the core library and you don’t need to implement it anymore on your own.

oscmimax2 · 2022-01-28T06:44:22Z

@m99coder I need to use the snippet because the system was implemented in 3.3. I am still figuring out why the gatsby-ssr.js 's onPreRenderHTML() doesn't come into effect. Also, is the effect not for development mode?

graysonhicks · 2022-01-28T18:07:47Z

The fix was backported to v3, but you need the latest for v3. This doesn't affect development mode, because the meta tags don't matter in development.

oscmimax2 · 2022-01-28T20:06:36Z

@graysonhicks gatsby@3.14.6 is running here. I can still see tons of style and script above my meta tags. Is there anywhere I can check to make sure "meta tag upfloating" comes into effect? (using gatsby-plugin-react-helmet@4.14.0) Thanks.

graysonhicks · 2022-01-29T17:00:48Z

@oscmimax2 Are you looking at the original network request or just the DOM in the browser?

oscmimax2 · 2022-01-29T19:27:23Z

@graysonhicks It was the DOM (= "Elements" view in chrome ) . Thanks :)
and FB debugger couldn't pick up the og tags

dsmitchell · 2022-02-06T02:28:11Z

Not sure how I can help, but I'm experiencing an issue as well with the Apple Smart Banner capability:

https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners

My custom meta tag is appearing after "link" (which imports styles). Would love to get my meta tag ahead of that to see if Apple somehow reads my meta tag and displays the proper banner.

And while we're at it, maybe it belongs before the "title" tag too...

LekoArts · 2022-02-07T12:26:29Z

I'm locking this issue as resolved as the issue was fixed. If you have further questions, please open a GitHub discussion: https://github.com/gatsbyjs/gatsby/discussions/categories/help

Ciantic added the type: bug An issue or pull request relating to a bug in Gatsby label Mar 12, 2020

Ciantic closed this as completed Mar 13, 2020

pieh mentioned this issue Apr 9, 2020

Facebook Share not picking up OpenGraph meta tags from Gatsby site via React Helmet. #22908

Closed

Ciantic reopened this May 30, 2020

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Jun 23, 2020

github-actions bot removed the stale? Issue that may be closed soon due to the original author not responding any more. label Jun 23, 2020

LekoArts added type: feature or enhancement Issue that is not a bug and requests the addition of a new feature or enhancement. and removed type: bug An issue or pull request relating to a bug in Gatsby labels Jun 23, 2020

Ciantic closed this as completed Jun 23, 2020

KyleAMathews closed this as completed in #34030 Dec 17, 2021

LekoArts removed the not stale label Jan 10, 2022

gatsbyjs locked as resolved and limited conversation to collaborators Feb 7, 2022

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

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

Comments

Ciantic commented Mar 12, 2020

Description

Steps to reproduce

Expected result

Workaround

pieh commented Mar 12, 2020

pieh commented Mar 12, 2020

pieh commented Mar 12, 2020

Ciantic commented Mar 12, 2020 • edited

Ciantic commented Mar 13, 2020

ttstauss commented Apr 24, 2020 • edited

Dres90 commented May 29, 2020

Ciantic commented May 30, 2020 • edited

jun-gh commented Jun 2, 2020

ttstauss commented Jun 2, 2020

jun-gh commented Jun 2, 2020

github-actions bot commented Jun 23, 2020

Ciantic commented Jun 23, 2020 • edited

LekoArts commented Jun 23, 2020

Ciantic commented Jun 23, 2020 • edited

nhc commented Jun 29, 2020

EricEisaman commented Jun 30, 2020

OWMC commented Jul 3, 2020

BagchiMB commented Jul 7, 2020

evanmrose commented Jul 8, 2020

jun-gh commented Jul 8, 2020 via email

graysonhicks commented Nov 19, 2021

KyleAMathews commented Nov 19, 2021 via email

graysonhicks commented Nov 19, 2021

sandren commented Nov 19, 2021 • edited

KyleAMathews commented Nov 19, 2021

graysonhicks commented Dec 3, 2021

m99coder commented Dec 3, 2021

graysonhicks commented Dec 3, 2021

graysonhicks commented Dec 3, 2021 • edited

Steps

Expected Result

Actual Result

m99coder commented Dec 3, 2021

leandroboari commented Dec 16, 2021 • edited

graysonhicks commented Dec 16, 2021

alejandrozeppelinlabs commented Jan 19, 2022

graysonhicks commented Jan 19, 2022

KyleAMathews commented Jan 19, 2022

alejandrozeppelinlabs commented Jan 19, 2022

graysonhicks commented Jan 19, 2022 • edited

stefan1968 commented Jan 25, 2022

oscmimax2 commented Jan 27, 2022

m99coder commented Jan 27, 2022

oscmimax2 commented Jan 28, 2022 • edited

graysonhicks commented Jan 28, 2022

oscmimax2 commented Jan 28, 2022 • edited

graysonhicks commented Jan 29, 2022

oscmimax2 commented Jan 29, 2022 • edited

dsmitchell commented Feb 6, 2022 • edited

LekoArts commented Feb 7, 2022

Ciantic commented Mar 12, 2020 •

edited

ttstauss commented Apr 24, 2020 •

edited

Ciantic commented May 30, 2020 •

edited

Ciantic commented Jun 23, 2020 •

edited

Ciantic commented Jun 23, 2020 •

edited

sandren commented Nov 19, 2021 •

edited

graysonhicks commented Dec 3, 2021 •

edited

leandroboari commented Dec 16, 2021 •

edited

graysonhicks commented Jan 19, 2022 •

edited

oscmimax2 commented Jan 28, 2022 •

edited

oscmimax2 commented Jan 28, 2022 •

edited

oscmimax2 commented Jan 29, 2022 •

edited

dsmitchell commented Feb 6, 2022 •

edited