Open-Graph-Generator

Erzeuge Open-Graph- und Twitter-Meta-Tags mit Vorschau der Social-Card.

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

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

So verwendest du Open-Graph-Generator

  1. Gib Seitentitel, Beschreibung, URL und Bild-URL in die Eingabefelder ein.
  2. Setze den og:type und Twitter-Card-Stil und füge dann deinen Seitennamen hinzu.
  3. Prüfe die Live-Vorschau der Social-Card, um zu bestätigen, wie der Link erscheinen wird.
  4. Klicke auf Kopieren, um das HTML zu übernehmen, oder nutze Herunterladen, um meta-tags.html zu speichern.
  5. 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

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.

Verwandte Tools

Alle ArrayKit-Tools