T
Tooltastic
Open Graph Meta Generator

Open Graph Meta Generator

OG & Twitter Card Meta-Tags für jede Seitenart erstellen — mit Live-Vorschau.

Echtzeit-Vorschau Twitter / X Cards 100% Lokal

Allgemein

Empfohlen: 50–60 Zeichen

Empfohlen: 120–155 Zeichen

Social Image

Empfohlen: 1200×630 px · JPG oder PNG · max. 8 MB

Twitter / X

Facebook

Optional — wird für Facebook Insights und Pixel-Attribution benötigt.

Artikel

Kommagetrennt — jeder Tag wird ein eigenes article:tag Meta-Tag

Buch

Profil

Näherungsweise Vorschau — genaues Erscheinungsbild variiert je Plattform

Näherungsweise Vorschau — genaues Erscheinungsbild variiert je Plattform

Was ist Open Graph?

Open Graph ist ein von Facebook entwickeltes Protokoll, das Webseiten zu reichhaltigen Objekten im sozialen Graphen macht. OG Meta-Tags steuern, wie URLs beim Teilen auf Facebook, LinkedIn, Slack, WhatsApp und anderen Plattformen aussehen. Ohne sie entscheiden Plattformen selbst — oft mit schlechten Ergebnissen.

Twitter Cards

Twitter Cards reichern Tweets mit Medien an. Das `twitter:card`-Tag legt den Card-Typ fest. Twitter fällt auf Open Graph Tags zurück, wenn Twitter-spezifische Tags fehlen — beide Sätze zu definieren stellt korrekte Darstellung auf allen Plattformen sicher.

Bild & Text: Best Practices

Verwende 1200×630 px für optimale Darstellung auf allen Plattformen (Minimum 600×315 px). Titel unter 60 Zeichen, Beschreibungen unter 155 Zeichen. Nach der Veröffentlichung mit Facebooks Sharing Debugger und Twitters Card Validator testen.

Häufige Fragen

Alles Wichtige über Open Graph Meta-Tags

Open Graph (OG) Meta-Tags sind HTML-Tags im `<head>` der Seite, die steuern, wie die Seite beim Teilen in sozialen Netzwerken aussieht. Ohne sie wählen Facebook, LinkedIn und Slack Titel, Beschreibung und Bild selbst — meist suboptimal. Mit OG-Tags hast du die volle Kontrolle über die Vorschaukarte.

Empfohlen: 1200×630 px (Seitenverhältnis 1,91:1). Das funktioniert auf Facebook, Twitter, LinkedIn, WhatsApp und den meisten anderen Plattformen. JPG oder PNG, maximal 8 MB. Text im Bild vermeiden, da er auf kleineren Cards abgeschnitten wird. Minimum für Facebooks großes Card-Format: 600×315 px.

Streng genommen nein — Twitter fällt auf OG-Tags zurück. Aber Twitter-spezifische Tags bieten mehr Kontrolle: `twitter:card` legt den Card-Typ fest (Summary vs. Large Image), `twitter:creator` nennt den Autor. Für beste Ergebnisse beide Sätze angeben. Dieser Generator erstellt beide automatisch.

Den Facebook Sharing Debugger (developers.facebook.com/tools/debug) nutzen, um Vorschau zu prüfen und gecachte Previews zu löschen. Für Twitter den Twitter Card Validator (cards-dev.twitter.com/validator) verwenden. LinkedIn und Slack cachen OG-Daten ebenfalls — die jeweiligen Post-Inspector-Tools für Aktualisierungen nutzen.

Die Tags im `<head>`-Element der HTML-Seite einfügen, vor dem schließenden `</head>`-Tag. Konventionsgemäß nach `<meta charset>` und `<meta name="viewport">` und vor Stylesheets. In WordPress ein Plugin wie Yoast SEO nutzen; in anderen CMS nach "Head Scripts" oder "Custom Meta"-Feldern suchen.

Open-Graph- und Twitter-Card-Tags erstellen

Der Open Graph Meta Generator erzeugt die Meta-Tags, die bestimmen, wie deine Seite beim Teilen in sozialen Netzwerken und Messengern aussieht – mit Titel, Beschreibung und Vorschaubild. Ohne diese Tags ziehen Facebook, LinkedIn, WhatsApp oder X beliebige, oft unpassende Inhalte heran. Das Tool zeigt eine Live-Vorschau und gibt dir fertigen Code zum Einfügen. Es läuft vollständig im Browser.

Typische Anwendungsfälle

  • Ansprechende Link-Vorschau: Lege fest, welches Bild und welcher Text erscheinen, wenn jemand deine Seite teilt.
  • Kampagnen-Landingpages: Optimiere Titel und Bild gezielt für mehr Klicks aus Social-Media-Posts.
  • Konsistente Marke: Sorge dafür, dass alle Seiten deiner Website einheitlich und professionell geteilt werden.
  • Twitter/X-Cards: Ergänze die passenden Twitter-Card-Tags für eine optimale Darstellung auf X.

So erstellst du deine Meta-Tags

  1. 1 Trage Titel, Beschreibung, URL und Bild deiner Seite ein.
  2. 2 Wähle den Seitentyp und den Twitter-Card-Stil.
  3. 3 Kontrolliere die Live-Vorschau, wie der Link geteilt aussieht.
  4. 4 Kopiere die generierten Meta-Tags in den Head-Bereich deiner Seite.

Kleiner Code, große Wirkung

Open-Graph-Tags entscheiden über den ersten Eindruck eines geteilten Links – ein gutes Vorschaubild und ein klarer Titel erhöhen die Klickrate spürbar. Verwende ein Bild im empfohlenen Format (etwa 1200 × 630 Pixel) und halte den Titel prägnant. Nach Änderungen lohnt ein Blick in die Debug-Tools der Netzwerke, da diese Vorschauen zwischenspeichern. Da das Tool nur Code erzeugt, bleibt deine Seite unangetastet, bis du die Tags selbst einfügst.

Kostenlose Tools, die gut dazu passen – direkt im Browser, ohne Anmeldung.