close
The Wayback Machine - https://web.archive.org/web/20201208215027/https://github.com/vercel/next.js/discussions/17020
Skip to content
1 2

Tag manager duplicate meta tags in next/head #17020

Answered by jaybytez
jaybytez asked this question in Help
Tag manager duplicate meta tags in next/head #17020
88d ago · 5 answers

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?

Replies

5 comments

0 1

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

jaybytez 88d ago
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.

0 1

@jaybytez jaybytez 85d ago
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.

2 replies
@jaybytez

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

@jaybytez

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.

Answer selected by jaybytez
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🎓
Help
2 participants
Beta
You can’t perform that action at this time.