Der Open-Graph-Generator erstellt aus Titel, Beschreibung, Ziel-URL, Bild-URL und Seitentyp fertigen HTML-Code für Open-Graph- und Twitter-Card-Meta-Tags. Diese Tags bestimmen, wie ein Link aussieht, wenn er bei Facebook, LinkedIn, WhatsApp, Slack oder auf X geteilt wird – mit Titel, Text und Vorschaubild statt einer nackten URL. Du füllst die Felder aus und kopierst den fertigen Code in den Kopfbereich deiner Seite.
So funktioniert der Open-Graph-Generator
Trag Titel, Beschreibung, URL und Bild-URL deiner Seite ein und wähle bei Typ zwischen website, article und product. Der HTML-Code im Ausgabebereich aktualisiert sich bei jeder Eingabe automatisch, ein Klick auf „Kopieren“ übernimmt ihn in die Zwischenablage.
Eine Pflichtfeld-Prüfung gibt es nicht: Bleibt ein Feld leer, erscheint im Code einfach ein leeres content="" an dieser Stelle statt einer Fehlermeldung. Sonderzeichen wandelt der Generator dagegen automatisch in HTML-Entities um: & wird zu &, " zu ", < zu < und > zu > – so bleibt der Code gültiges HTML, selbst wenn dein Titel eines dieser Zeichen enthält.
Welche Meta-Tags werden erzeugt
Aus deinen fünf Eingaben entstehen neun Meta-Tags: fünf mit dem Präfix og: – og:type, og:title, og:description, og:url und og:image – nach dem Open-Graph-Protokoll, dazu vier mit dem Präfix twitter: – twitter:card, twitter:title, twitter:description und twitter:image.
Open-Graph-Tags lesen unter anderem Facebook, LinkedIn, WhatsApp, Slack und Discord für die Linkvorschau. Den Wert von twitter:card setzt der Generator fest auf summary_large_image, unabhängig vom gewählten Typ – so zeigt X ein großes Vorschaubild statt einer kleinen Miniatur.
Beispiel
Trägst du als Titel Rezepte für Herbst & Winter, als Beschreibung Wärmende Gerichte in 30 Minuten. und als Typ article ein, erzeugt der Generator unter anderem diese Zeilen:
<meta property="og:type" content="article"><meta property="og:title" content="Rezepte für Herbst & Winter"><meta name="twitter:card" content="summary_large_image">
Das Et-Zeichen aus dem Titel wird darin automatisch zu &, damit die Zeile gültiges HTML bleibt. Insgesamt liefert das Tool fünf og:-Zeilen in der Reihenfolge Typ, Titel, Beschreibung, URL, Bild sowie vier twitter:-Zeilen in der Reihenfolge Card, Titel, Beschreibung, Bild.
Wofür brauche ich das?
- Blogartikel und Landingpages: Beim Teilen in sozialen Netzwerken erscheinen Titel, Beschreibungstext und Vorschaubild statt einer nackten URL – das wirkt vertrauenswürdiger und wird eher angeklickt.
- Eigene Websites ohne CMS: Wer eine Seite von Hand oder mit einem einfachen Static-Site-Generator baut, bekommt Meta-Tags nicht automatisch – hier trägst du sie selbst in den
<head>ein. - Produktseiten: Mit Typ
productweisen Onlineshops darauf hin, dass ein geteilter Link zu einem einzelnen Produkt statt zu einem redaktionellen Artikel gehört. - Vorschau vorab kontrollieren: Anhand des generierten Codes lässt sich nachvollziehen, welcher Titel, Text und welches Bild später beim Teilen angezeigt werden.
Häufige Fragen
Werden meine Eingaben gespeichert?
Wo genau füge ich den erzeugten Code ein?
<head>-Bereich deiner HTML-Seite, am besten direkt vor dem schließenden </head>-Tag.Welche Dienste lesen die og:- und twitter:-Tags?
Welche Bildgröße sollte ich für og:image verwenden?
og:image ein Seitenverhältnis von etwa 1,91:1 bewährt, häufig 1200 × 630 Pixel, damit das Bild bei den meisten Diensten groß und unbeschnitten erscheint.Warum steht bei twitter:card immer summary_large_image?
summary_large_image zeigt ein großes Vorschaubild an; einen anderen Kartentyp stellt dieses Tool nicht zur Auswahl.