how to use <Head> with nextJS

Question

how to use <Head> with nextJS

5.8k views Asked by dcsan At 24 February 2019 at 21:01

I'm having problems getting mobile metatags into a nextJS app. According to the docs here, this should work https://nextjs.org/docs#populating-head

But I don't see the title or any of my own meta properties getting rendered. All I see is:

<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/>

which looks like some type of default.

import Link from 'next/link'
import Head from 'next/head'
import Header from '../components/Header'
import BaseLayout from '../components/BaseLayout.js'

const Index = () => (
  <BaseLayout>
    <Head>
      <title>HSK App</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>
    <Link href='/quizList'>
      <h3>HSK Quiz App!</h3>
    </Link>
  </BaseLayout>
)
export default Index

Help appreciated!

Original Q&A

There are 2 answers

**Lucia** · Answer 1 · 2019-11-26T01:56:23+00:00

NextJS's <Head> component seems a bit buggy.

For one thing, two <Head> tags set in different components sometimes will interfere with each other in really bizarre ways. For another, sometimes having it in page components works, sometimes it doesn't. And the rules seems perfectly random.

The only thing that consistently worked for me is using <Head> in _document.js. :/

**Jon Musselwhite** · Answer 2 · 2020-05-27T20:48:22+00:00

I can't reproduce this problem. Maybe a bug was fixed since this question was written, but the documentation does point out they use a key attribute to help Next.js keep track of meta tags and eliminate duplicates when they appear in parent and child elements.

To avoid duplicate tags in your head you can use the key property, which will make sure the tag is only rendered once, as in the following example:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

TechQA.

how to use <Head> with nextJS

There are 2 answers

Related Questions in META

Related Questions in NEXT.JS

Related Questions in HTML-HEAD

Popular Questions

Popular Tags

Trending Questions