Metadaten hinzufügen und OG-Bilder erstellen

Die Metadata-APIs können verwendet werden, um Metadaten für Ihre Anwendung zu definieren, um die SEO und die Teilbarkeit im Web zu verbessern. Dazu gehören:

Das statische metadata-Objekt
Die dynamische generateMetadata-Funktion
Spezielle Dateikonventionen, die verwendet werden können, um statische oder dynamisch generierte Favicons und OG-Bilder hinzuzufügen.

Mit all diesen Optionen generiert Next.js automatisch die relevanten <head>-Tags für Ihre Seite, die in den Entwicklertools des Browsers überprüft werden können.

Standardfelder

Es gibt zwei Standard-meta-Tags, die immer hinzugefügt werden, auch wenn eine Route keine Metadaten definiert:

Das meta charset-Tag setzt die Zeichenkodierung für die Website.
Das meta viewport-Tag setzt die Viewport-Breite und Skalierung für die Website, um sie an verschiedene Geräte anzupassen.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Die anderen Metadatenfelder können mit dem Metadata-Objekt (für statische Metadaten) oder der generateMetadata-Funktion (für generierte Metadaten) definiert werden.

Um statische Metadaten zu definieren, exportieren Sie ein Metadata-Objekt aus einer statischen layout.js- oder page.js-Datei. Zum Beispiel, um einen Titel und eine Beschreibung zur Blog-Route hinzuzufügen:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Mein Blog',
  description: '...',
}

export default function Page() {}

export const metadata = {
  title: 'Mein Blog',
  description: '...',
}

export default function Page() {}

Eine vollständige Liste der verfügbaren Optionen finden Sie in der generateMetadata-Dokumentation.

Generierte Metadaten

Sie können die generateMetadata-Funktion verwenden, um Metadaten abzurufen, die von Daten abhängen. Zum Beispiel, um den Titel und die Beschreibung für einen bestimmten Blog-Beitrag abzurufen:

import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = (await params).slug

  // Beitragsinformationen abrufen
  const post = await fetch(`https://api.vercel.app/blog/${slug}`).then((res) =>
    res.json()
  )

  return {
    title: post.title,
    description: post.description,
  }
}

export default function Page({ params, searchParams }: Props) {}

Im Hintergrund streamt Next.js Metadaten separat von der Benutzeroberfläche und injiziert die Metadaten in das HTML, sobald sie aufgelöst sind.

Memoisierung von Datenanfragen

Es kann Fälle geben, in denen Sie die gleichen Daten für Metadaten und die Seite selbst abrufen müssen. Um doppelte Anfragen zu vermeiden, können Sie die cache-Funktion von React verwenden, um den Rückgabewert zu memoieren und die Daten nur einmal abzurufen. Zum Beispiel, um die Blog-Beitragsinformationen sowohl für die Metadaten als auch für die Seite abzurufen:

import { cache } from 'react'
import { db } from '@/app/lib/db'

// getPost wird zweimal verwendet, aber nur einmal ausgeführt
export const getPost = cache(async (slug: string) => {
  const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
  return res
})

Dateibasierte Metadaten

Die folgenden speziellen Dateien sind für Metadaten verfügbar:

Sie können diese für statische Metadaten verwenden oder diese Dateien programmatisch mit Code generieren.

Favicons

Favicons sind kleine Symbole, die Ihre Website in Lesezeichen und Suchergebnissen repräsentieren. Um ein Favicon zu Ihrer Anwendung hinzuzufügen, erstellen Sie eine favicon.ico-Datei und fügen Sie sie im Stammverzeichnis des App-Ordners hinzu.

Sie können Favicons auch programmatisch mit Code generieren. Weitere Informationen finden Sie in der Favicon-Dokumentation.

Statische Open Graph-Bilder

Open Graph (OG)-Bilder sind Bilder, die Ihre Website in sozialen Medien repräsentieren. Um ein statisches OG-Bild zu Ihrer Anwendung hinzuzufügen, erstellen Sie eine opengraph-image.png-Datei im Stammverzeichnis des App-Ordners.

OG-Bild-Spezialdatei im App-Ordner mit gleichrangigen Layout- und Seiten-Dateien

Sie können auch OG-Bilder für bestimmte Routen hinzufügen, indem Sie eine opengraph-image.png tiefer in der Ordnerstruktur erstellen. Zum Beispiel, um ein OG-Bild speziell für die /blog-Route zu erstellen, fügen Sie eine opengraph-image.jpg-Datei im blog-Ordner hinzu.

Das spezifischere Bild hat Vorrang vor allen OG-Bildern, die darüber in der Ordnerstruktur liegen.

Andere Bildformate wie jpeg, png und webp werden ebenfalls unterstützt. Weitere Informationen finden Sie in der Open Graph Image-Dokumentation.

Generierte Open Graph-Bilder

Der ImageResponse-Konstruktor ermöglicht es Ihnen, dynamische Bilder mit JSX und CSS zu generieren. Dies ist nützlich für OG-Bilder, die von Daten abhängen.

Zum Beispiel, um ein einzigartiges OG-Bild für jeden Blog-Beitrag zu generieren, fügen Sie eine opengraph-image.ts-Datei im blog-Ordner hinzu und importieren Sie den ImageResponse-Konstruktor aus next/og:

import { ImageResponse } from 'next/og'
import { getPost } from '@/app/lib/data'

// Bildmetadaten
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

// Bildgenerierung
export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)

  return new ImageResponse(
    (
      // ImageResponse JSX-Element
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {post.title}
      </div>
    )
  )
}

ImageResponse unterstützt gängige CSS-Eigenschaften, einschließlich Flexbox und absolute Positionierung, benutzerdefinierte Schriftarten, Textumbruch, Zentrierung und verschachtelte Bilder. Siehe die vollständige Liste der unterstützten CSS-Eigenschaften.

Gut zu wissen:

Beispiele sind im Vercel OG Playground verfügbar.

ImageResponse verwendet @vercel/og, satori und resvg, um HTML und CSS in PNG zu konvertieren.

Nur Flexbox und eine Teilmenge von CSS-Eigenschaften werden unterstützt. Erweiterte Layouts (z.B. display: grid) funktionieren nicht.

Metadaten hinzufügen und OG-Bilder erstellen

Standardfelder

Statische Metadaten

Generierte Metadaten

Memoisierung von Datenanfragen

Dateibasierte Metadaten

Favicons

Statische Open Graph-Bilder

Generierte Open Graph-Bilder

generateMetadata

generateViewport

ImageResponse

Metadata-Dateien

Favicon, Icon und Apple Icon

Open Graph Image und Twitter Image

robots.txt

sitemap.xml

On this page