Menu

<Head>

Beispiele

Wir bieten eine integrierte Komponente zum Anhängen von Elementen an den head der Seite:

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Mein Seitentitel</title>
      </Head>
      <p>Hallo Welt!</p>
    </div>
  )
}
 
export default IndexPage

Vermeiden von doppelten Tags

Um doppelte Tags im 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 der zweite <meta property="og:title" /> gerendert. Meta-Tags mit doppelten key-Attributen werden automatisch behandelt.

Hinweis: <title>- und <base>-Tags werden von Next.js automatisch auf Duplikate geprüft, sodass die Verwendung von key für diese Tags nicht erforderlich ist.

Der Inhalt von head wird beim Unmounten der Komponente gelöscht. Stellen Sie 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.

Minimale Verschachtelung verwenden

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

next/script für Skripte verwenden

Wir empfehlen, next/script in Ihrer Komponente zu verwenden, anstatt manuell ein <script> in next/head zu erstellen.

Keine html- oder body-Tags

Sie können <Head> nicht verwenden, um Attribute für <html>- oder <body>-Tags zu setzen. Dies führt zu einem next-head-count is missing-Fehler. next/head kann nur Tags innerhalb des HTML-<head>-Tags behandeln.