Next.js 15 Meta-Tag Komplettguide — Von og:image bis hreflang

Kernzusammenfassung

• Next.js 15 ermöglicht die deklarative Verwaltung statischer und dynamischer Meta-Tags über die auf dem App Router basierende Metadata API.
• Mit der Funktion generateMetadata() können dynamische og:image, Titel und Beschreibungen für jede Seite automatisch generiert werden.
• Twitter Card, hreflang, kanonische URL und strukturierte Daten (JSON-LD) können in einer einzigen Datei gesteuert werden.
• Falsch konfigurierte Meta-Tags führen direkt zu Fehlern in der sozialen Vorschau und einem Rückgang des Suchrankings, daher sollte vor der Veröffentlichung unbedingt das Meta-Tag-Überprüfungstool verwendet werden.

Was ist die Next.js 15 Metadata API?

Der mit Next.js 13 eingeführte App Router bietet eine Metadata API, die die bisherige -Komponenten-Methode ersetzt. In Next.js 15 wurde diese API weiter verfeinert, sodass Meta-Tags entweder durch das Exportieren des metadata-Objekts in den Dateien layout.tsx und page.tsx oder durch die Verwendung der Funktion generateMetadata() gesteuert werden können.

Statische Metadaten

Die einfachste Form besteht darin, das metadata-Objekt direkt zu exportieren.

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js 15 Meta-Tag Guide',
  description: 'Alles über Next.js Meta-Tags, von og:image bis hreflang',
}

Diese Methode eignet sich für statische Seiten, deren Inhalte zum Zeitpunkt des Builds festgelegt werden. Sie wird verwendet, wenn sich der Inhalt, wie auf der Blog-Startseite oder der Über-Seite, nicht häufig ändert.

Dynamische Metadaten: generateMetadata()

Für Blogbeiträge oder Produktdetailseiten, bei denen sich der Inhalt je nach URL-Parameter ändert, wird die Funktion generateMetadata() verwendet.

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
}

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

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
    },
  }
}

generateMetadata() wird auf dem Server ausgeführt, sodass Datenbankabfragen oder externe API-Aufrufe möglich sind. Der Rückgabewert hat den Typ Metadata, und Next.js fügt ihn automatisch in das -Tag ein.

Wie konfiguriert man og:image richtig?

Open Graph-Bilder sind die Vorschau-Bilder, die auf sozialen Plattformen wie KakaoTalk, Slack und Twitter angezeigt werden, wenn Links geteilt werden. Eine falsche Konfiguration kann dazu führen, dass leere Bilder oder beschädigte Layouts angezeigt werden, was die Klickrate erheblich senkt.

Grundlegende og:image-Konfiguration

export const metadata: Metadata = {
  openGraph: {
    title: 'Seiten Titel',
    description: 'Seiten Beschreibung',
    url: 'https://example.com/blog/my-post',
    siteName: 'Seitenname',
    images: [
      {
        url: 'https://example.com/og/my-post.png',
        width: 1200,
        height: 630,
        alt: 'Vertretungsbild des Beitrags',
      },
    ],
    locale: 'ko_KR',
    type: 'article',
  },
}

Dynamische og:image-Erstellung in Next.js — ImageResponse

Next.js 15 unterstützt die dynamische Renderung von OG-Bildern auf dem Server mit ImageResponse aus next/og. Das Design kann durch Code gesteuert werden, ohne separate Bildbearbeitung.

// app/og/route.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Standard Titel'

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 60,
          background: '#0f172a',
          color: 'white',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '40px',
        }}
      >
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

Anschließend kann in generateMetadata() auf diesen Endpunkt verwiesen werden.

images: [{ url: `https://example.com/og?title=${encodeURIComponent(post.title)}` }]

Twitter Card-Konfiguration

Twitter (jetzt X) verwendet eigene Meta-Tag-Spezifikationen, aber die Next.js Metadata API integriert dies unter dem twitter-Schlüssel.

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Seiten Titel',
    description: 'Seiten Beschreibung',
    creator: '@handle',
    images: ['https://example.com/og/my-post.png'],
  },
}

Der Wert von card kann zwischen summary, summary_large_image, app und player gewählt werden. Für Blogbeiträge ist summary_large_image am besten geeignet.

So vervollständigen Sie mehrsprachige SEO mit hreflang

Das hreflang-Tag ist ein Signal, das Suchmaschinen über die sprachlichen und regionalen Versionen desselben Inhalts informiert. Wenn eine Website sowohl koreanische als auch englische Versionen betreibt, sollte dies unbedingt konfiguriert werden. Wenn die Konfiguration fehlt, könnte Google die sprachspezifischen Seiten als doppelte Inhalte betrachten und die Sichtbarkeit in der Suche beeinträchtigen.

hreflang mit alternates konfigurieren

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/ko/blog/my-post',
    languages: {
      'ko-KR': 'https://example.com/ko/blog/my-post',
      'en-US': 'https://example.com/en/blog/my-post',
      'ja-JP': 'https://example.com/ja/blog/my-post',
    },
  },
}

Next.js generiert basierend auf dieser Konfiguration automatisch folgende -Tags:

<link rel="canonical" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="ko-KR" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en/blog/my-post" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/blog/my-post" />

Die Bedeutung der kanonischen URL-Konfiguration

Die kanonische URL ist ein Tag, das Suchmaschinen signalisiert, dass "diese URL die Original-URL ist", wenn identische oder ähnliche Inhalte unter mehreren URLs existieren. Wenn durch Paginierung, UTM-Parameter oder Unterschiede bei www doppelte URLs entstehen, führt das Fehlen einer kanonischen Konfiguration dazu, dass die Suchpunkte verteilt werden.

alternates: {
  canonical: 'https://example.com/blog/my-post',
}

Verwenden Sie absolute Pfade und stellen Sie sicher, dass HTTPS und die www-Varianten konsistent über die gesamte Website hinweg beibehalten werden.

Strukturierte Daten (JSON-LD) für Rich Results nutzen

Strukturierte Daten ermöglichen es, zusätzliche Informationen wie Sternebewertungen, Autoren und Veröffentlichungsdaten in den Suchergebnissen anzuzeigen, was zu Rich Results führt. In Next.js wird `