Duplicate <meta name="viewport"> if the custom one is defined in _document.js #6919

kachkaev · 2019-04-06T14:25:45Z

Bug report

I recently upgraded to the latest canary and noticed horizontal scrolling on some mobile devices. As it turned out, this was caused by #6754 (cc @developit).

Although the default new value of viewport is inserted only when there is no custom one, this logic did not work for me, because my custom viewport tag was in _document.js and not inside <Head />.

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

Moving the tag into <Head /> solved the issue, but it took a while to investigate.

Expected behavior

It'd be great if Next.js searched for <meta name="viewport" content="..." /> inside custom _document.js and either did not insert the default one or asked developers to move their tag into <Head />. WDYT folks?

System information

Version of Next.js: 8.0.5-canary.17

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

tkhg · 2019-04-12T09:45:12Z

same issue on 8.0.4
I was trying to set viewport-fit=cover in the viewport meta tag in _document.js, but it was overridden by the default tag.
I believe it will be a better approach if the viewport meta is already set in _document.js, the default tag shouldn't be added

smackgg · 2019-04-12T13:43:27Z

Anybody see this question？

lisamartin00 · 2019-04-16T17:48:07Z

Our team ran into this problem as well and ended up moving our <meta viewport...> tag from _document.js and into _app.js. In _app.js, we are importing Head from 'next/head'; which seems to remove the duplicate, whereas _document.js is importing { Head } from 'next/document';, which did not remove the duplicate.
_app.js seems like an appropriate place to put a global <meta viewport...> tag since it's not SSR related anyway.

cesarvarela · 2019-04-17T18:42:51Z

So the approach at the moment is to use _app instead of _document?

lisamartin00 · 2019-04-17T21:00:02Z

@cesarvarela yes that is our approach at the moment and does seem to be working..but if anyone has any other suggestions or best practices, we'd love to hear them!

nblthree · 2019-04-24T19:36:27Z

@timneutkens should I make PR to rise a warning in production mode like for the title

cheeki · 2019-04-25T05:10:49Z

In my case, whenever i use "key" property on <meta name="viewport" ... />, unwanted duplicated meta tag appears like below. even in _app.js

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" class="next-head">

nblthree · 2019-04-25T15:28:03Z

@cheeki I made a PR to fix that but logically there is no need to use the key property on meta tags (But I am not sure, maybe there is a need because I remember that like there was a situation in which key is necessary)

vzaidman · 2019-04-28T12:29:12Z

key is needed if you have a child component rewriting the father's component "head".

_app:
<meta key="meta_description" name="description" content="general description"/>

ChildPage:
<meta key="meta_description" name="description" content="page description"/>

nblthree · 2019-05-01T18:31:03Z

I would like to confirm the Expected behavior so that I can solve this one as soon as possible

If there is a viewport in _document don't add the default one
If there is a viewport in _document and another in a page and they don't have the same key value add both of them
If there is a viewport in _document and another in a page and they do have the same key value add the one in the page

vzaidman · 2019-05-01T19:13:44Z

I think it's correct.
but also notice viewport might be in _app as well.
possible in all of them:
in _document in _app and in page

nblthree · 2019-05-01T20:02:09Z

If there is a viewport in _document and another in a page and they do have the same key value add the one in the page

@vzaidman what if they don't have a key value? I am considering it to be the same as the above

nblthree · 2019-05-01T20:53:36Z

@cheeki

In my case, whenever i use "key" property on <meta name="viewport" ... />, unwanted duplicated meta tag appears like below. even in _app.js
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" class="next-head">

I think that it's the right behavior check @vzaidman #6919 (comment) so if you want to overwrite the default meta you shouldn't use the key

vzaidman · 2019-05-02T12:16:11Z

The expected behavior:

every meta component without "key" is added to the head.
every meta component with key overrides all the other meta components with the same key so only one is added to the head. the overrides will happen in the following order:
1. page - most important (most specific)
2. _app
3. _document - least important (most general)

good to have:

console.warn about the possibility to add "key" in development if two meta headers with the same name exists.

Janpot · 2019-05-04T06:22:54Z

I think I'm seeing the same issue with

<meta charSet='utf-8' />

https://github.com/mui-org/material-ui/blob/4516cafd6959fafccae96ca0bc70527d0fd5cf02/examples/nextjs-next/pages/_document.js#L12

Timer · 2019-06-10T15:56:46Z

Hi! After careful review we've decided this is the intended behavior. Head elements that are expected to be deduped should be added using next/head.
The reason this surfaced is because we started defaulting a more commonly used <meta> tag -- not that something is working unexpectedly.

The correct solution in this scenario is to move to using _app over _document.

Soundvessel · 2019-06-28T01:02:58Z

It might help to mention this in the documentation https://nextjs.org/docs#custom-document

Timer · 2019-06-30T22:43:48Z

Feel free to send a PR, @Soundvessel!

samilyak · 2019-08-08T09:57:31Z

Head elements that are expected to be deduped should be added using next/head

A downside of this approach is whenever you need some npm package to build global <meta>s which are always the same (e.g. mobile-detect package to add <meta name="viewport"> conditionally) you're forced to include it on both server and client side.
Even though the package is actually needed only once in _document on server side (as this type of <meta>s don't need to be re-rendered in _app).

For some reason duplicate was created if meta viewport was added in _document. See issue: vercel/next.js#6919

it was weird. see vercel/next.js#6919

vercel/next.js#6919 (comment) Adding key attribute to meta descriptions inside of <Head/> will stop duplicates. This fixes the issue of linking /set/[someid] not showing the correct preview title or image like intended.

stratboy · 2021-01-10T11:30:54Z

I have the same issue. Quite crazy it's still not really solved.

digitaltim-de · 2021-02-07T16:03:02Z

Same problem... and can't fix it.

stratboy · 2021-02-07T17:59:45Z

Same problem... and can't fix it.

Hi, for now, I used _app.js and that solved the issue. Obviously, it's not exactly how it should be...

muratozgul · 2021-03-22T21:46:10Z

<meta charSet="utf-8" />
or
<meta key="viewport" name="viewport" content="initial-scale=1.0, width=device-width" />
should be direct child of Head. I was returning many tags within a react fragment and I was getting duplicates as well.
I inspected PR#7155 and then moved the meta tags under Head and fixed it.

For example:

const CustomHead = ({ children }: CustomHeadProps) => {
  return (
    <Head>
      <meta charSet="utf-8" />
      <meta key="viewport" name="viewport" content="initial-scale=1.0, width=device-width" />
      <CommonTags />
      <SEOTags />
      <OpenGraphTags />
      <CompatibilityTags />
      <link rel="icon" href="/favicon.ico" />
      {children}
    </Head>
  );
};

Toxiapo · 2021-04-15T21:17:10Z

I was getting a duplicate <link" rel='icon' href='/favicon.ico' /, adding a "key" to it solved the problem.

balazsorban44 · 2022-01-28T12:06:22Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

cesarvarela mentioned this issue Apr 17, 2019

Add a viewport meta tag by default #6754

Merged

nblthree mentioned this issue Apr 25, 2019

Duplicate meta tag fix #7155

Closed

This was referenced Apr 26, 2019

meta duplicate #7166

Closed

The screen automatically zooms in when tapping on a material-ui TextField on ios devices #7176

Closed

Timer added the Type: Bug label Apr 29, 2019

Janpot mentioned this issue May 4, 2019

meta charset is rendered "charSet" #7245

Closed

This was referenced May 27, 2019

Don't add default meta tags when using key in the custom one #7434

Closed

Fix duplicate meta tags when using _document head #7307

Closed

Timer removed the Type: Bug label Jun 10, 2019

Timer closed this as completed Jun 10, 2019

Janpot mentioned this issue Oct 8, 2019

Duplicate viewport tag #8654

Closed

chrisweb mentioned this issue Jan 4, 2020

Next.js examples update to fix duplicate meta tags mui/material-ui#19074

Closed

2 tasks

peacefulseeker pushed a commit to peacefulseeker/posture-estimator that referenced this issue Jan 22, 2020

Moving viewport meta tag to _app.js

4c4c1d4

For some reason duplicate was created if meta viewport was added in _document. See issue: vercel/next.js#6919

jeremyBanks added a commit to jeremyBanks/speedruns that referenced this issue Jan 30, 2020

fix mobile viewport

d2f74ec

it was weird. see vercel/next.js#6919

lmuller18 mentioned this issue Aug 16, 2020

Update Meta.tsx to include key attibutes noudadrichem/keycapsets.com#80

Merged

cyrilchapon mentioned this issue Nov 14, 2020

Typescript typing of both <Head /> components, custom component children #19168

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Duplicate <meta name="viewport"> if the custom one is defined in _document.js #6919

Duplicate <meta name="viewport"> if the custom one is defined in _document.js #6919

kachkaev commented Apr 6, 2019

tkhg commented Apr 12, 2019

smackgg commented Apr 12, 2019

lisamartin00 commented Apr 16, 2019

cesarvarela commented Apr 17, 2019

lisamartin00 commented Apr 17, 2019

nblthree commented Apr 24, 2019

cheeki commented Apr 25, 2019

nblthree commented Apr 25, 2019 •

edited

Loading

vzaidman commented Apr 28, 2019 •

edited

Loading

nblthree commented May 1, 2019

vzaidman commented May 1, 2019 •

edited

Loading

nblthree commented May 1, 2019 •

edited

Loading

nblthree commented May 1, 2019 •

edited

Loading

vzaidman commented May 2, 2019 •

edited

Loading

Janpot commented May 4, 2019 •

edited

Loading

Timer commented Jun 10, 2019

Soundvessel commented Jun 28, 2019

Timer commented Jun 30, 2019

samilyak commented Aug 8, 2019

stratboy commented Jan 10, 2021

digitaltim-de commented Feb 7, 2021

stratboy commented Feb 7, 2021

muratozgul commented Mar 22, 2021

Toxiapo commented Apr 15, 2021

balazsorban44 commented Jan 28, 2022

Duplicate <meta name="viewport"> if the custom one is defined in _document.js #6919

Duplicate <meta name="viewport"> if the custom one is defined in _document.js #6919

Comments

kachkaev commented Apr 6, 2019

Bug report

Expected behavior

System information

tkhg commented Apr 12, 2019

smackgg commented Apr 12, 2019

lisamartin00 commented Apr 16, 2019

cesarvarela commented Apr 17, 2019

lisamartin00 commented Apr 17, 2019

nblthree commented Apr 24, 2019

cheeki commented Apr 25, 2019

nblthree commented Apr 25, 2019 • edited Loading

vzaidman commented Apr 28, 2019 • edited Loading

nblthree commented May 1, 2019

vzaidman commented May 1, 2019 • edited Loading

nblthree commented May 1, 2019 • edited Loading

nblthree commented May 1, 2019 • edited Loading

vzaidman commented May 2, 2019 • edited Loading

Janpot commented May 4, 2019 • edited Loading

Timer commented Jun 10, 2019

Soundvessel commented Jun 28, 2019

Timer commented Jun 30, 2019

samilyak commented Aug 8, 2019

stratboy commented Jan 10, 2021

digitaltim-de commented Feb 7, 2021

stratboy commented Feb 7, 2021

muratozgul commented Mar 22, 2021

Toxiapo commented Apr 15, 2021

balazsorban44 commented Jan 28, 2022

nblthree commented Apr 25, 2019 •

edited

Loading

vzaidman commented Apr 28, 2019 •

edited

Loading

vzaidman commented May 1, 2019 •

edited

Loading

nblthree commented May 1, 2019 •

edited

Loading

nblthree commented May 1, 2019 •

edited

Loading

vzaidman commented May 2, 2019 •

edited

Loading

Janpot commented May 4, 2019 •

edited

Loading