Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Duplicate title tags in Head #1039

Closed
khrome83 opened this issue Feb 8, 2017 · 12 comments
Closed

Duplicate title tags in Head #1039

khrome83 opened this issue Feb 8, 2017 · 12 comments

Comments

@khrome83
Copy link
Contributor

khrome83 commented Feb 8, 2017

When using <Head> on a page, as well as specifying the <title> in _document.js inside <Head>, both create duplicate titles.

<head>
  <title class="next-head">Homepage - Welcome</title>
  <meta charset="utf-8" class="next-head">
  <meta name="viewport" content="initial-scale=1.0, width=device-width" class="next-head>
  <title>Homepage</title>
  <link href="/static/styles/sanitize.css" rel="stylesheet">
</head>
@khrome83
Copy link
Contributor Author

khrome83 commented Feb 8, 2017

Looks like issue resolves itself if <head> the default HTML5 tag, is used instead of <Head> from Next within the _document.js fragment.

Should we be using <Head> or <head> within the _document.js.

If we should be using <head> then the glamor and other _document.js examples are incorrect right now.

@timneutkens
Copy link
Member

@khrome83 This #668 would solve your issue 👍 will be released in 2.1

@timneutkens
Copy link
Member

Regarding this question:

Should we be using or within the _document.js.

cc @arunoda

@arunoda
Copy link
Contributor

arunoda commented Feb 9, 2017

@khrome83 I think using the title in the _document.js is not a good idea. Because it'll be static and cannot change with the client side.

Using the <Head/> inside your pages in the better option.

@timneutkens
Copy link
Member

Using <Head/> with https://github.com/zeit/next.js/tree/master/examples/layout-component is the way to go in this case. Since we dedupe <title> in <Head/>

@amankkg
Copy link

amankkg commented Apr 9, 2017 •
edited
Loading

next@2.1.0 and still facing this issue.
Here is usage example inside of the reusable component:

<div>
  <Header>
    <style key="transcribe" dangerouslySetInnerHTML={{ __html: stylesheet }} />
  </Header>
  ...

style tag is being rendered on every usage of the component

@amankkg
Copy link

amankkg commented Apr 9, 2017

@khrome83 did you re-checked this behavior since 2.1.0?

@khrome83
Copy link
Contributor Author

khrome83 commented Apr 9, 2017 via email

@amankkg
Copy link

amankkg commented Apr 9, 2017

update: related PR is not merged yet

@chhuang
Copy link

chhuang commented Apr 16, 2017

Removing <Head> from _document.js does not render my styles from the server and it causes FOUC.

@typeofweb
Copy link
Contributor

Did you get this @khrome83 working? I'm on next 5 in 2018 and it's still unclera for me how to use in _document.js and in my pages to avoid duplicate tags.

@khrome83
Copy link
Contributor Author

khrome83 commented May 5, 2018 •
edited
Loading

I moved most of my stuff to my layout components, and pass the information to them from the pages. The only items I use for in _document.js are things that are universal across the site and do not change when navigating between pages. Like the inclusion of font or analytics code. Meta data to validate Google Search Console, etc.

@lock lock bot locked as resolved and limited conversation to collaborators May 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@arunoda @chhuang @typeofweb @khrome83 @amankkg @timneutkens