kittokit
DE
` im Titel oder in der Beschreibung werden backslash-escaped, damit der Inline-Script-Block nicht vorzeitig terminiert."}},{"@type":"Question","name":"Wie funktioniert der OG-Bild-Generator im Tool?","acceptedAnswer":{"@type":"Answer","text":"Pure-client. Du wählst eine der fünf Brand-Farb-Voreinstellungen (Graphit, Porzellan, Sonnenuntergang, Wald, Mitternacht) oder gibst eigene Farbwerte ein, tippst den Bild-Titel und einen optionalen Untertitel, klickst „Bild generieren“. Der Browser rendert das 1200×630-PNG via Canvas2D-API im Speicher und stellt es als Download zur Verfügung. Es gibt keinen Server-Aufruf, kein Paywall, kein Account — anders als bei robolly oder previewlinks. Du hostest das Ergebnis dann auf deinem eigenen CDN und referenzierst die URL in `og:image`."}},{"@type":"Question","name":"Warum kein Live-URL-Fetch-Debugger im Tool?","acceptedAnswer":{"@type":"Answer","text":"Ein Live-Debugger müsste die fremde URL serverseitig fetchen, weil Browser-CORS dem Client-Script verbietet, beliebige Domains zu lesen. Server-Fetch heißt Server-Code, Server-Code heißt Server-Logs und potentielle Tracking-Ableitung. Das verletzt die Privacy-First-Position der Seite. Wer einen Live-Debugger braucht, nutzt nach dem Deploy die offiziellen Tools: Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector. Der Generator deckt die Schreib-Seite ab, die Validatoren die Lese-Seite — beides ergänzt sich."}}]},{"@type":"HowTo","name":"OpenGraph-Generator — 6 Plattformen, JSON-LD-Article","step":[{"@type":"HowToStep","position":1,"name":"Text oder Code einfügen","text":"Füge deinen Inhalt in das Eingabefeld ein oder tippe direkt."},{"@type":"HowToStep","position":2,"name":"Automatische Verarbeitung","text":"Das Tool verarbeitet den Inhalt sofort und zeigt das Ergebnis."},{"@type":"HowToStep","position":3,"name":"Ergebnis kopieren","text":"Kopiere das Ergebnis mit einem Klick in die Zwischenablage."}]}]}
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.

Läuft lokal im Browser — Snippets werden im Speicher erzeugt, nichts wird hochgeladen.

Modus

Kerntags

og:type

X (Twitter Card)

twitter:card

Article-spezifisch

Bild als Vorschau laden

Datei bleibt lokal — nur als Vorschau im Browser geladen, ohne Upload.

Plattform-Vorschau

Sechs Plattformen mit ihrer eigenen Layout- und Limit-Charakteristik.

News-Feed-Unfurl mit Bild-oben-Layout. Titel-Kappung um 60 Zeichen.

Example Magazine

Brand-Story — Neue Episode jeden Donnerstag

Eine wöchentliche Serie über Aufbau, Krisen und Wendepunkte echter Unternehmen.

Innerhalb der Limits · Facebook truncates title around 60 characters in the news-feed unfurl. Recommended image 1200×630, minimum 600×315.

HTML-Snippet

In den `<head>` deiner Seite einfügen.

<!-- OpenGraph -->
<meta property="og:title" content="Brand-Story — Neue Episode jeden Donnerstag">
<meta property="og:description" content="Eine wöchentliche Serie über Aufbau, Krisen und Wendepunkte echter Unternehmen.">
<meta property="og:url" content="https://example.com/articles/episode-12">
<meta property="og:image" content="https://example.com/og/episode-12.png">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Magazine">
<meta property="og:locale" content="de_DE">
<meta property="article:author" content="Lena Albrecht">
<meta property="article:section" content="Magazin">
<meta property="article:published_time" content="2026-05-17">

<!-- Twitter Card / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Brand-Story — Neue Episode jeden Donnerstag">
<meta name="twitter:description" content="Eine wöchentliche Serie über Aufbau, Krisen und Wendepunkte echter Unternehmen.">
<meta name="twitter:image" content="https://example.com/og/episode-12.png">
<meta name="twitter:site" content="@example">

<!-- Theme color -->
<meta name="theme-color" content="#1A1A1A">

<!-- Canonical -->
<link rel="canonical" href="https://example.com/articles/episode-12">

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