Tag manager duplicate meta tags in next/head #17020

jaybytez · 2020-09-11T14:24:20Z

jaybytez
Sep 11, 2020

We have a Layout component that all Page Components use. This Layout component has all the meta tags that are populated from an API call. Within that Layout, we have css/js script/link tags including our Tag Manager (which has to be loaded synchronously and right after the meta-tags). We are finding that we have meta-tags being rebuilt when the page loads in the browser, causing duplicate meta-tags. When we remove the TMS, the duplicate tags go away. If we switch the order of the TMS to a lower part of the load, duplicates go away but then it is too low in the order for some scripts to work properly like A/B testing tools. Any thoughts on how to resolve this?

Answered by jaybytez

Sep 14, 2020

@jamesmosier After some testing, it appears that issue is not our Tag Manager, it is just our Tag Manager exposes the issue. The Tag Manager runs sync in the Head and adds script (configured into the tool) to the Head, when it does this, it causes the React/Head to regenerate meta tags.

We replicated it by removing the Tag Manager and adding a local script to the Head that basically does this:

var a = document.createElement('meta');
a.setAttribute('name', 'jay');
a.setAttribute('content', 'jay');
console.log(document.head);
console.log("this script is firing");
document.head.append(a);

var a = document.createElement('meta');
a.setAttribute('name', 'jay');
a.setAttribute('content', 'jay')…

View full answer

jamesmosier · 2020-09-11T14:37:30Z

jamesmosier
Sep 11, 2020

Hi @jaybytez. You may want to look at adding a key property:

To avoid duplicate tags in your head you can use the key property, which will make sure the tag is only rendered once, as in the following example:

      <Head>
        <meta property="og:title" content="My page title" key="title" />
      </Head>

1 reply

jaybytez Sep 11, 2020
Author

@jamesmosier, thank you so much. We are using the key property on all the meta property fields.

We only have the Head in one location in our Layout component that all pages use.

We have been following the chat on: #9794.

Not sure if our TMS is causing an issue that makes an event happen where the meta-tags rebuild.

jaybytez · 2020-09-14T15:57:53Z

jaybytez
Sep 14, 2020
Author

@jamesmosier After some testing, it appears that issue is not our Tag Manager, it is just our Tag Manager exposes the issue. The Tag Manager runs sync in the Head and adds script (configured into the tool) to the Head, when it does this, it causes the React/Head to regenerate meta tags.

We replicated it by removing the Tag Manager and adding a local script to the Head that basically does this:

var a = document.createElement('meta');
a.setAttribute('name', 'jay');
a.setAttribute('content', 'jay');
console.log(document.head);
console.log("this script is firing");
document.head.append(a);

var a = document.createElement('meta');
a.setAttribute('name', 'jay');
a.setAttribute('content', 'jay');
console.log(document.head);
console.log("this script is firing");
document.head.append(a);

var a = document.createElement('meta');
a.setAttribute('name', 'jay');
a.setAttribute('content', 'jay');
console.log(document.head);
console.log("this script is firing");
document.head.append(a);

Each time we add an element to the Head, another meta tag is duplicated into the HTML. The more document.head.append actions, the more meta-tags are being duplicated.

3 replies

jaybytez Sep 14, 2020
Author

I created a bug and was able to reproduce the issue - #17085

jaybytez Sep 17, 2020
Author

We were able to resolve with the new canary version 20 and believe it was part of the next head count fix.
However we are having another issue with the new canary that meta-tags are disbursed in different parts of the Head. I will try and see if I can reproduce in a Next.js example project.

stephent Jan 15, 2021

I was seeing the same issue in next 10.0.5, despite using key throughout. The resolution was to move the <meta> tags out of _document.js and into my Layout component.

KingMatrix1989 · 2022-04-04T11:36:37Z

KingMatrix1989
Apr 4, 2022

Google Tag Manager snippet code was inserted in my case at the end of other meta tags, which caused the same problem.
The problem was solved after moving GTM snippet code to the top of meta tags.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tag manager duplicate meta tags in next/head #17020

{{title}}

Replies: 3 comments 4 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Tag manager duplicate meta tags in next/head #17020

jaybytez Sep 11, 2020

Replies: 3 comments · 4 replies

jamesmosier Sep 11, 2020

jaybytez Sep 11, 2020 Author

jaybytez Sep 14, 2020 Author

jaybytez Sep 14, 2020 Author

jaybytez Sep 17, 2020 Author

stephent Jan 15, 2021

KingMatrix1989 Apr 4, 2022

jaybytez
Sep 11, 2020

Replies: 3 comments 4 replies

jamesmosier
Sep 11, 2020

jaybytez Sep 11, 2020
Author

jaybytez
Sep 14, 2020
Author

jaybytez Sep 14, 2020
Author

jaybytez Sep 17, 2020
Author

KingMatrix1989
Apr 4, 2022