Open-Graph-Generator
Erzeuge Open-Graph-Tags mit einer Live-Social-Preview-Karte
100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.
Über dieses Tool
Wenn jemand deinen Link teilt, holt die Plattform die Seite und baut eine Preview-Karte aus ihren Open-Graph-Tags. Ohne sie rät sie - greift, welchen Text und welches Bild sie findet - und das Ergebnis ist meist ein abgeschnittener Satz neben deinem Logo oder, schlimmer, gar nichts. Da diese Karte das ist, was Leute in einem Feed wirklich sehen, bestimmt sie mehr, ob jemand klickt, als der Seitentitel. Vier Tags tragen das Gewicht: og:title, og:description, og:image und og:url. Das Bild zählt am meisten, weil es den Großteil der Karte einnimmt; 1200×630 ist die Zielgröße, und es muss eine absolute URL sein, da Scraper relative Pfade nicht auflösen. Das Verhalten, das Leute überrascht, ist Caching. Facebook und LinkedIn cachen, was sie beim ersten Mal geholt haben, Tags zu fixen behebt also einen schon geteilten Link nicht, bis du den Cache über ihre eigenen Debugging-Tools leerst. Tags werden in deinem Browser erzeugt.
Prüfe eine Seite, bevor du sie veröffentlichst
- 1Die Seite auslesenZieh Überschriften, Links, Bilder und Metadaten.Öffnen
- 2Meta-Tags prüfenTitel und Beschreibung so, wie Suchmaschinen sie lesen.Öffnen
- 3Die Share-Karte vorschauenSieh, wie sie in Social Media aussieht.Du bist hier
- 4Screenshot machenSpeichere eine Aufnahme der fertigen Seite für dein Archiv.Öffnen
So verwendest du dieses Tool
- Titel und Description eingebenDie können von deinem SEO-Titel und deiner Meta-Description abweichen - schreib sie für jemanden, der einen Feed scrollt.
- Eine absolute Bild-URL hinzufügen1200×630, und die volle URL inklusive https://. Relative Pfade werden von Scrapern nicht aufgelöst.
- Die kanonische og:url setzenDie Adresse, auf die der Share zeigen soll, ohne Tracking-Parameter.
- Die Tags in deinen Head einfügen und testenNutze den Plattform-Debugger zum Bestätigen und zum Leeren jeder gecachten Version.
Warum es nutzen
- Live-Vorschau, sodass du die Karte vor dem Veröffentlichen siehst, nicht nachdem jemand sie geteilt hat.
- Erzeugt korrekte Syntax, wo ein vertippter Property-Name still nichts tut.
- Deckt die vier Tags ab, die wirklich bestimmen, wie die Karte rendert.
- Läuft in deinem Browser ohne Konto.
- Die Ausgabe ist schlichtes HTML für jede Site oder jedes Framework.
Häufige Anwendungen
- Sharing-Previews für eine neue Seite oder einen Artikel einrichten.
- Seiten korrigieren, die als leere oder unattraktive Karte geteilt werden.
- Einer Landingpage ein Share-Bild geben, das für Social zugeschnitten ist, statt das Logo wiederzuverwenden.
- Previews über eine Site standardisieren, auf der jede Seite aktuell rät.
- Einen Launch vorbereiten, bei dem die geteilte Karte das Erste ist, was die meisten Leute sehen.
Tipps für bessere Ergebnisse
- Nutze 1200×630. Kleinere Bilder rendern als kleines Thumbnail neben Text statt als volle Karte, was spürbar schlechter performt.
- Nutze immer absolute Bild-URLs. Ein relativer Pfad ist der häufigste Grund, warum ein Bild nicht erscheint.
- Teste mit dem Plattform-Debugger vor dem Launch und nutze ihn, um den Cache zu leeren, wenn du Tags auf einer schon geteilten URL änderst.
- Schreib die og:description für einen Feed, nicht für die Suche. Es ist ein Hook, keine Zusammenfassung.
- Twitter/X liest Open Graph als Fallback, aber eigene Card-Tags geben mehr Kontrolle - der Twitter-Card-Generator deckt die ab.
Fehler, die du vermeiden solltest
- Einen relativen Bildpfad zu nutzen, sodass in der Karte gar kein Bild erscheint.
- Tags zu ändern und anzunehmen, der Fix sei live - die Plattform liefert ihre gecachte Kopie, bis du sie leerst.
- Ein zu kleines oder falsch geformtes Bild zu nutzen, das die Karte auf ein Thumbnail-Layout herabstuft.
- og:url wegzulassen, sodass Tracking-Parameter-Varianten als getrennte URLs geteilt und gezählt werden.
- Die SEO-Meta-Description wörtlich wiederzuverwenden, die sich als Such-Snippet liest statt als etwas, das im Feed klickenswert ist.
Häufig gestellte Fragen
Ohne sie fallen Plattformen oft darauf zurück, Titel/Bild aus dem Seiteninhalt zu raten, was eine inkonsistente oder unattraktive Preview erzeugen kann - explizite Open-Graph-Tags geben dir volle Kontrolle darüber, wie deine geteilten Links aussehen.
Eine gängige Empfehlung ist 1200x630 Pixel, die auf den meisten Plattformen ohne ungeschicktes Cropping gut angezeigt wird - die Live-Vorschau in diesem Tool hilft dir zu prüfen, wie dein gewähltes Bild wirklich rendert.
Twitter/X fällt auf Open Graph zurück, wenn eigene Tags fehlen, du bekommst also so oder so eine vernünftige Karte. Für volle Kontrolle - besonders das Large-Image-Card-Format - füge eigene Twitter-Card-Tags mit dem Twitter-Card-Generator hinzu.
Fast immer eine relative Bild-URL. Scraper lösen relative Pfade nicht auf, og:image muss also eine vollständige Adresse inklusive https:// sein. Danach prüfe, dass das Bild öffentlich erreichbar und nicht von robots.txt blockiert ist.
Weil Plattformen cachen, was sie beim ersten Teilen einer URL geholt haben. Facebooks Sharing Debugger und LinkedIns Post Inspector scrapen beide auf Anfrage erneut - der einzige Weg, einen schon gecachten Link zu refreshen.
Nicht unbedingt. Eine Meta-Description ist für ein Suchergebnis geschrieben; eine og:description für jemanden, der einen Feed scrollt. Die zweite kann kürzer, knackiger und weniger wörtlich sein, ohne SEO zu schaden.
Ja. Open Graph Generator ist für die normale Nutzung kostenlos, ohne Konto, und ToolBox setzt kein Wasserzeichen auf dein Ergebnis.
Die meisten Tools in dieser Kategorie laufen in deinem Browser, sodass die Datei auf deinem Gerät bleibt. Wenn ein Tool einen temporären Server-Auftrag braucht, werden Dateien nur für diesen Auftrag verarbeitet und nicht als dauerhaftes Archiv gespeichert.
Andere suchen auch nach
- open graph tags generator
- og image größe 1200x630
- facebook link preview funktioniert nicht
- social share preview tester
- og tags für linkedin
- facebook link cache leeren
- warum ist meine link preview leer