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

next/head unsetting _document <title> #3527

Closed
IanMitchell opened this issue Jan 2, 2018 · 16 comments
Closed

next/head unsetting _document <title> #3527

IanMitchell opened this issue Jan 2, 2018 · 16 comments
Assignees
@timneutkens

Comments

@IanMitchell
Copy link
Contributor

I'm trying to add a custom Social component to my site that adds several relevant meta tags, but it's setting the <title> to an empty string. I have the title defined in _document.js and don't change it anywhere else in the codebase. I'm running the Canary version of Next.js

import Document, { Head, Main, NextScript } from 'next/document'
export default class CustomDocument extends Document {
  static async getInitialProps (ctx) {
    return await Document.getInitialProps(ctx)
  }

  render () {
    return (
      <html lang="en">
        <Head>
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <title>Website Title</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

The custom component I call looks like this:

import Head from 'next/head'

export default ({ title, image, description, url }) => (
  <Head>
    <meta key="twitter-card" name="twitter:card" content="summary" />
    <meta key="twitter-site" name="twitter:site" content="@ianmitchel1" />
    <meta key="twitter-title" name="twitter:title" content={title} />
    <meta key="twitter-description" name="twitter:description" content={description} />
    <meta key="twitter-image" name="twitter:image" content={image} />
    <meta key="twitter-url" name="twitter:url" content={url} />

    <meta key="facebook-type" property="og:type" content="article" />
    <meta key="facebook-title" property="og:title" content={title} />
    <meta key="facebook-description" property="og:description" content={description} />
    <meta key="facebook-image" property="og:image" content={image} />
    <meta key="facebook-url" property="og:url" content={url} />
  </Head>
)

It adds all the meta tags correctly (not sure if it's related, but I needed to add the key parameter - otherwise only the second set of meta tags was added) and the other meta tags from _document.js remain intact, but somehow the title tag just becomes <title></title>.

I've created a small example here - https://next-title-pnxpfydvvh.now.sh
@gsimone
Copy link
Contributor

gsimone commented Jan 8, 2018

Same issue, running 4.2.1

@gihrig
Copy link
Contributor

gihrig commented Jan 14, 2018 •
edited

I had this problem with 4.3.0-canary.1

It has been corrected as of 4.4.0-canary.3

@timneutkens
Copy link
Member

This is indeed a bug. This line show be wrapped in the if statement. I'll fix it once I'm done with universal webpack
https://github.com/zeit/next.js/blob/9320d9f006164f2e997982ce76e80122049ccb3c/client/head-manager.js#L33

@timneutkens timneutkens self-assigned this Jan 16, 2018
@Sekhmet
Copy link
Contributor

Sekhmet commented Feb 13, 2018

@timneutkens I can make PR for this if you don't mind.

@timneutkens
Copy link
Member

timneutkens commented Feb 13, 2018 •
edited

@Sekhmet sure 👍 Please add tests for it 👍

@Sekhmet Sekhmet mentioned this issue Feb 13, 2018
Closed
@ianwang ianwang mentioned this issue Mar 1, 2018
Closed
@remy
Copy link
Contributor

remy commented Mar 17, 2018

I've just come across this and it's still present in next@5.0.1-canary.16. Example here: https://next-title-bug-kraxvxvjas.now.sh - source

@mzzfederico
Copy link

This is quite critical and still present. Any news?

@felipekm
Copy link

felipekm commented Mar 20, 2018 •
edited

Same here, title and description appears in first glance but instantly goes away.
@Sekhmet will you fix this? @timneutkens Any plans to release it?

@JonathonJulian
Copy link

still an issue in 0.5.1, when will the fix be merged?

@ewagstaff
Copy link

Chiming in to say this appears to still be an issue. React is logging the correct value for <title> on render, but it appears blank after that.

@JonathonJulian
Copy link

JonathonJulian commented May 17, 2018 •
edited

what seems to have worked for me was to add another Head with just the title in my component. weird seeing everything else from _document.js is there

@wdifruscio
Copy link

Having this issue in 5.01-canary.17. For now I will just duplicate the head on the pages that I need. Please fix one day :)

@ewagstaff
Copy link

ewagstaff commented May 24, 2018 •
edited

JonathonJulian's solution seems pretty hacky. And while adding another title tag does leave the 2nd title tag intact, the first one is still getting emptied. In Chrome at least, the first one is what gets checked.

Is there a timetable on this being fixed for real?

EDIT: It does actually work ok if it's placed inside a head tag on the page level (e.g. index.js) but not if it's placed in _document.js or any other component. Does this error stem from letting individual pages overwrite the _document.js title?

@JonathonJulian
Copy link

Agreed, its not really a solution, a workaround at best, I ended up removing the title in _document as both tags were being picked up by google web crawlers

My site is pretty basic so not a big deal for me to to add to the pages and its better than no title, but still… pls fix, surprised this was fixed in 6.0??

@timneutkens
Copy link
Member

timneutkens commented May 25, 2018 •
edited

See my comments here: #3795

@timneutkens timneutkens mentioned this issue Jun 13, 2018
Closed
@timneutkens
Copy link
Member

Closing this in favor of #4596 based on my comments in #3795

@lock lock bot locked as resolved and limited conversation to collaborators Jun 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@timneutkens timneutkens

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Prevent unsetting title from document Sekhmet/next.js