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.

Duplicate meta tags when using Head both in custom document and page

See original GitHub issue

Bug report

Edit +++ ON HOLD I just had a lightbulb moment. I will post my discovery/misunderstanding in the next few hours. This ticket can probably be closed then, but I have to test my new theory first…

Describe the bug

Multiple (duplicate) meta tags such as charSet and viewport are rendered in <head> section of the HTML output when the <Head> component is used in both a custom _document and a page file.

Even relying on the default injection of <meta charSet="utf-8"/> (i.e. not specifying that tag at all) results in having two of the same tags in the output HTML, one from Document and one from the page.

I also end up with two viewport meta tags, one from Document and one from the page.

To Reproduce

I have created (failing) tests here: https://github.com/Manc/next.js/tree/test-head-document

Clone repository git@github.com:Manc/next.js.git
Check out branch test-head-document
yarn install
yarn testonly --testPathPattern "app-document" -t "It dedupes head tags with the same key"

Expected behavior

I expect the meta tags with the same key to override the meta tags from the custom Document (_document).

I expect only to have one charset and one viewport tag in the whole rendered HTML.

System information

OS: macOS
Version of Next.js: latest or canary branch

Other

I’m pretty new to Next.js and don’t really know how it all works yet. I hope the test I provided helps somebody more experienced to fix this or maybe give me a hint. Thanks!

My suspicion is that the Head component of the Document (import { Head } from 'next/document') and the Head component used in the page (import Head from 'next/head') might be completely separate and don’t “communicate” with each other, each doing their own thing twice.

Issue Analytics

State:
Created 4 years ago
Reactions:5
Comments:36 (10 by maintainers)

Top GitHub Comments

18reactions

hk86commented, Jun 2, 2020

I have the same issue. I set my meta viewport in _document.js. Still a second meta viewport is added:

<meta name="viewport" content="width=device-width"/>

I do not set it myself.

14reactions

rscharfercommented, Mar 30, 2020

I think this is still a problem. We have to have some things in our document.js <Head> which will “push down” all other tags in the <head>. The result is that the charSet meta is too far down the document according to things like W3 validator. There is no solution for this currently. As we have seen, putting the meta on top of the mandatory scripts in document.js is not a solution.