d1fdd2bbf8
* Added descriptions * Added descriptions to API Reference * Added descriptions to API Routes * Added descriptions to basic features * Added descriptions to the routing docs * Update exportPathMap.md Co-authored-by: Joe Haddad <timer150@gmail.com>
2 KiB
2 KiB
description |
---|
Add custom elements to the `head` of your page with the built-in Head component. |
next/head
Examples
We expose a built-in component for appending elements to the head
of the page:
import Head from 'next/head'
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 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta
name="viewport"
content="initial-scale=1.0, width=device-width"
key="viewport"
/>
</Head>
<Head>
<meta
name="viewport"
content="initial-scale=1.2, width=device-width"
key="viewport"
/>
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPage
In this case only the second <meta name="viewport" />
is rendered.
The contents of
head
get cleared upon unmounting the component, so make sure each page completely defines what it needs inhead
, without making assumptions about what other pages added.
title
andmeta
elements need to be contained as direct children of theHead
element, or wrapped into maximum one level of<React.Fragment>
, otherwise the meta tags won't be correctly picked up on client-side navigations.