logoNext.js
DokumentationBlogLernen

Metadaten hinzufügen

Metadaten sind entscheidend für SEO und die Teilbarkeit von Inhalten. In diesem Kapitel besprechen wir, wie Sie Metadaten zu Ihrer Next.js-Anwendung hinzufügen können.

Was sind Metadaten?

In der Webentwicklung liefern Metadaten zusätzliche Informationen über eine Webseite. Diese Daten sind für Besucher der Seite nicht sichtbar. Stattdessen arbeiten sie im Hintergrund, eingebettet im HTML der Seite, normalerweise innerhalb des <head>-Elements. Diese versteckten Informationen sind entscheidend für Suchmaschinen und andere Systeme, die den Inhalt Ihrer Webseite besser verstehen müssen.

Warum sind Metadaten wichtig?

Metadaten spielen eine bedeutende Rolle bei der Verbesserung der SEO einer Webseite, wodurch sie für Suchmaschinen und Social-Media-Plattformen besser zugänglich und verständlich wird. Richtige Metadaten helfen Suchmaschinen dabei, Webseiten effektiv zu indexieren und ihre Platzierung in den Suchergebnissen zu verbessern. Zusätzlich verbessern Metadaten wie Open Graph das Erscheinungsbild geteilter Links in sozialen Medien, wodurch der Inhalt für Nutzer ansprechender und informativer wird.

Arten von Metadaten

Es gibt verschiedene Arten von Metadaten, die jeweils einen bestimmten Zweck erfüllen. Einige gängige Typen sind:

Titel-Metadaten: Verantwortlich für den Titel einer Webseite, der im Browser-Tab angezeigt wird. Dies ist entscheidend für die SEO, da es Suchmaschinen hilft zu verstehen, worum es auf der Seite geht.

<title>Seitentitel</title>

Beschreibungs-Metadaten: Diese Metadaten liefern eine kurze Zusammenfassung des Seiteninhalts und werden oft in den Suchergebnissen angezeigt.

<meta name="description" content="Eine kurze Beschreibung des Seiteninhalts." />

Schlüsselwort-Metadaten: Diese Metadaten enthalten Schlüsselwörter, die mit dem Seiteninhalt zusammenhängen, und helfen Suchmaschinen bei der Indexierung der Seite.

<meta name="keywords" content="Schlüsselwort1, Schlüsselwort2, Schlüsselwort3" />

Open-Graph-Metadaten: Diese Metadaten verbessern die Darstellung einer Webseite, wenn sie in sozialen Medien geteilt wird, indem sie Informationen wie Titel, Beschreibung und Vorschaubild bereitstellen.

<meta property="og:title" content="Titel hier" />
<meta property="og:description" content="Beschreibung hier" />
<meta property="og:image" content="bild_url_hier" />

Favicon-Metadaten: Diese Metadaten verknüpfen das Favicon (ein kleines Symbol) mit der Webseite, das in der Adressleiste oder im Tab des Browsers angezeigt wird.

<link rel="icon" href="pfad/zum/favicon.ico" />

Metadaten hinzufügen

Next.js bietet eine Metadata-API, mit der Sie Metadaten für Ihre Anwendung definieren können. Es gibt zwei Möglichkeiten, Metadaten zu Ihrer Anwendung hinzuzufügen:

  • Konfigurationsbasiert: Exportieren Sie ein statisches metadata-Objekt oder eine dynamische generateMetadata-Funktion in einer layout.js- oder page.js-Datei.

  • Dateibasiert: Next.js bietet eine Reihe spezieller Dateien, die speziell für Metadaten verwendet werden:

    • favicon.ico, apple-icon.jpg und icon.jpg: Werden für Favicons und Icons verwendet
    • opengraph-image.jpg und twitter-image.jpg: Werden für Social-Media-Bilder genutzt
    • robots.txt: Enthält Anweisungen für das Crawling durch Suchmaschinen
    • sitemap.xml: Bietet Informationen über die Struktur der Website

Sie haben die Flexibilität, diese Dateien für statische Metadaten zu verwenden oder sie programmatisch in Ihrem Projekt zu generieren.

Mit beiden Optionen generiert Next.js automatisch die relevanten <head>-Elemente für Ihre Seiten.

Favicon und Open-Graph-Bild

In Ihrem /public-Ordner finden Sie zwei Bilder: favicon.ico und opengraph-image.jpg.

Verschieben Sie diese Bilder in das Stammverzeichnis Ihres /app-Ordners.

Danach erkennt Next.js diese Dateien automatisch und verwendet sie als Favicon und OG-Bild. Sie können dies überprüfen, indem Sie das <head>-Element Ihrer Anwendung in den Entwicklertools inspizieren.

Gut zu wissen: Sie können auch dynamische OG-Bilder mit dem ImageResponse-Konstruktor erstellen.

Seitentitel und -beschreibungen

Sie können auch ein metadata-Objekt aus einer beliebigen layout.js- oder page.js-Datei einbinden, um zusätzliche Seiteninformationen wie Titel und Beschreibung hinzuzufügen. Metadaten in layout.js werden von allen Seiten geerbt, die dieses Layout verwenden.

Erstellen Sie in Ihrem Root-Layout ein neues metadata-Objekt mit den folgenden Feldern:

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'Das offizielle Next.js-Kurs-Dashboard, erstellt mit App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

Next.js fügt den Titel und die Metadaten automatisch zu Ihrer Anwendung hinzu.

Aber was, wenn Sie einen benutzerdefinierten Titel für eine bestimmte Seite hinzufügen möchten? Sie können dies tun, indem Sie ein metadata-Objekt zur Seite selbst hinzufügen. Metadaten in verschachtelten Seiten überschreiben die Metadaten des übergeordneten Elements.

Zum Beispiel können Sie auf der Seite /dashboard/invoices den Seitentitel aktualisieren:

/app/dashboard/invoices/page.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Rechnungen | Acme Dashboard',
};

Das funktioniert, aber wir wiederholen den Titel der Anwendung auf jeder Seite. Wenn sich etwas ändert, wie der Firmenname, müssten Sie ihn auf jeder Seite aktualisieren.

Stattdessen können Sie das Feld title.template im metadata-Objekt verwenden, um eine Vorlage für Ihre Seitentitel zu definieren. Diese Vorlage kann den Seitentitel und alle anderen gewünschten Informationen enthalten.

Aktualisieren Sie in Ihrem Root-Layout das metadata-Objekt, um eine Vorlage einzubinden:

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'Das offizielle Next.js-Lern-Dashboard, erstellt mit App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

Das %s in der Vorlage wird durch den spezifischen Seitentitel ersetzt.

Jetzt können Sie in Ihrer /dashboard/invoices-Seite den Seitentitel hinzufügen:

/app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
  title: 'Rechnungen',
};

Navigieren Sie zur Seite /dashboard/invoices und überprüfen Sie das <head>-Element. Sie sollten sehen, dass der Seitentitel jetzt Rechnungen | Acme Dashboard lautet.

Übung: Metadaten hinzufügen

Nachdem Sie nun etwas über Metadaten gelernt haben, üben Sie, indem Sie Titeln zu Ihren anderen Seiten hinzufügen:

  1. /login-Seite.
  2. /dashboard/-Seite.
  3. /dashboard/customers-Seite.
  4. /dashboard/invoices/create-Seite.
  5. /dashboard/invoices/[id]/edit-Seite.

Die Next.js Metadata-API ist leistungsstark und flexibel und gibt Ihnen die volle Kontrolle über die Metadaten Ihrer Anwendung. Hier haben wir Ihnen gezeigt, wie Sie grundlegende Metadaten hinzufügen können, aber Sie können mehrere Felder hinzufügen, darunter keywords, robots, canonical und mehr. Erkunden Sie gerne die Dokumentation und fügen Sie Ihrer Anwendung alle gewünschten zusätzlichen Metadaten hinzu.

Authentifizierung hinzufügen

Fügen Sie Authentifizierung hinzu, um Ihre Dashboard-Routen mit NextAuth.js, Server Actions und Middleware zu schützen.

On this page