Blitz is in beta! ūüéČ 1.0 expected in May or June
Back to Documentation Menu

<Head> Component

We expose a built-in component for appending elements to the head of the page:

import {Head} from "blitz"

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta
          name="viewport"
          content="initial-scale=1.0, width=device-width"
        />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

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 "blitz"

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

In this case only the second <meta property="og:title" /> is rendered. meta tags with duplicate name attributes are automatically handled.

The contents of head get cleared upon unmounting the component, so make sure each page completely defines what it needs in head, without making assumptions about what other pages added.

title, meta or any other elements (e.g. script)¬†need¬†to¬†be¬†contained¬†as¬†direct¬†children¬†of¬†the¬†Head¬†element, or¬†wrapped¬†into¬†maximum¬†one¬†level¬†of¬†<React.Fragment> or arrays‚ÄĒotherwise¬†the tags¬†won't¬†be¬†correctly¬†picked¬†up¬†on¬†client-side¬†navigations.


Idea for improving this page? Edit it on GitHub.