Was ist der Open-Graph-Generator?

Der Open-Graph-Generator ist ein Tool, das einen einfügefertigen HTML-Block aus Open-Graph- und Twitter-Card-Meta-Tags erzeugt, gebaut aus deinem Titel, deiner Beschreibung, URL, deinem Bild, Typ und Seitennamen.

Wie verwende ich den Open-Graph-Generator, um Meta-Tags zu erstellen?

Trage Seitentitel, Beschreibung, kanonische URL, og:image, Typ und Seitennamen ein, beobachte die Live-Vorschau, klicke dann auf Kopieren oder Herunterladen und füge die Tags in den deiner Seite ein.

Was ist der Unterschied zwischen Open-Graph- und Twitter-Card-Tags?

Open-Graph-Tags (og:) werden von Facebook, LinkedIn, Slack und vielen anderen gelesen, während twitter:-Tags spezifisch für X/Twitter sind. Dieses Tool gibt beide aus, damit Vorschauen überall funktionieren.

Welche og:image-Größe funktioniert am besten?

Ein Bild mit 1200x630 Pixeln und absoluter URL ist die sichere Wahl für summary_large_image-Cards auf den meisten Plattformen.

Warum erscheinen meine Änderungen nicht, wenn ich den Link teile?

Soziale Plattformen speichern Vorschauen zwischen, füge deine URL also in deren Sharing-Debugger ein, um nach dem Aktualisieren der Meta-Tags ein frisches Einlesen zu erzwingen.

Bleiben meine Eingaben im Open-Graph-Generator privat?

Ja. Die Tags werden lokal in deinem Browser gebaut, deine Daten verlassen dein Gerät nie und nichts, was du eingibst, wird auf einen Server hochgeladen.

Open-Graph-Generator

Open-Graph-Generator, der OG- und Twitter-Card-Meta-Tags mit Live-Vorschau der Social-Card baut.

Deine Feldwerte werden lokal in deinem Browser in Meta-Tags umgewandelt und nichts, was du eingibst, wird auf einen Server hochgeladen.

Entwickelt und gepflegt von Udit Agarwal

Die Bestandteile eines Links prüfen? Probiere den URL-Parser.

Über Open-Graph-Generator

Dieser Open-Graph-Generator baut die Open-Graph- und Twitter-Card-Meta-Tags, die deine Seiten brauchen, um auf sozialen Plattformen ansprechende Linkvorschauen zu erzeugen. Trage Titel, Beschreibung, kanonische URL, og:image, Typ, Seitennamen und Twitter-Card-Stil ein und beobachte, wie eine Live-Vorschau der Social-Card beim Tippen aktualisiert wird, bevor du das fertige HTML kopierst. Praktisch für Entwickler, Marketer und Content-Teams, die korrekte Social-Meta-Tags wollen, ohne jede Eigenschaft von Hand zu schreiben. Als og-Meta-Tags-Generator und Twitter-Card-Generator deckt er die gängigen og:image-Tags und Social-Meta-Tags ab, damit auf Facebook, LinkedIn, Slack und X geteilte Links gepflegt aussehen. Alles läuft lokal in deinem Browser, deine Eingaben werden auf deinem Gerät verarbeitet und nichts wird auf einen Server hochgeladen.

Funktionen

Erzeugt Open-Graph-Tags (og:title, og:description, og:type, og:url, og:image, og:site_name)
Fügt passende Twitter-Card-Tags hinzu (twitter:card, title, description, image)
Live-Vorschau der Social-Card, die beim Tippen aktualisiert wird
Gibt einen sauberen, kopierfertigen HTML-Meta-Block aus
Maskiert Sonderzeichen in Titeln, Beschreibungen und URLs korrekt
Lässt dich den og:type und twitter:card-Stil wählen (etwa summary_large_image)
In die Zwischenablage kopieren oder die Tags als meta-tags.html herunterladen
Lässt leere Felder aus, damit das erzeugte Markup aufgeräumt bleibt

So verwendest du Open-Graph-Generator

Gib Seitentitel, Beschreibung, URL und Bild-URL in die Eingabefelder ein.
Setze den og:type und Twitter-Card-Stil und füge dann deinen Seitennamen hinzu.
Prüfe die Live-Vorschau der Social-Card, um zu bestätigen, wie der Link erscheinen wird.
Klicke auf Kopieren, um das HTML zu übernehmen, oder nutze Herunterladen, um meta-tags.html zu speichern.
Füge die erzeugten Tags in den <head>-Bereich deiner Seite ein.

Beispiel

Eingabe

title: Launch-Tag
url: https://acme.dev/launch
image: https://acme.dev/og.png

Ausgabe

<title>Launch-Tag</title>
<!-- Open Graph -->
<meta property="og:title" content="Launch-Tag" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Launch-Tag" />
<meta name="twitter:image" content="https://acme.dev/og.png" />

Leere Felder werden ausgelassen und og:type ist standardmäßig website.

Häufige Fehler & Fehlerbehebung

Das og:image erscheint nicht in Vorschauen auf Facebook oder LinkedIn. — Verwende für das Bild eine vollständige absolute URL (https://...), keinen relativen Pfad, und stelle sicher, dass das Bild öffentlich erreichbar ist.
Twitter zeigt ein kleines Bild statt einer großen Card. — Setze den twitter:card-Wert auf summary_large_image, damit Plattformen das Layout mit voller Bildbreite rendern.
Titel oder Beschreibung wirken in der Vorschau abgeschnitten. — Halte Titel bei etwa 60 Zeichen und Beschreibungen bei etwa 110-160 Zeichen, damit Plattformen sie nicht kürzen.
Sonderzeichen wie & oder < zerstören das Markup. — Tippe die rohen Zeichen ein; der Generator maskiert sie in der Ausgabe automatisch zu gültigen HTML-Entitäten.
Plattformen zeigen nach dem Aktualisieren der Tags weiterhin alte Vorschaudaten. — Lies die URL mit dem Debugger der Plattform (etwa dem Facebook Sharing Debugger) erneut ein, um die zwischengespeicherte Vorschau zu löschen.

Häufig gestellte Fragen

Was ist der Open-Graph-Generator?: Der Open-Graph-Generator ist ein Tool, das einen einfügefertigen HTML-Block aus Open-Graph- und Twitter-Card-Meta-Tags erzeugt, gebaut aus deinem Titel, deiner Beschreibung, URL, deinem Bild, Typ und Seitennamen.
Wie verwende ich den Open-Graph-Generator, um Meta-Tags zu erstellen?: Trage Seitentitel, Beschreibung, kanonische URL, og:image, Typ und Seitennamen ein, beobachte die Live-Vorschau, klicke dann auf Kopieren oder Herunterladen und füge die Tags in den <head> deiner Seite ein.
Was ist der Unterschied zwischen Open-Graph- und Twitter-Card-Tags?: Open-Graph-Tags (og:) werden von Facebook, LinkedIn, Slack und vielen anderen gelesen, während twitter:-Tags spezifisch für X/Twitter sind. Dieses Tool gibt beide aus, damit Vorschauen überall funktionieren.
Welche og:image-Größe funktioniert am besten?: Ein Bild mit 1200x630 Pixeln und absoluter URL ist die sichere Wahl für summary_large_image-Cards auf den meisten Plattformen.
Warum erscheinen meine Änderungen nicht, wenn ich den Link teile?: Soziale Plattformen speichern Vorschauen zwischen, füge deine URL also in deren Sharing-Debugger ein, um nach dem Aktualisieren der Meta-Tags ein frisches Einlesen zu erzwingen.
Bleiben meine Eingaben im Open-Graph-Generator privat?: Ja. Die Tags werden lokal in deinem Browser gebaut, deine Daten verlassen dein Gerät nie und nichts, was du eingibst, wird auf einen Server hochgeladen.

Weitere Web & DevOps-Tools

robots.txt-Generator — Baue visuell eine robots.txt mit Regeln und Sitemaps.
XML-Sitemap-Generator — Verwandle eine URL-Liste in eine gültige sitemap.xml.
.htaccess-Generator — Baue Apache-Regeln für HTTPS, Redirects und Caching.
Nginx-Config-Generator — Baue einen kompletten nginx-Server-Block aus Schaltern.
Semver-Rechner — Parse, vergleiche, prüfe Ranges, erhöhe und korrigiere semantische Versionen.
Cache-Control-Generator — Aus einfachen Schaltern einen korrekten HTTP-Cache-Control-Header bauen, mit nginx-, Apache- und meta-Ausgabe.
Meta-Tag-Generator — SEO-, Open Graph- und Twitter Card-Meta-Tags aus einem Formular erzeugen.
CSP-Generator — Einen Content-Security-Policy-Header Direktive für Direktive bauen.
htpasswd-Generator — Eine .htpasswd-Zeile mit bcrypt oder SHA-1 aus Benutzer und Passwort erzeugen.
Tailwind Color Generator — Eine Markenfarbe in eine 50-950 Tailwind-Skala in OKLCH mit Kontrast verwandeln.
CSS Grid Generator — Ein Grid-Layout visuell bauen und sauberes grid-template-CSS kopieren.
CSS Clamp Calculator — Min-/Max-Größen und Viewports in einen fluiden clamp()-Wert verwandeln.

Alle Web & DevOps-Tools ansehen (27) · Alle Tools