Adding elements to the next/head causes meta-tags to be replicated/duplicated #17085

jaybytez · 2020-09-14T18:32:32Z

Bug report

Describe the bug

We have a Layout component that we use the next/head to build out our meta-tags as well as include our css/scripts.

When we include our Tag Manager, it exposed an issue when the Tag Manager injects scripts onto the page, we are seeing meta-tags get duplicated in the view source. When we remove the Tag Manager, the duplicated meta-tags go away.

We realized that the Tag Manager is adding scripts to the head, and when it does this, it appears to tells next/head to

#17020
#9794

To test this out, we checked out the head-elements example, added a custom JS file that the only thing it does within it is create some elements that it adds to the head. And when the adds happen, meta-tags get duplicated. Not all of the tags get duplicated, just the number of tags about = to the number of head adds our script does.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

https://github.com/jaybytez/head-elements

When running this application and view the Inspector (Firefox) or Elements (Chrome), you can see that meta-tags have been duplicated (charset, viewport, author). The number of tags duplicated is relative to how many add to head calls are made in the script.

Expected behavior

I would expect that adding scripts/elements to the head would not cause meta-tags to be recreated/duplicated.

Screenshots

System information

OS: [e.g. macOS, Windows]
Browser (if applies) [e.g. chrome, safari]
Version of Next.js: [e.g. 6.0.2]
Version of Node.js: [e.g. 10.10.0]

Additional context

It is weird that the meta-tags are duplicated based on an n-1 elements added to the head. So if I make 4 add head calls (like in this example), only 3 meta-tags are duplicated. If I do 3 head calls, then 2 are duplicated.

Also, the view source appears to not have duplicates (I just noticed), but the Inspector/Elements shows the duplicates.

timneutkens · 2020-09-15T10:51:44Z

Can you try next@canary, the head injection/removal was refactored to work in a different way.

jaybytez · 2020-09-15T15:16:26Z

@timneutkens, upgrading to the next@canary did resolve the duplicate meta-data issue within the head-elements project. We need to update our project for the webpack 5 pieces, but yes, this is great. It does resolve the duplicate issue.

timneutkens · 2020-09-15T15:46:15Z

Great so this was fixed in #16758 and this issue can be closed.

jaybytez · 2020-09-16T22:38:45Z

Duplication issue is resolved, will close.

krikork · 2020-12-27T04:57:09Z

Still busted in next 10.0.3

benwwalker · 2021-03-12T16:11:40Z

Having this issue in 10.0.7 too. I have a component with pagination that dynamically adds canonical/next/prev to the header, but by including <Head> in the component I get duplicate meta charset and meta description tags.

jaybytez · 2021-03-17T15:56:27Z

This issue exists again in versions of 10.0.x.

renedaniel · 2021-03-17T22:51:21Z

i am having the same issue if i use gtm script in next 10.0.9

GalInvesting · 2021-03-18T10:54:09Z

happened to me also

jperezlatimes · 2021-03-23T22:18:11Z

I am experiencing this as well using next 10.0.9. I removed _document.js from my project entirely to eliminate any potential problems with <Head/> from next/document. I'm now only using the <Head/> component from next/head in my page components and I'm still seeing duplication.

Additionally, the behavior changes depending the order of my tags in next/head component. In this scenario, both charset and description meta tags are duplicated:

<Head>
  <meta name="description" content={description}  />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
  <title>{title}</title>
</Head>

Re-arranged with title first, and I only see a duplicate charset tag.

<Head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
</Head>

devdpontes · 2021-03-24T16:01:21Z

To avoid the tags duplication you need to add a key property to the elements, with the same value.
e.g. <meta name="description" content={description} key="description"/>

I do have an issue with meta tags, but related to not rendering with SSR when using next/head. It's always only on the client.

jperezlatimes · 2021-03-24T17:04:48Z

Thankns @devdpontes. That suggestion works for the description tag in scenario 1, but it doesn't explain the re-ordering phenomenon or why I have duplicate charset tags.

nicholaschiang · 2021-03-30T17:50:40Z

I've created this repro using next@10.1.2: https://codesandbox.io/s/laughing-payne-dt1ty?file=/pages/_app.tsx

import { AppProps } from "next/app";
import { GoogleFonts } from "next-google-fonts";
import Head from "next/head";

import "./global.css";

const scriptThatAddsElToHead =
  `var n=document.createElement('script');` +
  `var a=document.getElementsByTagName('script')[0];` +
  `a.parentNode.insertBefore(n,a);`;

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <>
      <h1>Custom App</h1>
      <Head>
        <title>Google Fonts Repro</title>
        <script dangerouslySetInnerHTML={{ __html: scriptThatAddsElToHead }} />
      </Head>
      <GoogleFonts href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" />
      <Component {...pageProps} />
    </>
  );
}

jaybytez · 2021-04-27T16:59:11Z

@timneutkens - this issue was resolved at some point but is a problem in all versions of nextjs 10+. And for us the problem is that there is the i18n issue with trailingSlash redirecting to the default language, this is fixed in a later nextjs 10.x.x version but we can't upgrade because of this issue causing duplicate meta-tags. Is there any ETA if this will be addressed? We are trying to determine if we have to stay on an older version with a hack in our CDN to manage the trailing slash/i18n issue or determine the SEO impacts of having duplicate meta-tags.

jaybytez · 2021-04-28T15:46:59Z

So for others having this issue, we are seeing this primarily on charset and viewport. Not sure if others are seeing different tags?

While our SEO team said this isn't a huge impact, the problem is not having a 100% confidence that this wouldn't happen to impact title or description which would significantly impact SEO if these were duplicated.

devdpontes · 2021-04-29T13:37:03Z

Is the viewport tag exactly the same when duplicated? Because next adds a viewport tag by default, so it might be related to that, when trying to add a custom one.

jaybytez · 2021-04-29T21:29:01Z

@devdpontes, interesting point and I will take a look at that. For us, the problem only manifests itself in an env where we use our Tag Manager. Our lower level environments shows no duplicates, but they show up when the Tag Manager is enabled, its possible because the Tag Manager utilizes doc write for sync integration, potentially this causes a conflict and makes Nextjs fire this off again.

GalInvesting · 2021-06-10T11:06:12Z

is there any solution for this?

stefanonava77 · 2021-06-11T10:08:56Z

any updated on this issue?

georgeck · 2021-06-22T05:58:32Z

I am able to reproduce this in 11.0.0 as well

In _document.js

<head>
 <meta property="og:title" content="foo" key="title" />
</Head>

and in a page

<head>
 <meta property="og:title" content="bar" key="title" />
</Head>

In the rendered page, both these appear

cristicismas · 2022-10-26T10:23:21Z

Hi, any updates or workarounds on this? I'm able to reproduce the same issue in next 12.1.0.

Fredkiss3 · 2022-10-26T13:24:56Z

I don't know where i've seen this, but i've heard that if you add the same key to the <Head /> element everywhere you call it to prevent this.

Something like this :

// In _document.js
<Head key='head'>
 <meta property="og:title" content="foo" key="title" />
</Head>

// In a page
<Head  key='head'>
 <meta property="og:title" content="bar" key="title" />
</Head>

cristicismas · 2022-12-07T09:21:58Z

@Fredkiss3 this didn't work for me, but it looks like the issue has been fixed in NextJS 13.0.0

Enkratia · 2024-09-18T19:44:15Z

Will it be fixed 4 years later? This issue is not resolved: #26534 or happend again.

jaybytez changed the title ~~Adding elements to the next/head causes meta-tags to be replicated (duplicated)~~ Adding elements to the next/head causes meta-tags to be replicated/duplicated Sep 14, 2020

jaybytez closed this as completed Sep 16, 2020

jaybytez mentioned this issue Sep 30, 2020

meta-tags are placed at bottom of the head when hit via client-side link vs top of head through server request #17478

Closed

jaybytez reopened this Mar 17, 2021

joe-bell mentioned this issue Mar 30, 2021

Duplicate preload stylesheet tags joe-bell/next-google-fonts#113

Closed

ghost mentioned this issue Jun 23, 2021

Place 'charset' meta element at the top of <head> #26534

Closed

rcantin-w mentioned this issue Mar 7, 2024

Civic uk: Accept/reject behaviour wellcomecollection/wellcomecollection.org#10685

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding elements to the next/head causes meta-tags to be replicated/duplicated #17085

Adding elements to the next/head causes meta-tags to be replicated/duplicated #17085

jaybytez commented Sep 14, 2020

timneutkens commented Sep 15, 2020

jaybytez commented Sep 15, 2020

timneutkens commented Sep 15, 2020

jaybytez commented Sep 16, 2020

krikork commented Dec 27, 2020

benwwalker commented Mar 12, 2021

jaybytez commented Mar 17, 2021

renedaniel commented Mar 17, 2021

GalInvesting commented Mar 18, 2021

jperezlatimes commented Mar 23, 2021

devdpontes commented Mar 24, 2021

jperezlatimes commented Mar 24, 2021

nicholaschiang commented Mar 30, 2021

jaybytez commented Apr 27, 2021

jaybytez commented Apr 28, 2021

devdpontes commented Apr 29, 2021

jaybytez commented Apr 29, 2021

GalInvesting commented Jun 10, 2021

stefanonava77 commented Jun 11, 2021

georgeck commented Jun 22, 2021 •

edited

Loading

cristicismas commented Oct 26, 2022 •

edited

Loading

Fredkiss3 commented Oct 26, 2022

cristicismas commented Dec 7, 2022

Enkratia commented Sep 18, 2024

Adding elements to the next/head causes meta-tags to be replicated/duplicated #17085

Adding elements to the next/head causes meta-tags to be replicated/duplicated #17085

Comments

jaybytez commented Sep 14, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

timneutkens commented Sep 15, 2020

jaybytez commented Sep 15, 2020

timneutkens commented Sep 15, 2020

jaybytez commented Sep 16, 2020

krikork commented Dec 27, 2020

benwwalker commented Mar 12, 2021

jaybytez commented Mar 17, 2021

renedaniel commented Mar 17, 2021

GalInvesting commented Mar 18, 2021

jperezlatimes commented Mar 23, 2021

devdpontes commented Mar 24, 2021

jperezlatimes commented Mar 24, 2021

nicholaschiang commented Mar 30, 2021

jaybytez commented Apr 27, 2021

jaybytez commented Apr 28, 2021

devdpontes commented Apr 29, 2021

jaybytez commented Apr 29, 2021

GalInvesting commented Jun 10, 2021

stefanonava77 commented Jun 11, 2021

georgeck commented Jun 22, 2021 • edited Loading

cristicismas commented Oct 26, 2022 • edited Loading

Fredkiss3 commented Oct 26, 2022

cristicismas commented Dec 7, 2022

Enkratia commented Sep 18, 2024

georgeck commented Jun 22, 2021 •

edited

Loading

cristicismas commented Oct 26, 2022 •

edited

Loading