Open-Graph-Meta-Tag-Generator

Open-Graph-Tags sind die kleinen HTML-Schnipsel, die bestimmen, wie deine Seite aussieht, wenn sie auf Facebook, LinkedIn, Slack, Discord oder X (Twitter) geteilt wird. Trage unten Titel, Beschreibung, URL, Bild und ein paar Optionen ein, sieh dir die Live-Vorschau der Share-Karte an und kopiere die generierten <meta>-Tags direkt in den <head> deiner Seite. Alles läuft im Browser — es wird nichts an einen Server gesendet.

Was ist dieses Tool?

Open Graph ist ein ursprünglich von Facebook entwickeltes Protokoll, mit dem jede Webseite sich selbst über eine kleine Menge <meta property="og:...">-Tags im HTML-<head> beschreiben kann. Wenn jemand deinen Link in eine Social-App, einen Chat-Client oder ein Messaging-Tool einfügt, liest diese App die Tags, um die Vorschaukarte zu erstellen — Titel, Beschreibung und Vorschaubild — statt aus dem Seiteninhalt zu raten.

Twitter (X) verwendet einen verwandten, aber eigenen Satz von Tags, <meta name="twitter:...">, um speziell zu steuern, wie ein Link auf der eigenen Plattform aussieht. Die meisten Websites setzen beide: Open-Graph-Tags für breite Kompatibilität und Twitter-Card-Tags, um die Vorschau auf X feinabzustimmen (z. B. ein großes Bild statt einer kleinen Zusammenfassung).

Ohne diese Tags wird bei einem geteilten Link entweder gar keine Vorschau angezeigt, oder die Plattform errät Titel und Bild anhand des rohen Seiteninhalts — oft mit falscher Überschrift, zufälligem Inline-Bild oder gar nichts. Wenn du og:title, og:description und og:image explizit setzt, hast du volle Kontrolle darüber, wie dein Inhalt präsentiert wird, bevor überhaupt jemand klickt.

Warum sollte man es nutzen?

Live-Vorschau — sieh sofort beim Tippen, wie die Share-Karte aussehen wird, noch vor jeder Veröffentlichung.
Erzeugt sowohl Open-Graph-Tags (og:title, og:description, og:image, og:url, og:type, og:site_name) als auch Twitter-Card-Tags in einem Durchgang.
Deckt genau die Felder ab, die Plattformen tatsächlich auslesen: Titel, Beschreibung, kanonische URL, Bild, Seitenname, Inhaltstyp und Twitter-Card-Stil.
Läuft komplett clientseitig — Titel, Beschreibung und URLs verlassen nie deinen Browser.
Kostenlos, ohne Login, ohne Limit — Ergebnis kopieren und in dein HTML einfügen.

Anleitung

Gib den Titel deiner Seite und eine kurze Beschreibung ein (Titel möglichst unter ~60 Zeichen, Beschreibung ~155–160 Zeichen).
Gib die kanonische URL der Seite sowie die absolute URL des Vorschaubilds ein (Bild-URLs müssen vollständig sein, z. B. https://example.com/bild.jpg, kein relativer Pfad).
Optional Seitenname festlegen, einen og:type wählen (website, article, product, profile, video, music) und einen Twitter-Card-Typ auswählen (summary oder summary_large_image).
Prüfe die Live-Vorschaukarte, um sicherzustellen, dass Titel, Beschreibung und Bild gut zusammenpassen.
Klicke auf „Kopieren“ und füge die generierten <meta>-Tags in den <head> deiner Seite ein, direkt vor dem schließenden </head>.

Beispiel

Eingabe

Titel: „10 kostenlose Entwickler-Tools, die du wirklich nutzen wirst“
Beschreibung: „Eine Auswahl browserbasierter Tools für JSON, Regex, UUIDs und mehr — keine Installation nötig.“
URL: https://example.com/blog/dev-tools
Bild: https://example.com/images/dev-tools-cover.jpg

Ausgabe

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Nur ausgefüllte Felder erscheinen im Ergebnis — bleibt der Seitenname leer, entfällt og:site_name einfach in der Ausgabe.

Häufige Fehler, die du vermeiden solltest

og:image komplett fehlt — ohne es zeigen die meisten Plattformen entweder gar kein Vorschaubild oder greifen auf ein zufälliges Bild von der Seite zurück, was meist kaputt oder unprofessionell aussieht.
Ein relativer Bildpfad wie /images/cover.jpg statt einer vollständigen URL wie https://example.com/images/cover.jpg — Social-Crawler können relative Pfade in der Regel nicht auflösen.
Falsches Bildseitenverhältnis — ein quadratisches oder Hochformat-Bild wird unschön zugeschnitten, wenn die Plattform es in das 1,91:1-Querformat zwingt; gestalte dein Share-Bild immer nah an 1200×630.
Titel oder Beschreibungen, die abgeschnitten werden — halte og:title unter ~60 Zeichen und og:description unter ~155–160 Zeichen, damit sie auf den meisten Plattformen nicht mit Auslassungspunkten abgeschnitten werden.
Vergessen, gecachte Vorschauen zu aktualisieren — nach einer Änderung der og-Tags auf einer bereits live geschalteten Seite kann die alte Vorschau im Cache von Facebook oder LinkedIn bestehen bleiben, bis du mit deren Debug-Tools manuell ein erneutes Crawlen erzwingst.

Wo die einzelnen Tags verwendet werden

og:title, og:description und og:image sind die drei Tags, die fast jede Plattform zum Erstellen einer Vorschau ausliest. og:url teilt Crawlern den kanonischen Link mit, dem die Vorschau zugeordnet werden soll — wichtig, wenn derselbe Inhalt über mehrere URLs erreichbar ist. og:site_name zeigt auf manchen Plattformen wie Facebook ein kleines Label (z. B. Publikations- oder Markenname) über dem Titel an.

og:type ändert, welche Art von Objekt die Seite für Crawler darstellt, die das reichhaltigere Open-Graph-Objektmodell unterstützen — article aktiviert zum Beispiel og:article:published_time und og:article:author bei Plattformen, die diese auslesen, auch wenn die meisten Social-Vorschauen diese Zusatzfelder ignorieren und nur das Kerntrio Titel/Beschreibung/Bild nutzen.

twitter:card steuert speziell das Layout auf X: summary zeigt ein kleines quadratisches Vorschaubild neben dem Text, summary_large_image zeigt ein Bild in voller Breite über dem Text — Letzteres ist bei Inhalten mit aussagekräftigem Titelbild fast immer die bessere Wahl.

Häufig gestellte Fragen

Welche Größe sollte mein og:image haben?

1200×630px ist die empfohlene Größe — groß genug für hochauflösende Displays und passend zum Seitenverhältnis von etwa 1,91:1, auf das Facebook, LinkedIn und X zuschneiden. Halte die Datei unter 5–8 MB, verwende JPG oder PNG, und achte darauf, dass die Bild-URL vollständig absolut ist, kein relativer Pfad — die meisten Crawler können relative Bildpfade nicht korrekt auflösen.

Warum wird meine Vorschau beim Teilen des Links nicht angezeigt?

Die häufigsten Ursachen sind: fehlendes og:image, eine relative statt absolute Bild-URL, ein durch robots.txt blockierter Crawler, oder die Plattform zeigt eine gecachte alte Vorschau. Facebook und LinkedIn cachen Vorschauen sehr aggressiv — nutze nach dem Aktualisieren deiner Tags den Facebook Sharing Debugger oder den LinkedIn Post Inspector, um ein erneutes Crawlen zu erzwingen.

Was ist der Unterschied zwischen og:- und twitter:-Tags?

og:-Tags (og:title, og:description, og:image usw.) gehören zum Open-Graph-Standard und werden von Facebook, LinkedIn, Slack, Discord, WhatsApp und den meisten anderen Plattformen gelesen. twitter:-Tags sind das eigene Format von Twitter/X. Fehlen twitter:title oder twitter:image, greift X automatisch auf das entsprechende og:-Tag zurück — beide explizit zu setzen gibt dir aber mehr Kontrolle, etwa um summary_large_image für ein großes Vorschaubild zu wählen.

Welchen og:type sollte ich verwenden?

„website“ ist die sichere Standardwahl für die meisten Seiten, einschließlich Startseiten und allgemeiner Inhalte. Verwende „article“ für Blogbeiträge und News (das schaltet zusätzliche artikelspezifische Tags wie das Veröffentlichungsdatum frei), „product“ für E-Commerce-Seiten und „profile“ für persönliche oder Nutzerprofile. Der Typ beeinflusst vor allem, welche zusätzlichen Open-Graph-Eigenschaften gültig sind, nicht wie die Basis-Vorschaukarte aussieht.

Speichert oder sendet dieses Tool meine Daten irgendwohin?

Nein. Die gesamte Erzeugung erfolgt lokal in deinem Browser mit reinem JavaScript. Nichts, was du eingibst, wird übertragen, protokolliert oder gespeichert — beim Schließen des Tabs ist alles wieder weg.