Open-Graph-Generator
Erstellen Sie Open-Graph-Meta-Tags und Twitter Cards für Ihre Website mit unserem kostenlosen Online-OG-Tag-Generator. Füllen Sie Ihre Seitenangaben aus und sehen Sie sofort, wie Ihr Link auf Facebook, X/Twitter und LinkedIn erscheint. Passen Sie OG-Titel, Beschreibung, Bild, Site-Name und Card-Typ mit Echtzeit-Rendering der Social-Karte an. Das gesamte generierte HTML kann direkt in den <head> Ihrer Website kopiert werden - ohne Anmeldung.
Fill in your page details. Twitter tags will fall back to OG values if left blank.
Warum unseren Open-Graph-Generator verwenden?
- Plattformübergreifende Social-Vorschauen: Sehen Sie genau, wie Ihr Link auf Facebook, X/Twitter und LinkedIn erscheint - alles in Echtzeit. Prüfen Sie reichhaltige Karten mit Bildern, Titeln, Beschreibungen und Website-Zuordnung vor der Veröffentlichung.
- Live-Vorschau beim Tippen: Jede Änderung an OG-Titel, Beschreibung oder Bild-URL aktualisiert die Social-Card-Vorschauen sofort. Kein Generieren und Prüfen nötig - Sie sehen, was die Plattformen darstellen werden.
- Validierung der Bildabmessungen: OG-Bilder müssen mindestens 1200×630 Pixel mit einem Seitenverhältnis von 1,91:1 haben, um optimal dargestellt zu werden. Unser Tool validiert Ihre Bild-URL und warnt Sie vor häufigen Problemen wie defekten Links oder ungültigen URLs.
- 100 % privat und clientseitig: Die gesamte Tag-Generierung und Vorschau-Darstellung erfolgt vollständig in Ihrem Browser. Es werden niemals Seiten-URLs, Titel, Beschreibungen oder Bilder an einen Server hochgeladen - Ihre Daten bleiben Ihre.
Häufige Anwendungsfälle des Open-Graph-Generators
- SEO-Manager und Marketer: Optimieren Sie, wie Ihr Inhalt beim Teilen in sozialen Netzwerken erscheint. Prüfen und verfeinern Sie OG-Tags, um die Klickrate von Shares auf Facebook, X, LinkedIn und Slack zu maximieren.
- Webentwickler und Designer: Erstellen Sie schnell OG- und Twitter-Card-Meta-Tags für neue Landingpages, Blogbeiträge oder Webanwendungen. Kopieren Sie das exakte HTML-Snippet zur Einfügung in Ihre Vorlagen.
- Social-Media-Manager: Prüfen Sie vor der Veröffentlichung, wie geteilte Links auf den verschiedenen Social-Plattformen erscheinen. Stellen Sie sicher, dass Bilder, Titel und Beschreibungen überall professionell und markenkonform aussehen.
- Content-Ersteller und Blogger: Entwerfen und prüfen Sie, wie Ihre Blogbeiträge und Artikel beim Teilen erscheinen. Sorgen Sie dafür, dass Ihr Inhalt in überfüllten Social-Feeds mit überzeugenden OG-Metadaten auffällt.
- Startups und Produkteinführungen: Richten Sie passende Social-Preview-Tags für Produktseiten, Landingpages und Marketingkampagnen ein. Der erste Eindruck zählt - lassen Sie Ihre Links überall hochwertig aussehen.
- Betreiber von E-Commerce-Shops: Erstellen Sie OG-Tags für Produktseiten, um beim Teilen in sozialen Netzwerken reichhaltige Vorschauen mit Produktbildern, Preisen und Beschreibungen zu zeigen. Gewinnen Sie mehr Traffic aus Social-Shares.
Open Graph- und Social-Media-Tags verstehen
- Die wichtigsten Open-Graph-Tags erklärt: Dies sind die bedeutendsten Tags. og:title definiert die Überschrift Ihres Inhalts (idealerweise 40-60 Zeichen), während og:description eine Zusammenfassung in 2-3 Sätzen liefert (150-200 Zeichen). Zusammen bilden sie die Textvorschau, die Nutzer vor dem Klick sehen.
- og:image und og:image:width/height: Das OG-Bild ist der visuelle Anker Ihrer Social-Karte. Die empfohlene Größe ist 1200×630 Pixel (Seitenverhältnis 1,91:1) für eine optimale Darstellung auf allen Plattformen. Geben Sie immer Breite und Höhe an, um Layoutverschiebungen beim Laden des Bildes zu vermeiden.
- og:url und og:type: og:url legt die kanonische URL für den geteilten Inhalt fest - alle Social-Signale verweisen auf diese URL. og:type teilt Plattformen mit, welche Art von Inhalt Sie teilen (website, article, video.movie, music.song usw.) für eine korrekte Darstellung.
- Twitter Cards: Twitter/X verwendet eigene Meta-Tags (twitter:card, twitter:site, twitter:creator) zusammen mit OG-Tags. Nutzen Sie summary_large_image für eine auffällige Fotokarte oder summary für eine kompakte Karte mit Vorschaubild. Twitter greift auf OG-Werte zurück, wenn keine Twitter-spezifischen Tags angegeben sind.
- Bildanforderungen und best practices: OG-Bilder sollten mindestens 600×315 Pixel groß sein, aber 1200×630 Pixel werden für hochauflösende Bildschirme empfohlen. Bilder kleiner als 200×200 Pixel werden auf Facebook nicht dargestellt.
Häufig gestellte Fragen
Ein Open-Graph-Generator ist ein Tool, mit dem Sie die Meta-Tags (OG-Tags) erstellen, die für reichhaltige Social-Media-Vorschauen benötigt werden. Wenn Sie einen Link auf Facebook, LinkedIn, X/Twitter oder Slack teilen, verwenden diese Plattformen OG-Tags, um eine Karte mit Titel, Beschreibung und Bild anzuzeigen. Unser Generator bietet ein einfaches Formular zur Eingabe Ihrer Angaben und eine sofortige Vorschau, wie der Link auf mehreren Plattformen erscheint.
Open-Graph-Tags (og:title, og:image usw.) werden von Facebook, LinkedIn, Discord, Slack und vielen anderen Plattformen verwendet. Twitter Cards sind Twitter/X-spezifische Tags (twitter:card, twitter:site, twitter:creator), die Ihnen zusätzliche Kontrolle darüber geben, wie Ihr Inhalt auf Twitter erscheint. Twitter unterstützt auch OG-Tags als Fallback - wenn keine Twitter-spezifischen Tags angegeben werden, verwendet Twitter die OG-Werte.
Die empfohlene OG-Bildgröße ist 1200×630 Pixel mit einem Seitenverhältnis von 1,91:1. Dies gewährleistet eine optimale Darstellung auf Facebook, LinkedIn, Twitter und den meisten anderen Plattformen. Die minimal akzeptable Größe ist 600×315 Pixel. Verwenden Sie immer hochauflösende Bilder für eine scharfe Darstellung auf Retina- und hochauflösenden Bildschirmen.
Es gibt mehrere häufige Ursachen: (1) die Bild-URL ist nicht absolut (muss mit https:// beginnen), (2) das Bild ist zu klein (unter 200×200 Pixel), (3) das Bildformat wird nicht unterstützt, (4) der Server blockiert Crawler, oder (5) die Plattform hat eine ältere Version zwischengespeichert. Nutzen Sie den Facebook Sharing Debugger oder den Twitter Card Validator zur Diagnose und Aktualisierung.
Verwenden Sie diese offiziellen Debugging-Tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug), Twitter Card Validator (cards-dev.twitter.com/validator) und LinkedIn Post Inspector (linkedin.com/post-inspector). Geben Sie Ihre URL ein, um zu sehen, wie jede Plattform Ihre Tags liest, und um zwischengespeicherte Vorschauen zu löschen.
Für OG-Titel (og:title) streben Sie 40-60 Zeichen an. Facebook zeigt bis zu ~90 Zeichen an, bevor abgeschnitten wird. Für OG-Beschreibungen (og:description) bleiben Sie innerhalb von 150-200 Zeichen. Twitter-Titel sollten für eine optimale Darstellung unter 70 Zeichen liegen.
Es ist bewährte Praxis, beides einzubinden. Während Twitter OG-Tags als Fallback unterstützt, geben explizite Twitter Cards Ihnen die volle Kontrolle darüber, wie Inhalte auf X/Twitter erscheinen, mit Unterstützung für den Kartentyp summary_large_image und die Zuordnung des Erstellers.
Nein. Alle OG- und Twitter-Bild-URLs müssen absolute URLs sein, die mit https:// beginnen. Die Crawler der Social-Plattformen rufen den Quellcode Ihrer Seite ab und benötigen eine vollständige URL, um das Bild herunterzuladen. Relative Pfade funktionieren nicht, da der Crawler sie nicht auflösen kann.
Ja, unser Open-Graph-Generator ist zu 100 % kostenlos und läuft vollständig in Ihrem Browser. Es werden niemals Seiten-URLs, Titel, Beschreibungen oder Bild-URLs an einen Server gesendet. Ihre Daten bleiben privat und verlassen niemals Ihr Gerät.