kittokit
DE
DEV-TOOL

OpenGraph-Generator — 6 Plattformen, JSON-LD-Article

Tags zusammenklicken, Limits pro Plattform live prüfen, OG-Bild im Browser rendern und Schema.org-Article-JSON-LD im selben Tab erzeugen — alles in der Seite, kein Upload, kein Account.

So funktioniert es
  1. 01

    Text oder Code einfügen

    Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt.

  2. 02

    Automatische Verarbeitung

    Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis.

  3. 03

    Ergebnis kopieren

    Kopiere das Ergebnis mit einem Klick in die Zwischenablage.

Datenschutz

Alle Berechnungen laufen direkt in deinem Browser. Keine Daten werden auf Server übertragen.

Ein Editor für `<meta property="og:*">`-Tags mit sechs Plattform-Vorschauen nebeneinander. Du schreibst Titel, Beschreibung, URL und Bild ein, der Generator zeigt dir gleichzeitig wie Facebook, X (Twitter Card), LinkedIn, Slack, Discord und iMessage den Link entfalten werden — mit den korrekten Zeichen-Limits pro Plattform. Im zweiten Tab rendert der Canvas2D-Generator ein 1200×630-PNG aus deiner Brand-Farbe und einem Titel, im dritten Tab baust du das passende Schema.org-`Article`-JSON-LD mit XSS-Schutz auf der Inline-Script-Ausgabe.

01 — Anleitung

Wie benutzt du dieses Tool?

  1. Im Editor-Tab Titel, Beschreibung, URL, Bild-URL und Site-Name eintragen. Der Zeichen-Counter zeigt die plattformspezifischen Grenzen.
  2. og:type wählen (website / article / product). Bei `article` erscheinen Autor-, Rubrik- und Datum-Felder.
  3. Twitter-Card-Modus wählen (`summary` oder `summary_large_image`) und optional Twitter-Handle eintragen.
  4. Plattform-Vorschau-Strip durchklicken — jede Plattform zeigt eigenen Layout-Snapshot und Validierungs-Status.
  5. HTML-Snippet kopieren oder als `.html` herunterladen. Im OG-Bild-Tab Brand-Farbe wählen und 1200×630-PNG rendern. Im JSON-LD-Tab das passende Schema.org-`Article`-Markup übernehmen.

Was macht der OpenGraph-Generator?

Der Generator ist ein Editor für die Meta-Tags, die soziale Plattformen lesen, wenn jemand deinen Link teilt. Du tippst Titel, Beschreibung, URL und Bild ein — der Generator emittiert die fertigen <meta property="og:*">- und <meta name="twitter:*">-Tags zum Kopieren in den <head>. Sechs Plattform-Vorschauen (Facebook, X, LinkedIn, Slack, Discord, iMessage) zeigen parallel, wie die Link-Karte auf jedem Kanal aussehen wird, inklusive Zeichen-Cap-Warnungen pro Plattform.

Drei Tabs decken den vollständigen Workflow ab:

  • Editor + Preview — Tag-Felder schreiben, sechs Plattform-Karten live updaten, Snippet kopieren.
  • OG-Bild generieren — 1200×630-PNG aus Brand-Farbe und Titel im Browser rendern, herunterladen.
  • Article JSON-LD — Schema.org-Article-Markup für AI-Citation-Boost, mit XSS-sicherer Inline-Script-Ausgabe.

Alles im Browser. Kein Upload, kein Account, kein Cookie-Banner.

Welche Plattform-Vorschauen sind eingebaut?

Sechs Destinations, jede mit eigener Layout-Charakteristik und Limit-Konfiguration:

  • Facebook — News-Feed-Unfurl mit Bild oben. Titel-Truncation um 60 Zeichen.
  • X (Twitter Card) — summary_large_image mit Domain-Pille unten. Titel-Cap 70, Beschreibung 200.
  • LinkedIn — Business-Layout mit aggressivem Caching. Nach Deploy den LinkedIn Post Inspector einmal manuell triggern, sonst zeigt LinkedIn alte Caches.
  • Slack — Bot-Unfurl mit kleinem Thumb links und Site-Name-Eyebrow.
  • Discord — Embed-Layout mit farbiger linker Seitenleiste, die dem theme-color-Wert entspricht.
  • iMessage — Rich-Link-Bubble. iMessage erfordert HTTPS und einen server-gerenderten <head> — client-side-injected OG-Tags werden ignoriert. Der Generator weist im Validierungs-Hinweis darauf hin.

metatags.io deckt sechs Plattformen ab, aber ohne Discord und iMessage. opengraph.xyz und share-preview sind Debugger, keine Generatoren. robolly cappt bei Facebook + X. Wir kombinieren alle sechs Plattformen in einem Editor — der direkte Mehrwert gegenüber den etablierten Tools.

Wie funktioniert die plattformspezifische Validierung?

Jede Plattform hat eigene Hard-Limits für Titel und Beschreibung — der Generator emittiert pro Plattform einen Status-Dot:

PlattformTitel-MaxBeschreibung-MaxBild-Aspect
Facebook601101.91:1
X (Twitter)702001.91:1 oder 1:1
LinkedIn1502001.91:1
Slack2003001.91:1
Discord25640961.91:1
iMessage1002001.91:1

Bei Überschreitung färbt sich der Dot rot und der Hinweistext nennt das genaue Delta („Title exceeds 70 chars (78)”). Bei iMessage prüft der Generator zusätzlich, dass og:image und og:url mit https:// beginnen — Apple Messages ignoriert HTTP-Links beim Rich-Link-Rendering.

Wie funktioniert der OG-Bild-Generator?

Der zweite Tab rendert ein 1200×630-PNG direkt im Browser via Canvas2D-API. Du wählst eine der fünf Brand-Farb-Voreinstellungen oder tippst eigene Hex-Werte ein, der Title wird automatisch über maximal drei Zeilen umgebrochen, ein optionaler Untertitel ergänzt die Site-Name- oder Eyebrow- Information. Der Klick auf „Bild generieren“ zeichnet auf einem Off-Screen-Canvas und gibt das Ergebnis als PNG-Blob zurück, den du sofort herunterladen kannst.

Pure-client heißt: kein Server, kein Paywall, kein Account. robolly, previewlinks und Pixola machen das Gleiche serverseitig — gegen Bezahlung und mit Telemetrie. Hier passiert es lokal, ohne externen Roundtrip. Anschließend hostest du das PNG auf deinem CDN und referenzierst die URL im og:image-Feld.

Was macht der Article-JSON-LD-Tab?

Schema.org-Article-JSON-LD ergänzt OpenGraph: OG beschreibt das Aussehen der Link-Vorschau, JSON-LD beschreibt den Inhalt strukturiert (Autor, Veröffentlichungs-Datum, Rubrik, Publisher). Suchmaschinen und AI-Assistenten bevorzugen Seiten, die beide liefern — die Princeton-GEO-Studie 2025 dokumentierte +40 % Citation-Pickup-Boost bei kombinierter OG+Article-Markup-Präsenz.

Der Generator emittiert das JSON-LD im Format:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Brand Story — Episode 12",
  "description": "A weekly series ...",
  "url": "https://example.com/articles/12",
  "image": "https://example.com/og/12.png",
  "mainEntityOfPage": "https://example.com/articles/12",
  "datePublished": "2026-05-17",
  "articleSection": "Magazin",
  "author": { "@type": "Person", "name": "Lena Albrecht" },
  "publisher": { "@type": "Organization", "name": "Example Magazine" }
}
</script>

XSS-Schutz im Inline-Script

Der Generator wendet einen Backslash-Escape auf </script und </style-Sequenzen innerhalb der JSON-String-Werte an. Ohne diesen Schutz könnte ein bösartiger Eingabewert wie Test</script><script>alert(1)</script> den umschließenden Inline-Script-Block vorzeitig schließen und beliebigen JavaScript-Code ausführen. Mit dem Escape wird das </script zu <\/script — weiterhin valides JSON (JSON.parse rückwärts liefert den Originalwert), aber der HTML-Parser sieht kein literales End-of-Script-Token mehr.

Welche Lücken sind absichtlich gelassen?

  • Kein Live-URL-Fetch-Debugger — würde Server-Proxy für CORS benötigen, was gegen die Pure- Client-Privacy-Position verstößt. Nach dem Deploy zum Facebook Sharing Debugger, X Card Validator oder LinkedIn Post Inspector wechseln.
  • Kein Bulk-CSV-Generator — B2B-Workflow Out-of-Scope für ein einzelnes Tool.
  • Keine Template-Marketplace mit 100+ OG-Image-Templates — YAGNI. Der inline Canvas-Generator liefert das, was Brand-konsistent gebraucht wird.
  • Kein Pinterest-Rich-Pin-Tab — niedrige DE/EN-Search-Intent für Rich-Pins, plus eigener Pinterest-Validator nach Deploy nötig.
  • Kein App-Card-/Player-Card-Modus für Twitter — Spezialfall (Apps mit installierbarem Deep-Link, inline-Player-Videos), für 95 % der Generator-Nutzer Out-of-Scope.
  • Keine WhatsApp-/Telegram-Preview-Tabs — beide Plattformen lesen Standard-OpenGraph ohne Sonderheiten; die Facebook-Vorschau zeigt zuverlässig, wie WhatsApp/Telegram entfalten werden.

Wie ist die Privacy geregelt?

Pure-client. Der Generator läuft komplett im Browser. Kein Server-Endpunkt, kein Telemetrie-Aufruf, kein Cookie, kein Account. Die Datei, die du als Bild-Vorschau lädst, bleibt lokal — der FileReader gibt sie als Data-URL ins DOM zurück, aber sie verlässt nie das Tab. Wenn du das Tab schließt, sind alle Einstellungen weg. Wer einen Verlauf braucht, lädt nach jedem Edit das HTML-Snippet herunter und versioniert es im Repo.

Welche Workflow-Tipps lohnen sich?

Drei kleine Routinen, die im Alltag den Unterschied machen:

  • Erst zum Generator, dann zum Sharing-Debugger. Schreibe Titel und Beschreibung im Generator-Tab, prüfe alle sechs Plattform-Karten auf grünen Status-Dot. Dann erst deploye die Seite und schicke die URL durch den Facebook Sharing Debugger, X Card Validator und LinkedIn Post Inspector. Letztere flushen den jeweiligen Plattform-Cache — ohne diesen Schritt zeigen LinkedIn-Posts oft tagelang alte OG-Daten.
  • og:image mit Cache-Buster nach jedem Image-Update. Wenn du das OG-Bild austauschst, hängst du an die URL einen Query-Parameter (?v=2026-05-17). Sonst behalten Facebook und LinkedIn die alte Bild-Version monatelang. Der Generator selbst persistiert nichts — also pflegst du den Cache-Buster händisch oder via deinem Build-System.
  • Bei article immer das Datum pflegen. article:published_time und datePublished signalisieren AI-Assistenten die Aktualität des Inhalts. Bei Content-Refreshes setzt du article:modified_time / dateModified, damit ChatGPT-Search oder Perplexity die Seite bevorzugt vor älteren Versionen zitieren.

Wann reicht OpenGraph allein nicht?

Drei Sonderfälle brauchen mehr als nur OG-Tags:

  • WhatsApp-Status-Vorschau liest standardmäßig OpenGraph, kann aber bei besonders schmalen Bildern (kleiner als 300 Pixel breit) zu „Preview not available” zurückfallen. Lösung: das 1200×630-PNG benutzen, das der Tool-Generator produziert — WhatsApp rendert es zuverlässig.
  • Apple Messages Rich-Link-Bubble verlangt zusätzlich, dass der <head> server-gerendert ist. Eine Single-Page-App, die OG-Tags via JavaScript injiziert, wird vom iMessage-Scraper nicht gelesen. Astro 6 SSG (wie auf dieser Seite) liefert den <head> per Default server-seitig aus.
  • Discord-Embed rendert den theme-color-Wert als linke vertikale Akzent-Leiste der Embed- Karte. Das Feld nicht zu setzen ergibt einen neutralen grauen Akzent — funktional ok, aber Brand-Identity flach.

Wo finde ich mehr Details?

Zuletzt aktualisiert:

Das könnte dir auch gefallen