So verwenden Sie Open-Graph-Tag-Generator: Vollständiger Guide (2026)

Was ist Open-Graph-Tag-Generator?

Ein Open-Graph-Tag-Generator erzeugt die Meta-Tags, die soziale Apps lesen, wenn jemand Ihre URL teilt. Der kostenlose Generator von ToolsMinify macht aus Titel, Beschreibung, URL, Bild, Typ, Site-Name und Locale kopierfertiges og:* HTML - plus optionale Twitter-Card-Tags - mit einer Live-Social-Vorschau. Fügen Sie das Markup in den head ein, damit Facebook, LinkedIn, Slack, Discord und iMessage die gewünschte Karte zeigen statt eines geratenen Thumbnails.

Erzeugen Sie Open-Graph- und Twitter-Card-Meta-Tags aus Titel, Beschreibung, URL und Bild. Kostenloser OG-Generator mit Live-HTML und Social-Vorschau.

Warum Open-Graph-Tag-Generator nutzen?

• Erzeugt og:title, og:description, og:url, og:type, og:image, og:site_name und og:locale während der Eingabe
• Optionale Twitter-Card-Tags (summary oder summary_large_image) im selben Snippet
• Live-HTML mit Attribut-Escaping für Anführungszeichen und Kaufmännisches Und
• Social-Vorschau, um schwache Titel oder fehlende Bilder vor dem Publish zu sehen
• Läuft vollständig im Browser - Entwürfe verlassen das Gerät nicht

So verwenden Sie Open-Graph-Tag-Generator - Schritt für Schritt

1. Schritt 1: Geben Sie Seitentitel, Beschreibung, kanonische URL und Bild-URL ein.
2. Schritt 2: Wählen Sie einen og:type (website, article, product oder profile).
3. Schritt 3: Fügen Sie optional einen Site-Namen und eine Locale hinzu (zum Beispiel de_DE).
4. Schritt 4: Lassen Sie Twitter-Card-Tags an, sofern Sie nicht nur Open-Graph-Markup wollen.
5. Schritt 5: Kopieren Sie das HTML und fügen Sie es in den head Ihrer Seite ein.

Der Open-Graph-Tag-Generator befindet sich unter SEO-Tools. Öffnen Sie die Tool-Seite, geben Sie Ihre Eingabe im Hauptfeld ein, und die Ergebnisse aktualisieren sich sofort. Nutzen Sie den Kopieren-Button, um die Ausgabe in Dokumente, Code-Editoren oder Tabellen einzufügen.

Häufige Anwendungsfälle

Blogposts und Artikel

Setzen Sie og:type auf article, fügen Sie ein 1200 x 630 Cover hinzu und kopieren Sie die Tags ins Template, damit Shares die geschriebene Überschrift zeigen.

Produkt- und Landingpages

Nutzen Sie Typ product oder website mit Hero-Bild und nutzenorientierter Beschreibung, damit Anzeigen und Chat-Previews zur Seite passen.

Startseite und Marke

Ergänzen Sie og:site_name und eine Locale wie de_DE, damit LinkedIn und Slack Ihre Marke unter dem Titel anzeigen.

CMS- und Framework-Metadaten

Erzeugen Sie das HTML einmal und mappen Sie jede Property in Next.js, WordPress oder ein Head-Snippet, wenn Redakteure Titel und Bild-URLs einfügen.

Beispiele

• Share-Karte für einen Artikel: Titel "Open-Graph-Tags für einen Artikel", Typ article, Bild 1200 x 630 und die Beitrags-URL erzeugen og:title, og:type, og:image und og:url zum Einfügen ins Template.
• Startseite mit Site-Namen: Nutzen Sie Typ website, Ihre Marke als og:site_name und die Homepage-URL, damit Slack und LinkedIn die Marke unter dem Titel zeigen.
• Produktseite: Typ product plus Titel, Beschreibung, URL und Hero-Bild ergibt eine shopähnliche Karte auf Facebook und iMessage.
• Anführungszeichen und Kaufmännisches Und: Ein Titel wie Shop "A & B" wird zu Shop "A & B" escaped, damit das HTML nach dem Einfügen gültig bleibt.

Profi-Tipps

• Nutzen Sie eine absolute https-Bild-URL. Relative Pfade scheitern oft bei Facebook- und Slack-Crawlern.
• 1200 x 630 px ist das übliche Querformat. Quadratische Bilder werden auf den meisten Netzen beschnitten.
• Halten Sie Titel kurz (etwa 60 Zeichen) und Beschreibungen unter ~200 Zeichen, damit Karten nicht mitten im Wort abschneiden.
• Nach dem Deploy die Live-URL im Facebook Sharing Debugger und LinkedIn Post Inspector scrapen, um den Cache zu erneuern.
• Kombinieren Sie das Tool mit dem Meta-Description-Checker für das Google-Snippet - Open Graph gehört zu Social Cards, nicht zur SERP.

Häufig gestellte Fragen

Was sind Open-Graph-Tags?

Open-Graph-Tags sind Meta-Elemente (og:title, og:description, og:image, og:url, og:type), die sozialen Apps sagen, wie eine Link-Vorschau aussehen soll. Ohne sie raten Facebook, LinkedIn und Slack oft einen schwachen Titel oder das falsche Bild.

Welche Open-Graph-Tags brauche ich?

Beginnen Sie mit og:title, og:type, og:image und og:url. Ergänzen Sie og:description, og:site_name und og:locale, wenn vorhanden. Dieser Generator gibt nur ausgefüllte Felder aus, plus og:type (Standard website).

Welche Größe sollte og:image haben?

Nutzen Sie eine absolute https-URL. 1200 x 630 Pixel ist das übliche Querformat für Facebook und LinkedIn. Kleinere Bilder werden oft beschnitten oder als Miniatur angezeigt.

Brauche ich auch Twitter-Card-Tags?

X (Twitter) kann Open Graph lesen, aber twitter:card, twitter:title, twitter:description und twitter:image geben Ihnen die Kontrolle. Schalten Sie die Option ein, um sie aufzunehmen. Mit Bild: summary_large_image; ohne Bild: summary.

Wohin füge ich das HTML ein?

Fügen Sie die Tags in den head des HTML-Dokuments ein (oder in die Metadata-API Ihres Frameworks). Sie müssen auf der öffentlichen URL stehen, die Sie als og:url setzen, damit Crawler sie sehen.

Verlässt mein Text das Gerät?

Nein. Der Open-Graph-Tag-Generator läuft vollständig in Ihrem Browser. Titel, URLs und Bilder werden nicht hochgeladen oder auf einem Server gespeichert.

Verwandte Tools, die Sie brauchen könnten

Entdecken Sie weitere seo-tools auf ToolsMinify. Verwandte Utilities sind auf der Seite von Open-Graph-Tag-Generator verlinkt, damit Sie Ihren Workflow ohne Seitenwechsel abschließen können.