Tools
Open Graph Generator
Der Open-Graph-Generator erstellt vollständige Meta-Tag-Sets für die optimale Darstellung von Webseiten in sozialen Netzwerken. Durch Eingabe von Titel, Beschreibung, Bild-URL und weiteren Parametern werden sofort alle notwendigen og:-Tags sowie Twitter-Card-Tags generiert. Eine integrierte Vorschau zeigt, wie die Seite bei Facebook, Twitter/X und LinkedIn aussehen wird.
Was sind Open-Graph-Meta-Tags?
Open Graph ist ein Protokoll, das 2010 von Facebook entwickelt wurde, um Webseiten in sozialen Netzwerken reich dargestellt werden zu lassen. Wenn eine URL geteilt wird, lesen soziale Netzwerke die og:-Meta-Tags, um Titel, Beschreibung und Vorschaubild für die Linkvorschau zu ermitteln. Ohne Open-Graph-Tags zeigen soziale Netzwerke oft den regulären Seitentitel und einen zufällig gewählten Text, was zu einer wenig ansprechenden Darstellung führt. Neben dem originalen OG-Protokoll gibt es auch Twitter-spezifische Card-Tags (twitter:title, twitter:image usw.).
Wie funktioniert das Tool?
Das Tool bietet Eingabefelder für alle wichtigen Open-Graph-Properties: og:title, og:description, og:image, og:url, og:type, og:site_name und weitere. Parallel werden die entsprechenden Twitter-Card-Tags generiert. Bei jeder Änderung wird der HTML-Code sofort aktualisiert und eine grafische Vorschau der Linkvorschau für verschiedene Plattformen angezeigt. Zusätzlich werden häufige Fehler wie zu lange Beschreibungen, fehlende Pflichtfelder oder ungültige Bildformate hervorgehoben.
Typische Anwendungsfälle
- Generieren vollständiger Open-Graph-Tags für eine neue Landingpage vor dem Launch
- Optimieren der Social-Media-Darstellung einer bestehenden Webseite mit fehlenden Meta-Tags
- Erstellen von Twitter-Card-Tags für einen Blog-Artikel zur besseren Sichtbarkeit auf Twitter/X
- Prüfen und Vervollständigen der Meta-Tags eines Online-Shops für besseres Sharing-Verhalten
Schritt-für-Schritt-Anleitung
- Schritt 1: Trage Titel, Beschreibung und die URL des Vorschaubilds (og:image) in die Felder ein.
- Schritt 2: Gib die kanonische URL der Seite und optional den Seitennamen an.
- Schritt 3: Prüfe die Live-Vorschau, um zu sehen, wie die Linkvorschau bei Facebook und Twitter aussieht.
- Schritt 4: Kopiere den generierten HTML-Code und füge ihn in den head-Bereich deiner Webseite ein.
Tipps & Hinweise
- Das og:image sollte mindestens 1200×630 Pixel groß sein. Facebook empfiehlt ein Seitenverhältnis von 1,91:1 für optimale Darstellung.
- og:title sollte maximal 60–90 Zeichen lang sein, og:description maximal 200 Zeichen, da soziale Netzwerke längere Texte kürzen.
- Nutze den Facebook Sharing Debugger (developers.facebook.com/tools/debug/) um den Cache zu leeren, nachdem du OG-Tags geändert hast.
Häufige Fragen
Was ist der Unterschied zwischen og:title und dem HTML-title-Tag?
Der HTML-title-Tag wird im Browser-Tab und von Suchmaschinen verwendet. og:title wird ausschließlich von sozialen Netzwerken für Linkvorschauen genutzt. Sie können unterschiedliche Werte haben – oft ist der og:title etwas marketingorientierter.
Muss ich sowohl og:- als auch twitter:-Tags setzen?
Twitter liest og:-Tags als Fallback, wenn keine twitter:-Tags vorhanden sind. Für beste Ergebnisse empfiehlt sich aber das Setzen beider Tag-Sets, da Twitter eigene Optimierungen wie große Bilder (summary_large_image) erlaubt.
Warum zeigt LinkedIn noch das alte Vorschaubild, obwohl ich die Tags geändert habe?
LinkedIn und andere soziale Netzwerke cachen Linkvorschauen. LinkedIn bietet den Post Inspector (linkedin.com/post-inspector/) zum Cache-Leeren an. Alternativ hilft das Anhängen eines Query-Parameters an die URL.
Open Graph Generator
Generiere Open-Graph- und Social-Media-Meta-Tags für deine Website – kompatibel mit Facebook, Twitter / X, LinkedIn und mehr.
Tool öffnen