We expose a built-in component for appending elements to the
head of the page:
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:
In this case only the second
<meta property="og:title" /> is rendered.
meta tags with duplicate
key attributes are automatically handled.
The contents of
headget 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.
meta or any other elements (e.g.
script) need to be contained as direct children of the
or wrapped into maximum one level of
<React.Fragment> or arrays—otherwise the tags won't be correctly picked up on client-side navigations.
We recommend using next/script in your component instead of manually creating a