61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
68 lines
2.1 KiB
Plaintext
68 lines
2.1 KiB
Plaintext
---
|
|
title: Head
|
|
description: Add custom elements to the `head` of your page with the built-in Head 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 (
|
|
<div>
|
|
<Head>
|
|
<title>My page title</title>
|
|
</Head>
|
|
<p>Hello world!</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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 (
|
|
<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 `key` attributes are automatically handled.
|
|
|
|
> **Good to know**: `<title>` and `<base>` tags are automatically checked for duplicates by Next.js, so using key is not necessary for these tags.
|
|
|
|
> 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 `<React.Fragment>` 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/guides/scripts) in your component instead of manually creating a `<script>` in `next/head`.
|
|
|
|
## No `html` or `body` tags
|
|
|
|
You **cannot** use `<Head>` to set attributes on `<html>` or `<body>` tags. This will result in an `next-head-count is missing` error. `next/head` can only handle tags inside the HTML `<head>` tag.
|