<Head>
Ejemplos
Exponemos un componente integrado para agregar elementos al head de la página:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>Mi título de página</title>
</Head>
<p>¡Hola mundo!</p>
</div>
)
}
export default IndexPageEvite etiquetas duplicadas
Para evitar etiquetas duplicadas en su head, puede usar la propiedad key, que asegurará que la etiqueta solo se renderice una vez, como en el siguiente ejemplo:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>Mi título de página</title>
<meta property="og:title" content="Mi título de página" key="title" />
</Head>
<Head>
<meta property="og:title" content="Mi nuevo título" key="title" />
</Head>
<p>¡Hola mundo!</p>
</div>
)
}
export default IndexPageEn este caso, solo se renderiza el segundo <meta property="og:title" />. Las etiquetas meta con atributos key duplicados se manejan automáticamente.
El contenido de
headse borra al desmontar el componente, así que asegúrese de que cada página defina completamente lo que necesita enhead, sin hacer suposiciones sobre lo que agregaron otras páginas.
Use anidación mínima
Los elementos title, meta o cualquier otro (por ejemplo, script) deben estar contenidos como hijos directos del elemento Head, o envueltos en un máximo de un nivel de <React.Fragment> o arrays; de lo contrario, las etiquetas no se detectarán correctamente en las navegaciones del lado del cliente.
Use next/script para scripts
Recomendamos usar next/script en su componente en lugar de crear manualmente un <script> en next/head.
No use etiquetas html o body
No puede usar <Head> para establecer atributos en las etiquetas <html> o <body>. Esto resultará en un error next-head-count is missing. next/head solo puede manejar etiquetas dentro de la etiqueta <head> de HTML.