← Blog

Open Graph Tags in Next.js: Das Entwicklerhandbuch 2026

Next.js vereinfacht OG-Tags mit der Metadaten-API. Hier finden Sie alles, was Sie wissen müssen – von statischen bis hin zu dynamischen OG-Bildern.

Sie sind sich nicht sicher, ob Ihre Next.js OG-Tags korrekt sind?

Überprüfen Sie Ihre Open Graph-Tags kostenlos mit Proovd – fügen Sie eine URL ein und sehen Sie genau, wie sie auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit aussieht.

Schnelle Antwort

  • Next.js 13+ verwendet die Metadaten-API für OG-Tags
  • Statische Seiten: Metadaten Objekt exportieren
  • Dynamische Seiten: verwenden Sie generateMetadata()
  • Dynamische OG-Bilder: verwenden Sie @vercel/og

Next.js App Router – Statische Metadaten

In Next.js 13+ (App Router) ist der einfachste Weg, OG-Tags festzulegen, der Metadaten-Export in Ihr Layout oder Ihre Seitendatei:

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

Dadurch werden automatisch die richtigen -Tags auf Ihrer Seite generiert. Next.js erledigt den Rest.

Next.js App Router – Dynamische Metadaten

Für dynamische Seiten (Blogbeiträge, Produktseiten) verwenden Sie generateMetadata():

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Dynamische OG-Bilder mit @vercel/og

Für benutzerdefinierte OG-Bilder (mit Ihren Markenfarben, Beitragstiteln usw.) verwenden Sie @vercel/og:

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Verweisen Sie dann in Ihren Metadaten auf diese API-Route:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js Seiten-Router

Wenn Sie den älteren Pages Router verwenden, verwenden Sie next/head oder das Paket next-seo:

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

Oder verwenden Sie next-seo für eine sauberere API:

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

Quick-Fix-Checkliste

  1. Verwenden Sie die Metadaten-API für statische Seiten
  2. Verwenden Sie generateMetadata() für dynamische Seiten
  3. Legen Sie die Eigenschaften openGraph und twitter fest
  4. Verwenden Sie @vercel/og für dynamische OG-Bilder
  5. Testen Sie mit Proovd, um dies auf allen Plattformen zu überprüfen

Häufig gestellte Fragen

Rendert Next.js automatisch OG-Tags im HTML?

Ja. Next.js fügt die Metadaten als -Tags in den vom Server gerenderten HTML-Code ein, sodass Crawler sie ohne JavaScript sehen.

Kann ich dynamische OG-Bilder mit Vercel Edge Functions verwenden?

Ja. @vercel/og läuft auf Vercel Edge und generiert Bilder im laufenden Betrieb. Auf die Bild-URL wird in Ihren Metadaten verwiesen, und Plattformen rufen sie ab, wenn sie Ihre Seite crawlen.

Verwandte Artikel

Überprüfen Sie Ihre Next.js OG-Tags auf allen Plattformen

Überprüfen Sie Ihre Open Graph-Tags kostenlos mit Proovd – fügen Sie eine URL ein und sehen Sie sich die Vorschau auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit an.