OG Meta-Tag-Generator Online
Open-Graph- und Twitter-Card-Tags generieren. Vorschau, wie dein Link in sozialen Netzwerken erscheint.
<!-- Open Graph --> <meta property="og:title" content="My Website — Main Title"> <meta property="og:description" content="My website description for social media."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="My Site"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Website — Main Title"> <meta name="twitter:description" content="My website description for social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Warum dieses Tool nutzen
Kontrolliere, wie deine Website beim Teilen aussieht
Echte Vorschau
Sieh genau, wie dein Link vor der Veröffentlichung erscheinen wird.
Alle Plattformen
Facebook, LinkedIn, Twitter, WhatsApp und Telegram in einem Schritt.
Kopierfertiger Code
Korrekt generierte HTML-Tags. In den Head einfügen und fertig.
Keine Anmeldung
Meta-Tags generieren und testen ohne Konto erstellen.
So funktioniert es
Drei Schritte, kein Aufwand
Seitendaten eingeben
Gib Titel, Beschreibung, URL und Bild deiner Seite ein. Das sind die Details, die Nutzerinnen und Nutzer sehen, wenn dein Link geteilt wird.
Soziale Netzwerke auswählen
Wähle, ob du Open Graph (Facebook, LinkedIn, WhatsApp), Twitter Card oder beides benötigst. Passe plattformspezifische Felder an.
HTML-Code kopieren
Kopiere die generierten Meta-Tags und füge sie in den HTML-Head deiner Seite ein. Überprüfe mit dem Facebook Debugger oder dem Twitter Card Validator.
FAQ
Noch Fragen?
Das Open-Graph-Protokoll ist ein Webprotokoll, das von Facebook erstellt wurde (vorgestellt auf der F8-Konferenz 2010) und es jeder Webseite ermöglicht, ein umfangreiches Objekt im sozialen Netzwerk zu werden. Durch das Einfügen von og:-Meta-Tags in den HTML-Head kontrollierst du genau, welcher Titel, welche Beschreibung und welches Bild erscheinen, wenn jemand deinen Link auf Facebook, LinkedIn, WhatsApp, Telegram und den meisten sozialen Plattformen teilt. Ohne diese Tags versuchen Plattformen, den Inhalt zu erraten, mit unvorhersehbaren Ergebnissen.
Die vier grundlegenden Pflichtangaben sind: og:title (Objekttitel), og:type (Objekttyp: website, article, product...), og:image (Vorschaubild-URL) und og:url (kanonische Seiten-URL). Wichtige optionale Eigenschaften: og:description, og:site_name, og:locale (z. B. de_DE), og:image:width und og:image:height (um Reflows beim Laden zu vermeiden). Für Artikel ermöglicht og:type=article zusätzliche Eigenschaften: article:author, article:published_time, article:section.
Facebook hat den Sharing Debugger (developers.facebook.com/tools/debug), der genau zeigt, wie deine URL beim Teilen erscheint, und das Zwischenspeichern einer Cache-Aktualisierung erzwingt. Twitter hat den Card Validator (cards-dev.twitter.com/validator). LinkedIn hat den Post Inspector (linkedin.com/post-inspector). Für die lokale Entwicklung ermöglichen Tools wie ngrok oder localtunnel den Zugriff auf deinen Localhost von externen Debuggern aus. Denke daran, dass Plattformen Metadaten zwischenspeichern – wenn du Tags änderst, verwende die Debugging-Tools, um den Cache zu leeren.
Die von Facebook und den meisten Plattformen empfohlenen Abmessungen sind 1200×630 Pixel (Seitenverhältnis 1,91:1). Diese Auflösung ist für Retina-Displays ausreichend und skaliert gut auf alle Vorschaugrößen. Die minimal akzeptierte Größe ist 200×200 px. Facebook lehnt Bilder kleiner als 200×200 oder größer als 8 MB ab. Twitter erfordert mindestens 300×157 px für summary_large_image und maximal 4096×4096 px bei 5 MB. Für WhatsApp sollte das Bild quadratisch (1:1) für Gruppenvorschauen sein.
Open Graph (og:) ist ein offenes Protokoll, das von den meisten sozialen Plattformen übernommen wurde. Twitter Cards (twitter:) sind spezifisch für Twitter/X und bieten zusätzliche Typen: summary, summary_large_image, app und player. Wenn du og:-Tags definierst, verwendet Twitter sie als Fallback, wenn twitter:-Tags fehlen. Empfohlen wird, beide Sets für maximale Kompatibilität zu definieren. Wichtige Twitter-Card-Felder sind twitter:card (Kartentyp), twitter:site (Twitter-Account der Website), twitter:creator (Account des Autors) und twitter:image (kann sich von og:image unterscheiden, um Abmessungen zu optimieren).
Open-Graph-Protokoll: Geschichte, Schema.org und Social-Media-Crawler
Das Open-Graph-Protokoll wurde von Facebook auf der F8-Konferenz am 21. April 2010 vorgestellt. Das Ziel war es, jede Webseite zu einem erstklassigen Objekt in Facebooks sozialem Netzwerk zu machen, ähnlich wie Künstler-, Film- und Ortsseiten bereits eine umfangreiche Datenstruktur hatten. Das Protokoll wurde von RDFa (Resource Description Framework in Attributes), einer HTML-Erweiterung für strukturierte Daten, inspiriert, aber für eine breite Nutzung vereinfacht. Name und Domain ogp.me wurden am selben Tag registriert. Seit seiner Einführung wurde Open Graph von LinkedIn (2011), Twitter als Fallback (2012), WhatsApp (2013) und praktisch jeder relevanten sozialen und Messaging-Plattform übernommen.
Die Beziehung zwischen Open Graph und Schema.org ist komplementär, aber manchmal verwirrend. Schema.org (2011 von Google, Bing und Yahoo gestartet) definiert ein strukturiertes Datenvokabular für Suchmaschinen, implementiert via JSON-LD (empfohlen), Microdata oder RDFa. Open Graph ist für Link-Vorschauen in sozialen Netzwerken optimiert. Eine Seite sollte beides haben: Schema.org für SEO und Suchmaschinen-Snippets sowie Open Graph für das Teilen in sozialen Netzwerken. Google nutzt og:title und og:description als sekundäre Indexsignale, JSON-LD Schema.org hat jedoch mehr Gewicht. Soziale Crawler (facebookexternalhit, Twitterbot, LinkedInBot) lesen nur og:-Tags, kein JSON-LD.
Soziale Medien-Crawler haben für Entwicklerinnen und Entwickler wichtige technische Eigenschaften. Der User-Agent facebookexternalhit/1.1 zeigt an, dass Facebook die URL zur Vorschauerstellung verarbeitet. Diese Crawler führen kein JavaScript aus – sie verarbeiten nur statisches Server-HTML. Das bedeutet, dass React/Vue/Angular-Apps mit Client-Side Rendering (CSR) ohne SSR oder SSG keine korrekten OG-Metadaten haben, da Meta-Tags clientseitig dynamisch generiert werden. Die Lösung ist Server-Side Rendering (Next.js, Nuxt), Static Site Generation oder ein Prerendering-Service (Prerender.io, rendertron), der für Social-Media-Bots vorgerendertes HTML bereitstellt.