Open Graph Meta Tag Generator

Konfiguration

Erstelle den Titel, die Beschreibung, die URL und das Vorschaubild, die von sozialen Plattformen verwendet werden, wenn deine Seite geteilt wird.

Seitentitel

Seitenbeschreibung

Kanonische Seiten-URL

OG-Bild-URL

Best Practice: Verwende ein öffentliches Bild im Format 1200×630, damit die Vorschau das korrekte Open-Graph-Verhältnis beibehält.

Live-Vorschau

Diese Vorschau behält ein festes Open-Graph-Bildverhältnis bei und verhindert, dass zu langer Text das Layout der Karte zerstört.

1200 × 630

Füge ein 1200×630 Bild hinzu

Füge eine öffentliche Bild-URL ein, um zu sehen, wie das OG-Bild erscheinen wird.

example.com/deine-seite

Dein Seitentitel wird hier angezeigt

Deine Beschreibung wird hier angezeigt. Halte sie nützlich, spezifisch und leicht verständlich, bevor jemand darauf klickt.

Code

Füge diesen Code in den head-Bereich deiner Seite ein.

<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Teile dieses Tool mit deinen Freunden!

Praktischer Leitfaden

Gestalte die Link-Vorschau, bevor Leute deine Seite überhaupt besuchen

Open Graph ist nem nur ein technisches SEO-Detail. Es steuert den ersten Eindruck deiner Seite, wenn sie in einem Feed, einer Nachricht, einer Community, einem Arbeitsbereich oder einem Gruppenchat geteilt wird. Eine starke Vorschau erklärt die Seite schnell, wirkt vertrauenswürdig und gibt Nutzern einen klaren Grund zum Klicken.

OG Image

Mache die Freigabekarte unübersehbar

Nutze einen klaren Titel, einfache visuelle Elemente und sichere Abstände.

Betrachte dein OG-Bild als eine Mini-Landingpage. Es sollte auch dann noch Sinn ergeben, wenn es zugeschnitten, komprimiert oder auf einem kleinen Bildschirm angezeigt wird.

1. Nutzer teilt deine URL

Jemand fügt deinen Link bei Facebook, LinkedIn, Slack, Discord, Messenger oder einer anderen App ein.

2. Plattform liest deine Seite

Der Crawler überprüft den Kopfbereich deiner Seite und extrahiert den Open-Graph-Titel, die Beschreibung, die URL und das Bild.

3. Vorschaukarte erscheint

Die Plattform erstellt eine Karte. Wenn deine Tags schwach sind, kann die Vorschau fehlerhaft, zufällig oder langweilig aussehen.

Die Tags, auf die es wirklich ankommt

Du musst Open Graph nem unnötig kompliziert machen. Die meisten Seiten benötigen nur wenige starke Tags, die klar erklären, was die Seite ist und wie sie beim Teilen aussehen soll.

og:type

Definiert den Inhaltstyp. Für die meisten normalen Webseiten ist „website“ der richtige Wert.

og:title

Steuert die Überschrift der Vorschaukarte. Sie sollte spezifisch sein, nem nur dein Markenname.

og:description

Steuert den begleitenden Text. Nutze ihn, um den Nutzen oder Kontext der Seite zu erklären.

og:url

Definiert die kanonische Seiten-URL. Verwende die saubere finale URL, nem eine zufällige Tracking-URL.

og:image

Steuert das primäre visuelle Element. Dies ist oft der Hauptgrund, warum ein geteilter Link professionell oder unfertig wirkt.

og:image:width / height

Teilt Crawlern die erwarteten Bildabmessungen mit. 1200×630 hilft Plattformen, das Layout schneller zu verstehen.

OG-Bild-Regel

1200×630

1.91:1 Querformat-Verhältnis

Verwende 1200×630 für ein sicheres, hochwertiges Open-Graph-Bild.

Halte wichtige Texte und Logos von den Rändern fern, da Plattformen Vorschauen zuschneiden können.

Vermeide es, winzige Logos als gesamtes Bild zu verwenden. Das Bild sollte das Thema der Seite schnell vermitteln.

Verwende eine öffentliche Bild-URL. Wenn der Crawler nem darauf zugreifen kann, zeigt die Vorschau möglicherweise kein Bild an.

Fehler, die Vorschauen billig wirken lassen

Gleicher Titel auf jeder Seite

Wenn jede Seite denselben Titel nutzt, können Nutzer nem erkennen, was sie öffnen. Gib wichtigen Seiten ihren eigenen Titel.

Beschreibung sagt nichts Nützliches aus

Texte wie „Willkommen auf unserer Website“ verschwenden die Vorschau. Sag den Leuten, was sie lernen, bekommen oder lösen werden.

Falsches Bildverhältnis

Quadratische, winzige oder schlecht zugeschnittene Bilder können dazu führen, dass sich dein Link fehlerhaft anfühlt. Nutze ein OG-Bild im Querformat, das in die Karte passt.

Wo diese Vorschau verwendet wird

Facebook

Facebook nutzt Open-Graph-Daten intensiv für geteilte Links und reichhaltige Vorschaukarten.

LinkedIn nutzt deinen OG-Titel, deine Beschreibung, dein Bild und deine URL, um professionell aussehende Beitrags-Vorschauen zu erstellen.

Chat apps

Viele Chat-Apps nutzen Open-Graph-Tags, um eine Vorschau anzuzeigen, bevor Leute sich entscheiden, den Link zu öffnen.

Crawler

Vorschau-Crawler speichern Metadaten oft aggressiv im Cache. Teste wichtige Seiten daher nach der Aktualisierung deiner Tags.

Erstelle für beste Ergebnisse ein einzigartiges OG-Bild und eine eigene Beschreibung für jede wichtige Landingpage, Tool-Seite, jeden Blogpost und jede Produktseite, anstatt überall dieselben generischen Metadaten wiederzuverwenden.