<Head> | Next.js Español

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 IndexPage

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 IndexPage

En 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 head se borra al desmontar el componente, así que asegúrese de que cada página defina completamente lo que necesita en head, sin hacer suposiciones sobre lo que otras páginas hayan agregado.

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.

Recomendamos usar next/script en su componente en lugar de crear manualmente un <script> en next/head.