---
title: ""
description: "Add custom elements to the `head` of your page with the built-in Head component."
url: "https://nextjs.org/docs/14/pages/api-reference/components/head"
version: 14.2.35
lastUpdated: 2024-01-06
prerequisites:
- "API Reference: /docs/14/pages/api-reference"
- "Components: /docs/14/pages/api-reference/components"
---
Examples
* [Head Elements](https://github.com/vercel/next.js/tree/canary/examples/head-elements)
* [Layout Component](https://github.com/vercel/next.js/tree/canary/examples/layout-component)
We expose a built-in component for appending elements to the `head` of the page:
```jsx
import Head from 'next/head'
function IndexPage() {
return (
My page title
Hello world!
)
}
export default IndexPage
```
## Avoid duplicated tags
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:
```jsx
import Head from 'next/head'
function IndexPage() {
return (
My page title
Hello world!
)
}
export default IndexPage
```
In this case only the second `` is rendered. `meta` tags with duplicate `key` 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.
## Use minimal nesting
`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 `` or arrays—otherwise the tags won't be correctly picked up on client-side navigations.
## Use `next/script` for scripts
We recommend using [`next/script`](/docs/pages/building-your-application/optimizing/scripts) in your component instead of manually creating a `