Erstellen und Vorschauen von Open Graph Meta-Tags

✅ Der OpenGraph-Tester ermöglicht es, Metatags an einem Ort mit nur einem Klick zu prüfen und zu generieren

Versuchen Sie: https://opengraph.dev
Funktioniert für Facebook, Whatsapp, Twitter, LinkedIn, Wordpress...
Hero Image

Optimieren Sie Ihre Website mit Open Graph-Tags

Entdecken Sie, wie das Open Graph-Protokoll das Teilen in sozialen Medien verbessert

Was ist Open Graph (OG)?

Das Open Graph-Protokoll, allgemein bekannt als OGP, ist entscheidend dafür, wie der Inhalt Ihrer Website in sozialen Netzwerken erscheint. Die Implementierung von Open Graph-Tags stellt sicher, dass spezifische Bilder, Titel und Beschreibungen angezeigt werden, wenn Ihr Inhalt online geteilt wird.

Optimale Open Graph Bildgröße

Um die Wirkung auf hochauflösenden Geräten zu maximieren, verwenden Sie Open Graph-Bilder, die mindestens 1200 Pixel breit sind. Facebook, ein Führer im Bereich Social Media, empfiehlt Bilder im Verhältnis von 1.91:1, um das gesamte Bild im Feed ohne Beschneidung anzuzeigen.

Einfache Integration von Open Graph-Tags

Integrieren Sie Open Graph-Tags mühelos mit Tools wie OpenGraph.dev. Erzeugen und fügen Sie die Meta-Tags in den 'head'-Bereich Ihrer Website ein, um die Sichtbarkeit Ihres Standorts in den sozialen Medien zu erhöhen.

Die Bedeutung von Open Graph im SEO

Optimierte Open Graph-Tags erhöhen signifikant die Wahrscheinlichkeit, dass Ihr Inhalt in sozialen Medien bemerkt und angeklickt wird, was mehr Traffic auf Ihre Website bringt. Sie sind wesentlich, um Ihren Inhalt in überfüllten Social-Media-Feeds hervorzuheben.

Was sind Open Graph-Tags?

Open Graph-Tags sind HTML-<meta>-Elemente, die im <head> einer Webseite platziert werden und beschreiben, wie die Seite erscheinen soll, wenn ihre URL anderswo geteilt wird — in einem Facebook-Feed, einem X-Beitrag, einem LinkedIn-Update, einem WhatsApp-Chat, einem Discord-Server, einem iMessage-Thread oder einem Slack-Kanal. Das Open Graph-Protokoll wurde ursprünglich 2010 von Facebook eingeführt und ist seitdem zum De-facto-Standard für Linkvorschauen auf nahezu jeder größeren Plattform geworden. Ein vollständiger Satz von Open Graph-Meta-Tags gibt Ihnen die volle Kontrolle über Titel, Beschreibung, Bild, Typ und kanonische URL, die innerhalb der Rich-Preview-Karte erscheinen — und verwandelt einen einfachen Hyperlink in einen aufmerksamkeitsstarken Ausschnitt, der einen reinen Link in der Klickrate konsequent übertrifft.

Ein minimal funktionsfähiger Satz von Open Graph-Meta-Tags 

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />

Open Graph auf sozialen Plattformen

Fast jedes große soziale Netzwerk und jeder Messenger liest Open Graph-Metadaten, aber jedes wendet eigene Regeln in Bezug auf Bildgröße, Caching und Fallbacks an. Erfüllen Sie die strengste Anforderung, und derselbe Bildsatz funktioniert überall.

Facebook

Der größte Konsument von Open Graph-Daten. Verwendet og:title, og:description und og:image. Das empfohlene Bild ist 1200×630 px mit einem Seitenverhältnis von 1,91:1, damit es im News Feed unbeschnitten angezeigt wird. Der Cache ist aggressiv — verwenden Sie den Sharing Debugger, um nach einer Änderung zu aktualisieren.

X (Twitter)

Greift auf Open Graph-Tags zurück, wenn Twitter Card-Meta fehlen, aber um eine große Vorschaukarte zu erhalten, sollten Sie zusätzlich twitter:card auf summary_large_image und twitter:image setzen. Das Bild muss kleiner als 5 MB und mindestens 300×157 px sein; 1200×630 ist der sichere Standard.

LinkedIn

Liest og:title, og:description, og:image und og:type. Das Bild muss kleiner als 5 MB und mindestens 1200×627 px (Verhältnis 1,91:1) sein. LinkedIn speichert das erste Crawling etwa sieben Tage im Cache — nutzen Sie den Post Inspector, um nach Veröffentlichungsänderungen ein erneutes Abrufen zu erzwingen.

WhatsApp & iMessage

Beide Messenger holen Open Graph-Tags über HTTPS und haben ein strenges Bildgrößen-Budget. WhatsApp schneidet alles über ~300 KB ab, daher sollten Sie das Bild optimieren und og:image:width sowie og:image:height deklarieren, um das Rendering zu beschleunigen. iMessage bevorzugt ein quadratisches 1:1-Bild, wenn verfügbar, also denken Sie daran, beide Verhältnisse über mehrere og:image-Tags bereitzustellen.

Discord, Slack & Telegram

Alle drei rendern Vorschauen aus dem Standardtrio og:title, og:description und og:image. Discord berücksichtigt zusätzlich theme-color für den Akzent der Seitenleiste. Telegram entfernt iframes und JS — stellen Sie sicher, dass Ihre Tags im initialen serverseitig gerenderten HTML vorhanden sind und nicht zur Laufzeit eingefügt werden.

Pinterest & Reddit

Pinterest erweitert Open Graph um article:author und Rich-Pin-Typen. Reddit holt og:title und og:image, wenn ein Link eingereicht wird, und verwendet das Bild als Beitrags-Thumbnail. Beide bevorzugen Hoch- oder quadratische Bilder (2:3 bis 1:1) gegenüber breiten 1,91:1-Bannern.

Open Graph-Meta-Tags zu Ihrem Framework hinzufügen

Fügen Sie diese Snippets in Ihr Projekt ein, um Open Graph-Tags in den gängigsten Stacks zu verdrahten. Jedes Beispiel rendert auf dem Server denselben minimal funktionsfähigen Satz, damit Crawler ihn beim ersten Rendern sehen.

Next.js (App Router)

ts
// app/page.tsx
export const metadata = {
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A short, compelling summary of the page.',
    url: 'https://example.com/article',
    siteName: 'Example',
    images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
    locale: 'en_US',
    type: 'website'
  }
}

Nuxt 3

ts
<script setup lang="ts">
useSeoMeta({
  title: 'Your Page Title',
  description: 'A short, compelling summary of the page.',
  ogTitle: 'Your Page Title',
  ogDescription: 'A short, compelling summary of the page.',
  ogImage: 'https://example.com/preview.png',
  ogUrl: 'https://example.com/article',
  ogType: 'website',
  ogLocale: 'en_US'
})
</script>

Astro

astro
---
const { title, description, image, url } = Astro.props
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:url" content={url} />
  <meta property="og:type" content="website" />
</head>

WordPress

php
// functions.php — works without an SEO plugin
add_action('wp_head', function () {
  if (!is_singular()) return;
  global $post;
  $img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
  printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
  printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
  printf('<meta property="og:image" content="%s" />', esc_url($img));
  printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
  echo '<meta property="og:type" content="article" />';
});

Häufig gestellte Fragen zu Open Graph

Schnelle Antworten auf die Fragen, die uns Entwickler und Content-Teams bei der Implementierung von Open Graph-Meta-Tags am häufigsten stellen.

Helfen Open Graph-Tags beim SEO?
Open Graph-Tags sind in der Google-Suche kein direktes Ranking-Signal, aber sie verbessern indirekte SEO-Ergebnisse spürbar. Ansprechendere Vorschauen führen zu höheren Klickraten, mehr Shares und mehr eingehenden Links — und all das wirkt sich wieder auf das Ranking aus. Sie verdeutlichen Crawlern außerdem den Titel, das Bild und die Sprache einer Seite und verringern die Wahrscheinlichkeit, dass Google ein unpassendes Thumbnail wählt oder einen eigenen Snippet generiert.
Was ist der Unterschied zwischen Open Graph und Twitter Cards?
Open Graph ist der plattformübergreifende Standard. Twitter Cards sind das parallele Format von X mit eigenem twitter:*-Namespace. X greift auf Open Graph zurück, wenn Twitter-spezifische Tags fehlen, daher reicht es für die meisten Websites aus, Open Graph plus eine einzige twitter:card-Deklaration zu veröffentlichen, um die große Bildvorschau zu aktivieren.
Welche Open Graph-Bildgröße wird empfohlen?
1200×630 Pixel (Verhältnis 1,91:1) ist der sichere Standard — er erfüllt Facebook, LinkedIn, große X-Karten, Slack und Discord ohne Beschneidung. Halten Sie die Datei unter 1 MB, damit WhatsApp und iMessage sie laden. Wenn Ihre Zielgruppe stark Pinterest-getrieben ist, liefern Sie zusätzlich ein Hochformatbild mit 1000×1500.
Warum zeigt meine Vorschau nach dem Wechsel immer noch das alte Bild?
Jede große Plattform cached Open Graph-Daten. Facebook, LinkedIn und X aktualisieren jeweils nach unterschiedlichen Intervallen (von Minuten bis zu einer Woche). Nutzen Sie den Sharing Debugger von Facebook, den Post Inspector von LinkedIn und den Card Validator von X, um ein erneutes Crawling zu erzwingen, und fügen Sie eine Cache-Busting-Querystring an og:image an, wenn Sie ein Bild unter derselben URL austauschen.
Benötigen Single-Page-Apps (SPAs) serverseitiges Rendering für Open Graph?
Ja, für nahezu jede soziale Plattform. WhatsApp, LinkedIn, Slack, Discord und Telegram führen beim Crawlen einer URL kein JavaScript aus, sodass nur clientseitig gerenderte Meta-Tags für sie unsichtbar sind. Nutzen Sie SSR (Next.js, Nuxt, Astro), statische Generierung oder einen dedizierten Pre-Rendering-Dienst, damit die Tags in der initialen HTML-Antwort enthalten sind.
Was passiert, wenn eine Seite überhaupt keine Open Graph-Tags hat?
Die Plattform greift auf alles zurück, was sie scrapen kann: den <title>, die meta description und das erste größere Bild, das sie im Dokument findet. Die Ergebnisse sind unvorhersehbar — oft das falsche Bild, ein abgeschnittener Titel oder gar keine Vorschau. Schon das Hinzufügen von drei Tags (og:title, og:description, og:image) eliminiert das Rätselraten.
Sind Open Graph-Tag-Namen case-sensitive?
Ja. Verwenden Sie die genaue Kleinschreibung, wie sie das Protokoll definiert — og:title, nicht OG:Title. Eigenschaftsnamen mit gemischter Groß-/Kleinschreibung werden von den meisten Crawlern stillschweigend ignoriert, was einer der häufigsten Gründe dafür ist, dass eine Vorschau nach einem Refactor plötzlich nicht mehr funktioniert.
Welche Tools kann ich zum Debuggen von Open Graph-Tags verwenden?
Über die Vorschau von OpenGraph.dev hinaus bietet jede Plattform ihren eigenen Validator: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), die X-Cards-Dokumentation unter developer.x.com, den Pinterest Rich Pins Validator und Telegrams @WebpageBot zum Leeren des Caches.