Open-Graph-Generator (Facebook, LinkedIn, X)
Erstelle die Social-Media-Meta-Tags für schöne Link-Vorschauen – mit Live-Vorschau, wie dein Link geteilt aussieht.
Der Open-Graph-Generator erzeugt die Meta-Tags, die Facebook, LinkedIn, WhatsApp, Telegram, Slack und andere Dienste für Link-Vorschauen lesen: og:title, og:description, og:image, og:url, og:type, og:site_name und og:locale. Zusätzlich gibt er Twitter-Card-Tags (X) aus. Eine Vorschau zeigt, wie die geteilte Karte etwa aussieht.
Was ist Open Graph?
Das Open-Graph-Protokoll wurde 2010 von Facebook eingeführt und legt fest, welche Informationen eine Seite bereitstellt, wenn jemand ihren Link teilt. Fast alle Netzwerke und Messenger nutzen es: Facebook, LinkedIn, WhatsApp, Telegram, Slack, Discord und viele mehr. X (Twitter) liest zusätzlich eigene Twitter-Card-Tags, greift aber ersatzweise auf Open Graph zurück. Ohne diese Tags raten die Dienste Titel, Beschreibung und Bild aus dem Seiteninhalt – oft mit unschönem Ergebnis.
Die wichtigsten Tags
| Tag | Bedeutung | Empfehlung |
|---|---|---|
| og:title | Überschrift der Karte | Bis ca. 60–70 Zeichen |
| og:description | Kurzbeschreibung | Bis ca. 150–200 Zeichen |
| og:image | Vorschaubild | 1200 × 630 px, JPG oder PNG, unter 5 MB |
| og:url | Kanonische URL | Wie die Canonical-URL |
| og:type | Inhaltstyp | website oder article |
| og:site_name | Name der Website | Markenname |
| twitter:card | Kartentyp für X | summary_large_image |
So gelingt ein gutes Vorschaubild
- Verwende das Seitenverhältnis 1,91 : 1 (1200 × 630 px), damit nichts abgeschnitten wird.
- Halte wichtige Inhalte in der Mitte, denn Ränder werden je nach Plattform beschnitten.
- Nutze kontrastreiche Motive und wenig Text; kleine Schrift ist im Feed schlecht lesbar.
- Hinterlege ein absolutes https-Bild, das ohne Anmeldung erreichbar ist.
- Setze pro Seite ein eigenes Bild, statt überall dasselbe Logo zu zeigen.
Tipps zum Testen und Aktualisieren
Plattformen speichern Vorschauen zwischen. Änderst du Titel oder Bild, sieht man oft noch die alte Karte. Nutze die Debugger der Netzwerke: der Facebook Sharing Debugger und der LinkedIn Post Inspector laden die Seite neu ein. WhatsApp und Telegram aktualisieren teils erst nach einiger Zeit oder durch Anhängen eines Zusatzparameters (?v=2) an den Link. Prüfe außerdem, dass die Seite nicht durch Robots.txt oder Login gesperrt ist – sonst können die Crawler der Netzwerke die Tags nicht lesen.
Typische Einsatzzwecke für den Open-Graph-Generator
Ein Blogbeitrag soll morgen in LinkedIn und Facebook laufen. Ohne die passenden Tags ziehen die Netzwerke ein beliebiges Bild und einen Text aus der Seite – oft ohne Aussagekraft. Mit dem Tool entstehen Titel, Beschreibung, Bildadresse, Seitentyp und Sprache in einem Durchgang, und die schematische Vorschau zeigt, welcher Teil der Karte sichtbar wird.
Der zweite Fall ist der Online-Shop: Für Produkt- und Kategorieseiten wählst du den passenden Typ und trägst die Adresse des Vorschaubilds ein. Das Feld zum Testen nimmt eine lokale Datei, die dabei im Browser bleibt und nicht hochgeladen wird – praktisch, um Ausschnitt und Format zu prüfen, bevor das Bild auf dem Server liegt. Wer eine Artikelreihe betreibt, hält mit Seitentyp und Sprache die Angaben einheitlich, statt sie pro Beitrag neu zusammenzutragen.
Auch für wiederkehrende Formate lohnt sich das Vorablegen: Eine Unternehmensseite, die werktäglich zwei Beiträge teilt, zieht Titel und Beschreibung aus demselben Muster und tauscht nur den Inhalt aus. So bleibt der Aufbau der Karte über die Monate gleich, und niemand muss raten, welches Bild und welche Schreibweise gelten.
Das kann schiefgehen: typische Fehler
- Die Karte wirkt nicht wie erwartet: Die Anzeige im Tool ist schematisch und zeigt Aufbau und Textlänge, nicht die endgültige Gestaltung von Facebook oder LinkedIn. Maßgeblich ist der geteilte Dienst selbst.
- Die Seiten-URL stimmt noch mit dem Entwurf überein: og:url muss die Adresse sein, unter der die Seite tatsächlich läuft. Ein Tippfehler oder eine alte Domain bleibt in der Karte haften.
- Die Sprache wird nicht ausgewertet: Das Feld erwartet das Open-Graph-Format mit Unterstrich, etwa de_DE. Ein Bindestrich gehört in die hreflang-Angaben, nicht in diesen Tag.
- Titel und Bild stammen vom letzten Beitrag: Die Felder befüllen sich nicht automatisch aus der Seite. Vor dem Teilen Zeile für Zeile gegenlesen und die Werte für den aktuellen Beitrag eintragen.
Wer profitiert – und für wen sich ein anderes Tool besser eignet
Gebaut ist der Generator für alle, die Links teilen und kontrollieren wollen, wie sie ankommen: Social-Media-Verantwortliche, die für ein Unternehmen posten, Blogger und Newsletter-Macher, die Beiträge weitergeben, sowie Shops und Agenturen, die Produktseiten in Messenger-Diensten vorstellen. Auch Entwicklerinnen und Entwickler nutzen ihn, um Testwerte für neue Vorlagen zu haben, ohne jede Zeile selbst zu schreiben. PR-Verantwortliche setzen ihn ein, wenn ein Pressebeitrag in Messenger-Diensten zirkuliert und der erste Eindruck der Karte über den Klick entscheidet.
Der Open-Graph-Generator liefert dabei nur die Tags für das Teilen. Für die Darstellung in den Google-Suchergebnissen brauchst du andere Tags, sie entstehen mit dem SERP-Snippet-Vorschau. Der übrige Kopfbereich der Seite kommt aus dem Meta-Tag-Generator, und ein Bild in der passenden Größe erzeugst du mit dem Bild-Verkleinern.
Datenschutz & Prüfung: Dieses Tool arbeitet vollständig lokal in deinem Browser – Eingaben und Dateien werden nicht hochgeladen oder gespeichert. Funktion geprüft: Oktober 2026.
Passende Tools
Meta-Tag-Generator
Meta-Tags für Titel, Beschreibung, Robots, Canonical und Viewport erzeugen – mit Längen-Check.
Zum Tool Web & CodeSERP-Snippet-Vorschau (Google)
So sieht dein Suchergebnis bei Google aus: Vorschau von Titel und Beschreibung mit Pixel-Längenprüfung.
Zum Tool MedienBild verkleinern
Bilder proportional verkleinern – Breite/Höhe einstellen, Qualität behalten.
Zum ToolHäufige Fragen
Was sind Open-Graph-Tags?
Meta-Tags im Seiten-Head, die Titel, Beschreibung und Bild für geteilte Links festlegen (Facebook, LinkedIn, WhatsApp und andere).
Welche Bildgröße brauche ich?
1200 × 630 Pixel (Seitenverhältnis 1,91:1), JPG oder PNG, möglichst unter 1 MB.
Brauche ich zusätzlich Twitter-Card-Tags?
X liest auch Open Graph, aber twitter:card steuert die Kartenform (klein oder groß). Für die große Karte ergänze twitter:card=summary_large_image.
Warum sehe ich noch das alte Vorschaubild?
Die Netzwerke cachen Vorschauen. Aktualisiere sie im Facebook Sharing Debugger oder LinkedIn Post Inspector.
Was ist og:type?
Der Inhaltstyp: website für Startseiten, article für Beiträge, product für Produkte.
Werden meine Daten hochgeladen?
Nein, der Code wird lokal erzeugt. Nur das Vorschaubild wird von seiner URL in deinem Browser geladen.
Alle Tools an einem Ort
Über 100 Rechner für Alltag, Mathematik, Finanzen und mehr – kostenlos, ohne Anmeldung und mit sichtbarem Rechenweg.