---
title: No Head Element
url: "https://nextjs.org/docs/messages/no-head-element"
---



> Prevent usage of `<head>` element.

## Why This Error Occurred

A `<head>` element was used to include page-level metadata, but this can cause unexpected behavior in a Next.js application. Use Next.js' built-in `next/head` component instead.

## Possible Ways to Fix It

Import and use the `<Head />` component:

```jsx filename="pages/index.js"
import Head from 'next/head'

function Index() {
  return (
    <>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
    </>
  )
}

export default Index
```

## Useful Links

- [next/head](/docs/pages/api-reference/components/head)
