<Head> | Next.js Deutsch

Beispiele

Wir bieten eine integrierte Komponente zum Hinzufügen von Elementen zum head der Seite an:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Mein Seitentitel</title>
      </Head>
      <p>Hallo Welt!</p>
    </div>
  )
}

export default IndexPage

Um doppelte Tags in Ihrem head zu vermeiden, können Sie die key-Eigenschaft verwenden, die sicherstellt, dass der Tag nur einmal gerendert wird, wie im folgenden Beispiel:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Mein Seitentitel</title>
        <meta property="og:title" content="Mein Seitentitel" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="Mein neuer Titel" key="title" />
      </Head>
      <p>Hallo Welt!</p>
    </div>
  )
}

export default IndexPage

In diesem Fall wird nur das zweite <meta property="og:title" /> gerendert. meta-Tags mit doppelten key-Attributen werden automatisch behandelt.

Der Inhalt von head wird beim Demontieren der Komponente gelöscht. Stellen Sie daher sicher, dass jede Seite vollständig definiert, was sie in head benötigt, ohne Annahmen darüber zu treffen, was andere Seiten hinzugefügt haben.

title, meta oder andere Elemente (z.B. script) müssen als direkte Kinder des Head-Elements enthalten sein oder in maximal einer Ebene von <React.Fragment> oder Arrays eingeschlossen werden – andernfalls werden die Tags bei clientseitigen Navigationen nicht korrekt erkannt.

Wir empfehlen die Verwendung von next/script in Ihrer Komponente anstelle der manuellen Erstellung eines <script>-Tags in next/head.