generateMetadata

Diese Seite behandelt alle konfigurationsbasierten Metadaten-Optionen mit generateMetadata und dem statischen Metadaten-Objekt.

layout.tsx

TypeScript

import type { Metadata } from 'next'
 
// entweder Statische Metadaten
export const metadata: Metadata = {
  title: '...',
}
 
// oder Dynamische Metadaten
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

Hinweis:

Die Exporte des metadata-Objekts und der generateMetadata-Funktion werden nur in Server-Komponenten unterstützt.

Sie können nicht gleichzeitig das metadata-Objekt und die generateMetadata-Funktion aus demselben Routen-Segment exportieren.

Beim ersten Laden wird das Streaming blockiert, bis generateMetadata vollständig aufgelöst ist, einschließlich aller Inhalte aus loading.js.

Das `metadata`-Objekt

Um statische Metadaten zu definieren, exportieren Sie ein Metadata-Objekt aus einer layout.js- oder page.js-Datei.

layout.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

Weitere Informationen finden Sie unter Metadaten-Felder.

Dynamische Metadaten hängen von dynamischen Informationen ab, wie aktuellen Routenparametern, externen Daten oder metadata in übergeordneten Segmenten. Sie können durch Export einer generateMetadata-Funktion festgelegt werden, die ein Metadata-Objekt zurückgibt.

app/products/[id]/page.tsx

TypeScript

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // Routenparameter lesen
  const id = (await params).id
 
  // Daten abrufen
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // Optional übergeordnete Metadaten erweitern (statt ersetzen)
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

Parameter

Die generateMetadata-Funktion akzeptiert die folgenden Parameter:

props - Ein Objekt, das die Parameter der aktuellen Route enthält:
- params - Ein Objekt, das die dynamischen Routenparameter von der Stammebene bis zum Segment enthält, in dem generateMetadata aufgerufen wird. Beispiele:
  
  Route URL params
  app/shop/[slug]/page.js /shop/1 { slug: '1' }
  app/shop/[tag]/[item]/page.js /shop/1/2 { tag: '1', item: '2' }
  app/shop/[...slug]/page.js /shop/1/2 { slug: ['1', '2'] }
- searchParams - Ein Objekt, das die aktuellen URL-Suchparameter enthält. Beispiele:
  
  URL searchParams
  /shop?a=1 { a: '1' }
  /shop?a=1&b=2 { a: '1', b: '2' }
  /shop?a=1&a=2 { a: ['1', '2'] }
parent - Ein Promise mit den aufgelösten Metadaten aus übergeordneten Routensegmenten.

Route	URL	`params`
`app/shop/[slug]/page.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/page.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/shop/[...slug]/page.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

URL	`searchParams`
`/shop?a=1`	`{ a: '1' }`
`/shop?a=1&b=2`	`{ a: '1', b: '2' }`
`/shop?a=1&a=2`	`{ a: ['1', '2'] }`

Rückgabe

generateMetadata sollte ein Metadata-Objekt mit einem oder mehreren Metadaten-Feldern zurückgeben.

Hinweis:

Wenn Metadaten nicht von Laufzeitinformationen abhängen, sollten sie mit dem statischen metadata-Objekt definiert werden.

fetch-Anfragen werden automatisch memoisiert für dieselben Daten über generateMetadata, generateStaticParams, Layouts, Pages und Server-Komponenten. React cache kann verwendet werden, wenn fetch nicht verfügbar ist.

searchParams sind nur in page.js-Segmenten verfügbar.

Die Next.js-Methoden redirect() und notFound() können auch innerhalb von generateMetadata verwendet werden.

Metadaten-Felder

`title`

Das title-Attribut wird verwendet, um den Titel des Dokuments festzulegen. Es kann als einfache Zeichenkette oder als optionales Vorlagen-Objekt definiert werden.

Zeichenkette

layout.js

export const metadata = {
  title: 'Next.js',
}

<head>

<title>Next.js</title>

Vorlagen-Objekt

app/layout.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '...',
    default: '...',
    absolute: '...',
  },
}

Standard

title.default kann verwendet werden, um einen Fallback-Titel für untergeordnete Routensegmente bereitzustellen, die keinen title definieren.

app/layout.tsx

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    default: 'Acme',
  },
}

app/about/page.tsx

import type { Metadata } from 'next'
 
export const metadata: Metadata = {}
 
// Ausgabe: <title>Acme</title>

Vorlage

title.template kann verwendet werden, um ein Präfix oder Suffix zu titles in untergeordneten Routensegmenten hinzuzufügen.

app/layout.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme', // Ein Standard ist erforderlich, wenn eine Vorlage erstellt wird
  },
}

app/about/page.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'About',
}
 
// Ausgabe: <title>About | Acme</title>

Hinweis:

title.template gilt für untergeordnete Routensegmente und nicht für das Segment, in dem es definiert ist. Das bedeutet:

title.default ist erforderlich, wenn Sie ein title.template hinzufügen.

In layout.js definiertes title.template gilt nicht für ein in page.js desselben Routensegments definiertes title.

In page.js definiertes title.template hat keine Wirkung, da eine Seite immer das Endsegment ist (sie hat keine untergeordneten Routensegmente).

title.template hat keine Wirkung, wenn eine Route kein title oder title.default definiert hat.

Absolut

title.absolute kann verwendet werden, um einen Titel zu definieren, der title.template in übergeordneten Segmenten ignoriert.

app/layout.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme',
  },
}

app/about/page.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    absolute: 'About',
  },
}
 
// Ausgabe: <title>About</title>

Hinweis:

layout.js

title (Zeichenfolge) und title.default definieren den Standardtitel für untergeordnete Segmente (die kein eigenes title definieren). Sie ergänzen title.template aus dem nächstgelegenen übergeordneten Segment, falls vorhanden.

title.absolute definiert den Standardtitel für untergeordnete Segmente. Er ignoriert title.template aus übergeordneten Segmenten.

title.template definiert eine neue Titelvorlage für untergeordnete Segmente.

page.js

Wenn eine Seite keinen eigenen Titel definiert, wird der aufgelöste Titel des nächstgelegenen übergeordneten Elements verwendet.

title (Zeichenfolge) definiert den Titel der Route. Er ergänzt title.template aus dem nächstgelegenen übergeordneten Segment, falls vorhanden.

title.absolute definiert den Titel der Route. Er ignoriert title.template aus übergeordneten Segmenten.

title.template hat in page.js keine Wirkung, da eine Seite immer das Endsegment einer Route ist.

`description`

layout.js

export const metadata = {
  description: 'Das React-Framework für das Web',
}

<head>

<meta name="description" content="Das React-Framework für das Web" />

Grundlegende Felder

layout.js

export const metadata = {
  generator: 'Next.js',
  applicationName: 'Next.js',
  referrer: 'origin-when-cross-origin',
  keywords: ['Next.js', 'React', 'JavaScript'],
  authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
  creator: 'Jiachi Liu',
  publisher: 'Sebastian Markbåge',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}

<head>

<meta name="application-name" content="Next.js" />
<meta name="author" content="Seb" />
<link rel="author" href="https://nextjs.org" />
<meta name="author" content="Josh" />
<meta name="generator" content="Next.js" />
<meta name="keywords" content="Next.js,React,JavaScript" />
<meta name="referrer" content="origin-when-cross-origin" />
<meta name="color-scheme" content="dark" />
<meta name="creator" content="Jiachi Liu" />
<meta name="publisher" content="Sebastian Markbåge" />
<meta name="format-detection" content="telephone=no, address=no, email=no" />

`metadataBase`

metadataBase ist eine Komfortfunktion zum Festlegen eines URL-Präfixes für metadata-Felder, die eine vollständig qualifizierte URL erfordern.

metadataBase ermöglicht es URL-basierten metadata-Feldern im aktuellen Routensegment und darunter, einen relativen Pfad zu verwenden, anstatt einer sonst erforderlichen absoluten URL.
Der relative Pfad des Feldes wird mit metadataBase kombiniert, um eine vollständig qualifizierte URL zu bilden.
Wenn nicht konfiguriert, wird metadataBase automatisch mit einem Standardwert gefüllt.

layout.js

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}

<head>

<link rel="canonical" href="https://acme.com" />
<link rel="alternate" hreflang="en-US" href="https://acme.com/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://acme.com/de-DE" />
<meta property="og:image" content="https://acme.com/og-image.png" />

Hinweis:

metadataBase wird typischerweise in der Root-app/layout.js gesetzt, um für URL-basierte metadata-Felder über alle Routen hinweg zu gelten.

Alle URL-basierten metadata-Felder, die absolute URLs erfordern, können mit einer metadataBase-Option konfiguriert werden.

metadataBase kann eine Subdomain enthalten, z.B. https://app.acme.com, oder einen Basispfad, z.B. https://acme.com/start/from/here

Wenn ein metadata-Feld eine absolute URL bereitstellt, wird metadataBase ignoriert.

Die Verwendung eines relativen Pfads in einem URL-basierten metadata-Feld ohne Konfiguration von metadataBase führt zu einem Build-Fehler.

Next.js normalisiert doppelte Schrägstriche zwischen metadataBase (z.B. https://acme.com/) und einem relativen Feld (z.B. /path) zu einem einfachen Schrägstrich (z.B. https://acme.com/path)

Standardwert

Wenn nicht konfiguriert, hat metadataBase einen Standardwert.

Auf Vercel:

Für Produktionsbereitstellungen wird VERCEL_PROJECT_PRODUCTION_URL verwendet.

Für Vorschau-Bereitstellungen hat VERCEL_BRANCH_URL Vorrang, und es wird auf VERCEL_URL zurückgegriffen, wenn es nicht vorhanden ist.

Wenn diese Werte vorhanden sind, werden sie als Standardwert von metadataBase verwendet, andernfalls wird auf http://localhost:${process.env.PORT || 3000} zurückgegriffen. Dies ermöglicht das Funktionieren von Open Graph-Bildern sowohl bei lokalen Builds als auch bei Vercel-Vorschau- und Produktionsbereitstellungen. Bei der Außerkraftsetzung des Standardwerts empfehlen wir die Verwendung von Umgebungsvariablen zur Berechnung der URL. Dies ermöglicht die Konfiguration einer URL für lokale Entwicklung, Staging und Produktionsumgebungen.

Weitere Details zu diesen Umgebungsvariablen finden Sie in der Dokumentation zu Systemumgebungsvariablen.

URL-Zusammensetzung

Die URL-Zusammensetzung bevorzugt die Entwicklerabsicht gegenüber den Standard-Verzeichnis-Traversal-Semantiken.

Nachgestellte Schrägstriche zwischen metadataBase und metadata-Feldern werden normalisiert.
Ein "absoluter" Pfad in einem metadata-Feld (der typischerweise den gesamten URL-Pfad ersetzen würde) wird als "relativer" Pfad behandelt (beginnend am Ende von metadataBase).

Zum Beispiel, bei folgendem metadataBase:

app/layout.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  metadataBase: new URL('https://acme.com'),
}

Alle metadata-Felder, die das obige metadataBase erben und einen eigenen Wert festlegen, werden wie folgt aufgelöst:

`metadata`-Feld	Aufgelöste URL
`/`	`https://acme.com`
`./`	`https://acme.com`
`payments`	`https://acme.com/payments`
`/payments`	`https://acme.com/payments`
`./payments`	`https://acme.com/payments`
`../payments`	`https://acme.com/payments`
`https://beta.acme.com/payments`	`https://beta.acme.com/payments`

`openGraph`

layout.js

export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'Das React-Framework für das Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png', // Muss eine absolute URL sein
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png', // Muss eine absolute URL sein
        width: 1800,
        height: 1600,
        alt: 'Mein benutzerdefinierter Alt-Text',
      },
    ],
    videos: [
      {
        url: 'https://nextjs.org/video.mp4', // Muss eine absolute URL sein
        width: 800,
        height: 600,
      },
    ],
    audio: [
      {
        url: 'https://nextjs.org/audio.mp3', // Muss eine absolute URL sein
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}

<head>

<meta property="og:title" content="Next.js" />
<meta property="og:description" content="Das React-Framework für das Web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image" content="https://nextjs.org/og-alt.png" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="Mein benutzerdefinierter Alt-Text" />
<meta property="og:video" content="https://nextjs.org/video.mp4" />
<meta property="og:video:width" content="800" />
<meta property="og:video:height" content="600" />
<meta property="og:audio" content="https://nextjs.org/audio.mp3" />
<meta property="og:type" content="website" />

layout.js

export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'Das React-Framework für das Web',
    type: 'article',
    publishedTime: '2023-01-01T00:00:00.000Z',
    authors: ['Seb', 'Josh'],
  },
}

<head>

<meta property="og:title" content="Next.js" />
<meta property="og:description" content="Das React-Framework für das Web" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-01-01T00:00:00.000Z" />
<meta property="article:author" content="Seb" />
<meta property="article:author" content="Josh" />

Hinweis:

Es kann zweckmäßiger sein, die dateibasierte Metadaten-API für Open Graph-Bilder zu verwenden. Anstatt die Konfigurationsexport mit tatsächlichen Dateien synchronisieren zu müssen, generiert die dateibasierte API automatisch die korrekten Metadaten für Sie.

`robots`

layout.tsx

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  robots: {
    index: false,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: false,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

<head>

<meta name="robots" content="noindex, follow, nocache" />
<meta
  name="googlebot"
  content="index, nofollow, noimageindex, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
/>

`icons`

Hinweis: Wir empfehlen, wo möglich die dateibasierte Metadaten-API für Icons zu verwenden. Anstatt die Konfigurationsexport mit tatsächlichen Dateien synchronisieren zu müssen, generiert die dateibasierte API automatisch die korrekten Metadaten für Sie.

layout.js

export const metadata = {
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
}

<head>

<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>

layout.js

export const metadata = {
  icons: {
    icon: [
      { url: '/icon.png' },
      new URL('/icon.png', 'https://example.com'),
      { url: '/icon-dark.png', media: '(prefers-color-scheme: dark)' },
    ],
    shortcut: ['/shortcut-icon.png'],
    apple: [
      { url: '/apple-icon.png' },
      { url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
    ],
    other: [
      {
        rel: 'apple-touch-icon-precomposed',
        url: '/apple-touch-icon-precomposed.png',
      },
    ],
  },
}

<head>

<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="icon" href="https://example.com/icon.png" />
<link rel="icon" href="/icon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>
<link
  rel="apple-touch-icon"
  href="/apple-icon-x3.png"
  sizes="180x180"
  type="image/png"
/>

Hinweis: Die msapplication-* Metadaten werden in Chromium-Builds von Microsoft Edge nicht mehr unterstützt und sind daher nicht mehr erforderlich.

`themeColor`

Veraltet: Die themeColor-Option in metadata ist seit Next.js 14 veraltet. Bitte verwenden Sie stattdessen die viewport-Konfiguration.

`manifest`

Ein Web-App-Manifest, wie in der Web Application Manifest-Spezifikation definiert.

layout.js

export const metadata = {
  manifest: 'https://nextjs.org/manifest.json',
}

<head>

<link rel="manifest" href="https://nextjs.org/manifest.json" />

`twitter`

Die Twitter-Spezifikation wird (überraschenderweise) für mehr als nur X (früher bekannt als Twitter) verwendet.

Erfahren Sie mehr über die Twitter Card Markup-Referenz.

layout.js

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js',
    description: 'The React Framework for the Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: ['https://nextjs.org/og.png'], // Muss eine absolute URL sein
  },
}

<head>

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />

layout.js

export const metadata = {
  twitter: {
    card: 'app',
    title: 'Next.js',
    description: 'The React Framework for the Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: {
      url: 'https://nextjs.org/og.png',
      alt: 'Next.js Logo',
    },
    app: {
      name: 'twitter_app',
      id: {
        iphone: 'twitter_app://iphone',
        ipad: 'twitter_app://ipad',
        googleplay: 'twitter_app://googleplay',
      },
      url: {
        iphone: 'https://iphone_url',
        ipad: 'https://ipad_url',
      },
    },
  },
}

<head>

<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:card" content="app" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
<meta name="twitter:image:alt" content="Next.js Logo" />
<meta name="twitter:app:name:iphone" content="twitter_app" />
<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
<meta name="twitter:app:url:iphone" content="https://iphone_url" />
<meta name="twitter:app:url:ipad" content="https://ipad_url" />
<meta name="twitter:app:name:ipad" content="twitter_app" />
<meta name="twitter:app:name:googleplay" content="twitter_app" />

`viewport`

Veraltet: Die viewport-Option in metadata ist seit Next.js 14 veraltet. Bitte verwenden Sie die viewport-Konfiguration.

`verification`

layout.js

export const metadata = {
  verification: {
    google: 'google',
    yandex: 'yandex',
    yahoo: 'yahoo',
    other: {
      me: ['my-email', 'my-link'],
    },
  },
}

<head>

<meta name="google-site-verification" content="google" />
<meta name="y_key" content="yahoo" />
<meta name="yandex-verification" content="yandex" />
<meta name="me" content="my-email" />
<meta name="me" content="my-link" />

`appleWebApp`

layout.js

export const metadata = {
  itunes: {
    appId: 'myAppStoreID',
    appArgument: 'myAppArgument',
  },
  appleWebApp: {
    title: 'Apple Web App',
    statusBarStyle: 'black-translucent',
    startupImage: [
      '/assets/startup/apple-touch-startup-image-768x1004.png',
      {
        url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
        media: '(device-width: 768px) and (device-height: 1024px)',
      },
    ],
  },
}

<head>

<meta
  name="apple-itunes-app"
  content="app-id=myAppStoreID, app-argument=myAppArgument"
/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Apple Web App" />
<link
  href="/assets/startup/apple-touch-startup-image-768x1004.png"
  rel="apple-touch-startup-image"
/>
<link
  href="/assets/startup/apple-touch-startup-image-1536x2008.png"
  media="(device-width: 768px) and (device-height: 1024px)"
  rel="apple-touch-startup-image"
/>
<meta
  name="apple-mobile-web-app-status-bar-style"
  content="black-translucent"
/>

`alternates`

layout.js

export const metadata = {
  alternates: {
    canonical: 'https://nextjs.org',
    languages: {
      'en-US': 'https://nextjs.org/en-US',
      'de-DE': 'https://nextjs.org/de-DE',
    },
    media: {
      'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
    },
    types: {
      'application/rss+xml': 'https://nextjs.org/rss',
    },
  },
}

<head>

<link rel="canonical" href="https://nextjs.org" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
<link
  rel="alternate"
  media="only screen and (max-width: 600px)"
  href="https://nextjs.org/mobile"
/>
<link
  rel="alternate"
  type="application/rss+xml"
  href="https://nextjs.org/rss"
/>

`appLinks`

layout.js

export const metadata = {
  appLinks: {
    ios: {
      url: 'https://nextjs.org/ios',
      app_store_id: 'app_store_id',
    },
    android: {
      package: 'com.example.android/package',
      app_name: 'app_name_android',
    },
    web: {
      url: 'https://nextjs.org/web',
      should_fallback: true,
    },
  },
}

<head>

<meta property="al:ios:url" content="https://nextjs.org/ios" />
<meta property="al:ios:app_store_id" content="app_store_id" />
<meta property="al:android:package" content="com.example.android/package" />
<meta property="al:android:app_name" content="app_name_android" />
<meta property="al:web:url" content="https://nextjs.org/web" />
<meta property="al:web:should_fallback" content="true" />

`archives`

Beschreibt eine Sammlung von Aufzeichnungen, Dokumenten oder anderen Materialien von historischem Interesse (Quelle).

layout.js

export const metadata = {
  archives: ['https://nextjs.org/13'],
}

<head>

<link rel="archives" href="https://nextjs.org/13" />

`assets`

layout.js

export const metadata = {
  assets: ['https://nextjs.org/assets'],
}

<head>

<link rel="assets" href="https://nextjs.org/assets" />

`bookmarks`

layout.js

export const metadata = {
  bookmarks: ['https://nextjs.org/13'],
}

<head>

<link rel="bookmarks" href="https://nextjs.org/13" />

`category`

layout.js

export const metadata = {
  category: 'technology',
}

<head>

<meta name="category" content="technology" />

`facebook`

Sie können eine Facebook-App oder ein Facebook-Konto mit Ihrer Webseite für bestimmte Facebook Social Plugins verbinden Facebook-Dokumentation

Hinweis: Sie können entweder appId oder admins angeben, aber nicht beides.

layout.js

export const metadata = {
  facebook: {
    appId: '12345678',
  },
}

<head>

<meta property="fb:app_id" content="12345678" />

layout.js

export const metadata = {
  facebook: {
    admins: '12345678',
  },
}

<head>

<meta property="fb:admins" content="12345678" />

Wenn Sie mehrere fb:admins-Meta-Tags generieren möchten, können Sie einen Array-Wert verwenden.

layout.js

export const metadata = {
  facebook: {
    admins: ['12345678', '87654321'],
  },
}

<head>

<meta property="fb:admins" content="12345678" />
<meta property="fb:admins" content="87654321" />

`other`

Alle Metadaten-Optionen sollten durch die integrierte Unterstützung abgedeckt sein. Es können jedoch benutzerdefinierte Metadaten-Tags für Ihre Website oder ganz neue Metadaten-Tags vorhanden sein. Sie können die Option other verwenden, um beliebige benutzerdefinierte Metadaten-Tags zu rendern.

layout.js

export const metadata = {
  other: {
    custom: 'meta',
  },
}

<head>

<meta name="custom" content="meta" />

Wenn Sie mehrere Meta-Tags mit demselben Schlüssel generieren möchten, können Sie einen Array-Wert verwenden.

layout.js

export const metadata = {
  other: {
    custom: ['meta1', 'meta2'],
  },
}

<head>

<meta name="custom" content="meta1" /> <meta name="custom" content="meta2" />

Nicht unterstützte Metadaten

Die folgenden Metadatentypen haben derzeit keine integrierte Unterstützung. Sie können jedoch in Layout oder Seite selbst gerendert werden.

Metadaten	Empfehlung
`<meta http-equiv="...">`	Verwenden Sie entsprechende HTTP-Header über `redirect()`, Middleware, Sicherheits-Header
`<base>`	Rendern Sie das Tag im Layout oder in der Seite selbst.
`<noscript>`	Rendern Sie das Tag im Layout oder in der Seite selbst.
`<style>`	Erfahren Sie mehr über Styling in Next.js.
`<script>`	Erfahren Sie mehr über Verwendung von Skripten.
`<link rel="stylesheet" />`	Importieren Sie Stylesheets direkt im Layout oder in der Seite selbst.
`<link rel="preload />`	Verwenden Sie ReactDOM Preload-Methode
`<link rel="preconnect" />`	Verwenden Sie ReactDOM Preconnect-Methode
`<link rel="dns-prefetch" />`	Verwenden Sie ReactDOM PrefetchDNS-Methode

Ressourcen-Hinweise

Das <link>-Element verfügt über eine Reihe von rel-Schlüsselwörtern, die verwendet werden können, um dem Browser anzudeuten, dass eine externe Ressource wahrscheinlich benötigt wird. Der Browser verwendet diese Informationen, um Preloading-Optimierungen je nach Schlüsselwort anzuwenden.

Obwohl die Metadata API diese Hinweise nicht direkt unterstützt, können Sie neue ReactDOM-Methoden verwenden, um sie sicher in den <head> des Dokuments einzufügen.

app/preload-resources.tsx

TypeScript

'use client'
 
import ReactDOM from 'react-dom'
 
export function PreloadResources() {
  ReactDOM.preload('...', { as: '...' })
  ReactDOM.preconnect('...', { crossOrigin: '...' })
  ReactDOM.prefetchDNS('...')
 
  return '...'
}

`<link rel="preload">`

Beginnen Sie das Laden einer Ressource früh im Browser-Seitenrenderingzyklus. MDN Docs.

ReactDOM.preload(href: string, options: { as: string })

<head>

<link rel="preload" href="..." as="..." />

`<link rel="preconnect">`

Initiieren Sie vorausschauend eine Verbindung zu einem Ursprung. MDN Docs.

ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })

<head>

<link rel="preconnect" href="..." crossorigin />

`<link rel="dns-prefetch">`

Versuchen Sie, einen Domainnamen zu lösen, bevor Ressourcen angefordert werden. MDN Docs.

ReactDOM.prefetchDNS(href: string)

<head>

<link rel="dns-prefetch" href="..." />

Hinweis:

Diese Methoden werden derzeit nur in Client-Komponenten unterstützt, die beim ersten Seitenaufruf noch serverseitig gerendert werden.

Integrierte Next.js-Funktionen wie next/font, next/image und next/script behandeln relevante Ressourcen-Hinweise automatisch.

Typen

Sie können Ihrer Metadata Typsicherheit hinzufügen, indem Sie den Metadata-Typ verwenden. Wenn Sie das integrierte TypeScript-Plugin in Ihrer IDE verwenden, müssen Sie den Typ nicht manuell hinzufügen, können ihn aber bei Bedarf explizit hinzufügen.

`metadata`-Objekt

layout.tsx

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Next.js',
}