Kostenloser Konverter

OG-Tag Generator

Generieren Sie Open Graph-Meta-Tags für Facebook, Twitter und LinkedIn. Kostenloser OG-Tag-Generator mit Live-Vorschau der sozialen Karten.

0/95
0/200

Facebook-Vorschau

YOURWEBSITE.COM
Ihr Seitentitel (max. 95 Zeichen)
Eine kurze Beschreibung Ihrer Seite (maximal 200 Zeichen)

Generiertes HTML

<!-- Open Graph Tags -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Über dieses Tool

Open Graph (OG)-Tags steuern, wie eine Seite angezeigt wird, wenn sie auf sozialen Plattformen geteilt wird. Facebook, LinkedIn, Slack, Discord und viele andere lesen OG-Tags, um Vorschaukarten zu erstellen. Ohne die richtigen OG-Tags sehen geteilte Links kaputt aus – generische Favicons, fehlende Bilder, abgeschnittene Titel. Mit ihnen sehen Aktien aufpoliert aus und die Klickraten verbessern sich deutlich.

Die standardmäßigen OG-Tags: og:title (der in der Vorschau angezeigte Titel), og:description (der Textausschnitt), og:image (das Vorschaubild, idealerweise 1200×630), og:url (kanonische URL), og:type (normalerweise „Website“ oder „Artikel“). Twitter-Karten-Tags-Ebene oben: twitter:card, twitter:title, twitter:description, twitter:image. Die meisten Tools greifen auf OG zurück, wenn Twitter-spezifische Tags fehlen.

Dieser Generator erstellt aus Ihrer Eingabe einen vollständigen Satz von OG- und Twitter-Card-Tags. Fügen Sie den resultierenden HTML-Code in den <head> der Seite ein. Das Ergebnis ist eine korrekte Vorschauwiedergabe auf allen wichtigen sozialen Plattformen.

Warum einen OG-Tag-Generator verwenden?

Seiten ohne OG-Tags sehen beim Teilen schlecht aus. Leeres Bild, allgemeiner Titel, fehlende Beschreibung – die Vorschau konkurriert schlecht mit ordnungsgemäß getaggten Seiten in Feeds. Bei Content-Marketing und Link-Sharing wirkt sich dies direkt auf die Klickrate aus.

Das handschriftliche Schreiben von OG-Tags ist repetitiv. Jede Seite benötigt einen eigenen Satz. Ein Generator, der aus wenigen Eingaben korrekte Tags generiert, vermeidet Tippfehler und fehlende Eigenschaften, die die Social-Previews beeinträchtigen.

So verwenden Sie es

Füllen Sie die Eingaben aus und holen Sie sich die Tags.

  1. Geben Sie Titel und Beschreibung ein: Diese werden in der Freigabevorschau angezeigt. Halten Sie den Titel auf weniger als 60 Zeichen und die Beschreibung auf weniger als 200 Zeichen, um eine saubere Anzeige auf allen Plattformen zu gewährleisten.
  2. Geben Sie eine Bild-URL an: 1200×630 Pixel ist die Standardgröße. Verwenden Sie eine absolute URL (https://example.com/og-image.png). Das Bild muss öffentlich zugänglich sein – authentifizierte Bilder unterbrechen die Vorschau.
  3. Legen Sie die kanonische URL fest: Die URL der Seite selbst. Wird als og:url verwendet und hilft Plattformen, die kanonische Ressource zu identifizieren, selbst wenn sie über Weiterleitungs-URLs geteilt wird.
  4. Wählen Sie den Seitentyp: Website für allgemeine Seiten, Artikel für Blogbeiträge und Neuigkeiten, Produkt für E-Commerce. Beeinflusst, wie einige Plattformen die Vorschau rendern.
  5. Kopieren Sie die generierten Tags: Das Tool erstellt HTML-Link-Tags, die in den <head> der Seite eingefügt werden können. Bewerben Sie sich über Ihr CMS, Ihre Template-Engine oder direkt in HTML.

Häufige Anwendungsfälle

Technische Details

OG-Tags verwenden das Meta-Property-Attribut (nicht den Namen): <meta property="og:title" content="..." />. Das Eigenschaftsattribut ist für OG erforderlich; Einige Parser akzeptieren den Namen als Fallback, aber die Eigenschaft ist korrekt.

Bildanforderungen: 1200 x 630 Pixel für Retina-Rendering, Seitenverhältnis 1,91:1. Die Tags og:image:width und og:image:height helfen Plattformen, Bilder korrekt zwischenzuspeichern. og:image:alt stellt barrierefreien Text bereit.

Twitter-Karten-Tags verwenden das Namensattribut: <meta name="twitter:title" content="..." />. Twitter greift auf OG-Tags zurück, wenn keine Twitter-spezifischen Tags vorhanden sind, sodass gut festgelegte OG oft ausreichen. Durch das Hinzufügen von twitter:card wird explizit der Kartentyp ausgewählt (summary_large_image ist am häufigsten).

Best Practices

Häufig gestellte Fragen

Kann ich die generierte Ausgabe anpassen?
Ja. Das Tool bietet verschiedene Anpassungsoptionen, um die Ausgabe an Ihre spezifischen Bedürfnisse anzupassen. Passen Sie die Einstellungen vor dem Generieren an oder führen Sie eine Neugenerierung mit verschiedenen Optionen durch.
Ist die Nutzung der generierten Inhalte kostenlos?
Ja. Alles, was Sie mit diesem Tool generieren, steht Ihnen zur Nutzung für persönliche, Bildungs- oder kommerzielle Zwecke ohne Einschränkungen oder Quellennachweispflichten zur Verfügung.
Ist hierfür ein Konto erforderlich?
Nein. Das Tool ist sofort einsatzbereit, ohne Anmeldung, ohne E-Mail und ohne Registrierung. Öffnen Sie einfach die Seite und beginnen Sie mit der Generierung.
Werden meine Eingabedaten vertraulich behandelt?
Ja. Die gesamte Verarbeitung erfolgt in Ihrem Browser. Ihre Eingabedaten und generierten Ausgaben werden niemals an einen externen Server gesendet.
Kann ich für jede Seite dasselbe OG-Bild verwenden?
Möglich, aber suboptimal. Seitenspezifische Bilder sind beim Durchklicken besser als generische Bilder für die gesamte Website. Verwenden Sie einen Standard als Fallback, erstellen Sie jedoch Bilder pro Seite für wichtige Inhalte.
Ist eine Deklaration der Bildgröße erforderlich?
Hilfreich, aber nicht unbedingt erforderlich. Mit og:image:width und og:image:height können Plattformen Bilder zwischenspeichern, ohne sie erneut abzurufen, um die Abmessungen zu bestimmen. Beschleunigt nachfolgende Freigaben.
Werden meine Daten hochgeladen?
Nein. Die Generierung erfolgt in Ihrem Browser.
Wie teste ich OG-Tags?
Der Facebook Sharing Debugger, der Twitter Card Validator und der LinkedIn Post Inspector rufen jeweils ab und validieren sie. Verwenden Sie sie nach der Bereitstellung neuer OG-Tags.