Open Graph Prüfer

Vorschau und Validierung von Open Graph Meta-Tags für das Teilen in sozialen Netzwerken durch Überprüfung einer Live-URL oder von eingefügtem HTML. Überprüfen Sie og:title, og:description, og:image, kanonische Links, Twitter-Fallbacks, doppelte Tags, Redirect-Verhalten und häufige Probleme bei der Vorschau, die Facebook, LinkedIn, Slack, Discord und Messaging-Apps betreffen.

Open Graph Prüfer

Social Card QA

Prüfen Sie die Metadaten, die entscheiden, wie eine URL aussieht, wenn jemand sie auf Facebook, LinkedIn, Slack, Discord, iMessage, X oder anderen Plattformen teilt. Sie können eine Live-URL nach dem Deployment untersuchen oder HTML während der Staging-Phase einfügen, um fehlende og:*-Tags vor der Veröffentlichung zu finden.

Schnellbeispiele

Quell-Konfiguration

Der Live-URL-Modus prüft, was Crawler aktuell abrufen können. Der Modus für eingefügtes HTML ist nützlich vor dem Start, in einem CMS oder wenn Sie servergerendertes Head-Markup validieren möchten, ohne es zu veröffentlichen.

Prüfmodus Nutzen Sie den Live-URL-Modus für das Produktions-QA. Nutzen Sie den Modus für eingefügtes HTML für Staging oder Template-Arbeiten.

URL oder Referenz-URL Im Live-URL-Modus ist dies die abzurufende Seite. Im Modus für eingefügtes HTML dient dies als optionale Basis-URL zur Auflösung relativer kanonischer Pfade oder Bildpfade.

HTML-Quelle

Fügen Sie das vollständige HTML oder zumindest den <head>-Bereich ein, der Ihre Social-Metadaten enthält.

Eingefügtes HTML Der Prüfer liest den reinen Quellcode. JavaScript, das Tags nach dem Laden der Seite einfügt, kann bei echten Crawlern dennoch scheitern.

Ergebnisdetails erscheinen unten im Audit-Bericht und in der Vorschaukarte. Der Ergebnisbereich wird serverseitig gerendert, sodass die Ausgabe auch ohne reine Frontend-Berechnungen funktioniert.

\\n' } }; function setValue(id, value) { var el = document.getElementById(id); if (el) { el.value = value; } } function syncMode() { var modeField = document.getElementById('id_mode'); var pastePanel = document.getElementById('ogc-paste-panel'); var hint = document.getElementById('ogc-url-hint'); var mode = modeField ? modeField.value : 'fetch'; if (pastePanel) { pastePanel.classList.toggle('is-visible', mode === 'paste'); } if (hint) { hint.textContent = mode === 'paste' ? 'Optional, aber hilfreich. Wenn Ihr eingefügtes Markup relative URLs verwendet, ermöglicht diese Basis-URL dem Prüfer, kanonische und Bildpfade aufzulösen.' : 'Geben Sie die öffentliche URL genau so ein, wie Nutzer oder Kampagnen sie teilen werden. Weiterleitungen und die final abgerufene URL werden im Bericht angezeigt.'; } } function applyExample(key) { var example = examples[key]; if (!example) { return; } setValue('id_mode', example.mode); setValue('id_page_url', example.page_url); setValue('id_html_source', example.html_source); document.querySelectorAll('.ogc-example-btn').forEach(function (btn) { btn.classList.toggle('is-active', btn.getAttribute('data-example') === key); }); syncMode(); } document.addEventListener('DOMContentLoaded', function () { var modeField = document.getElementById('id_mode'); if (modeField) { modeField.addEventListener('change', syncMode); } document.querySelectorAll('.ogc-example-btn').forEach(function (btn) { btn.addEventListener('click', function () { applyExample(btn.getAttribute('data-example')); }); }); syncMode(); }); })();

Embed Open Graph Prüfer Widget

Open Graph Prüfer

Ein Open Graph Prüfer hilft Ihnen dabei, genau die Metadaten zu verifizieren, die steuern, wie eine Seite erscheint, wenn jemand einen Link in sozialen Feeds, Chat-Apps, E-Mail-Vorschauen oder Kollaborations-Tools teilt. Anstatt sich darauf zu verlassen, welchen Titel, Textauszug oder welches Bild eine Plattform aus dem Textkörper errät, geben Open Graph Tags den Crawlern klare Anweisungen: welche Schlagzeile angezeigt werden soll, welche Zusammenfassung erscheinen soll, welches Bild abgerufen werden soll, welche kanonische URL mit dem Teilen verknüpft werden soll und welche Art von Inhalt die Seite repräsentiert. Das ist wichtig für SEO- und GEO-Workflows, da moderne Suchsysteme oft dieselben Signale auf Seitenebene wiederverwenden, wenn sie Vorschauen, Link-Karten, Zusammenfassungen oder Quellenangaben generieren.

Anwendung

Wählen Sie eine Quelle. Nutzen Sie den Live-URL-Modus, wenn Sie testen möchten, was ein Crawler aktuell von einer öffentlichen Seite abrufen kann, oder wechseln Sie zum Modus für eingefügtes HTML, wenn Sie das Markup vor dem Launch validieren.
Geben Sie die URL oder das HTML ein. Fügen Sie die exakte URL ein, die Nutzer voraussichtlich teilen werden, oder fügen Sie das Seiten-HTML mit intaktem Head-Bereich ein, damit der Prüfer Open Graph-, Twitter- und kanonische Tags lesen kann.
Führen Sie den Prüfer aus. Überprüfen Sie nach Abschluss des Scans die Vorschaukarte, Warnungen zu fehlenden Feldern, Funde zu doppelten Tags, Hinweise zu Weiterleitungen und die Feldvergleichstabelle.
Korrigieren Sie die finale Quelle vor dem Teilen. Aktualisieren Sie die Seite so, dass die serverseitig gerenderte Antwort einen klaren Satz von Tags liefert, und prüfen Sie sie erneut, bevor Sie den Link in Kampagnen, Social-Media-Posts, Newslettern oder internen Chat-Tools veröffentlichen.

Was der Prüfer bewertet

Signal	Warum es wichtig ist	Typisches Problem
`og:title`	Gibt Crawlern eine explizite Überschrift zum Teilen vor, anstatt den HTML-Titel oder eine zufällige Überschrift zu verwenden.	Sehr kurze Titel wirken generisch, während lange Titel in Messaging-Vorschauen oft abgeschnitten werden.
`og:description`	Steuert den begleitenden Text, der die Seite nach dem Titel erklärt.	Dünne Beschreibungen verschwenden Vorschauraum oder lassen Plattformen Fragmente aus dem Fließtext zusammenstellen.
`og:image`	Bestimmt in der Regel das Vorschaubild oder Hero-Bild in der Karte.	Relative URLs, HTTP-Bilder oder fehlende Bilder führen zu inkonsistenten Vorschauen in verschiedenen Apps.
`og:url` und Kanonisch	Helfen Plattformen dabei, geteilte Inhalte zu konsolidieren und die bevorzugte Seiten-URL konsistent zu halten.	Weiterleitungen oder falsch abgestimmte URLs splitten Engagement-Zahlen und verwirren Indexierungssignale.
`twitter:card`	Verbessert das Fallback-Verhalten auf X und einigen Embed-Diensten, selbst wenn Open Graph vorhanden ist.	Teams nehmen an, dass OG allein ausreicht, und erhalten dann auf einigen Oberflächen eine kleinere oder weniger konsistente Karte.

Häufige Fehler und Interpretationstipps

Eine Seite kann im Browser korrekt aussehen und dennoch eine schwache Social-Vorschau erzeugen, wenn die Metadaten dupliziert sind, spät mit JavaScript injiziert wurden oder mit der falschen kanonischen URL verknüpft sind. Ein häufiger Fehler ist das Veröffentlichen von og:url für eine nicht-kanonische oder parametrisierte Version der Seite, während in Kampagnen oder Newslettern eine andere URL geteilt wird. Ein weiterer Fehler ist der Verlass auf relative Bildpfade, die zwar im Browser funktionieren, für Crawler aber Unklarheit schaffen. Doppelte og:title- oder og:description-Tags sind ebenfalls riskant, da Plattformen je nach Abrufmethode den ersten Wert, den letzten Wert oder einen älteren Cache-Wert wählen könnten.

Wenn der Prüfer eine Weiterleitung meldet, vergleichen Sie die angeforderte URL, die final abgerufene URL, den kanonischen Link und og:url zusammen. Diese vier Werte sollten normalerweise die gleiche bevorzugte Seite beschreiben. Falls nicht, korrigieren Sie die Seite vor einer Werbeaktion oder einem Produktlaunch, damit Social Shares, Analytics und Indexierungssignale alle auf eine einzige stabile URL zeigen.

Anwendungsfälle

Dieses Tool ist praktisch für Redaktionsteams, die Artikelfreigaben vor der Veröffentlichung prüfen, E-Commerce-Teams, die Produktkarten vor einer Kampagne validieren, und Entwickler, die SSR-Ausgaben nach einer Framework-Migration überprüfen. Es ist auch nützlich beim Debugging, warum Slack, Discord, LinkedIn oder Facebook ein veraltetes Vorschaubild, einen Homepage-Titel oder ein generisches Ersatzbild anzeigen. In diesen Fällen liegt das Problem oft nicht an der Plattform selbst, sondern an den Metadaten, die der abgerufene Seitenquellcode bereitstellt.

Da viele KI-Antwortsysteme und Vorschau-Systeme Seitenmetadaten wiederverwenden, können kontrollierte Open Graph Tags auch die Art und Weise verbessern, wie Links außerhalb traditioneller sozialer Medien zusammengefasst oder zitiert werden. Die Tags sind für sich genommen kein Ranking-Faktor, aber sie sind Teil der Verpackung der Seitenqualität, die die Klickrate und das Vertrauen beim Teilen beeinflusst.

FAQ

Wie teste ich Open Graph Tags, bevor ich einen Link in sozialen Medien poste?

Rufen Sie die Live-URL ab oder fügen Sie den finalen HTML-Quellcode ein. Bestätigen Sie dann, dass og:title, og:description, og:image, og:url und og:type im Quellcode vorhanden sind, den ein Crawler tatsächlich empfängt. Vergleichen Sie danach die OG-URL mit dem kanonischen Link und stellen Sie sicher, dass die Seite nicht an einen unerwarteten Ort weiterleitet.

Warum zeigt meine Link-Vorschau das falsche Bild oder den falschen Titel an?

Die üblichen Ursachen sind fehlende Open Graph Tags, doppelte Werte, relative Bildpfade, ein veralteter Cache auf der sozialen Plattform oder eine Diskrepanz zwischen der geteilten URL und der kanonischen oder weitergeleiteten Seite. Wenn der finale Quellcode nicht einen eindeutigen Satz von Feldern liefert, raten Vorschau-Systeme oft.

Benötige ich Twitter-Tags, wenn ich bereits Open Graph Tags habe?

Open Graph deckt viele Plattformen ab, aber twitter:card und optionale Twitter-spezifische Titel-, Beschreibungs- oder Bildfelder verbessern dennoch das Fallback-Verhalten auf X und bei einigen Tools, die diese Tags direkt lesen. Es ist eine kleine Ergänzung, die meist die Konsistenz erhöht.

Können durch JavaScript generierte Meta-Tags die Vorschau beim Teilen in sozialen Netzwerken stören?

Ja. Viele Crawler untersuchen die initiale HTML-Antwort und verhalten sich nicht wie ein vollständiger Browser, der auf das clientseitige Rendering wartet. Wenn Ihr Framework Tags erst nach dem Laden injiziert, sieht ein Nutzer im Browser vielleicht die richtige Seite, während ein Crawler noch fehlende oder veraltete Metadaten sieht.

Zitieren Sie diesen Inhalt, diese Seite oder dieses Tool als:

"Open Graph Prüfer" unter https://MiniWebtool.com/de/open-graph-pruefer/ von MiniWebtool, https://MiniWebtool.com/

vom miniwebtool-Team. Aktualisiert: 09.03.2026

Open Graph Prüfer

Quell-Konfiguration

HTML-Quelle

Open Graph Prüfer

Anwendung

Was der Prüfer bewertet

Häufige Fehler und Interpretationstipps

Anwendungsfälle

FAQ

Wie teste ich Open Graph Tags, bevor ich einen Link in sozialen Medien poste?

Warum zeigt meine Link-Vorschau das falsche Bild oder den falschen Titel an?

Benötige ich Twitter-Tags, wenn ich bereits Open Graph Tags habe?

Können durch JavaScript generierte Meta-Tags die Vorschau beim Teilen in sozialen Netzwerken stören?

Webmaster-Tools:

Ausgewählte Werkzeuge: