Open-Graph-Meta-Tags für Social Media einrichten
Wenn eine URL auf Facebook, LinkedIn, WhatsApp oder in Slack geteilt wird, entscheiden Open-Graph-Meta-Tags darüber, wie die Vorschau aussieht. Ein gut konfiguriertes og:image und ein präziser og:title können den Unterschied machen zwischen einem Link, der ignoriert wird, und einem, der Neugier weckt und Klicks generiert. Der WikiPlus Meta-Tag Generator erzeugt alle wichtigen og:-Tags mit einem Klick.
Was sind Open Graph Tags und woher kommen sie?
Das Open Graph Protocol wurde 2010 von Facebook entwickelt und ist heute der de-facto-Standard für die Steuerung von Link-Vorschauen in sozialen Netzwerken. Die Tags werden als <meta>-Elemente im <head> der HTML-Seite platziert und mit dem property-Attribut gekennzeichnet: <meta property='og:title' content='Seitentitel'>. Alle relevanten Plattformen lesen og:-Tags: Facebook, Instagram (beim Teilen von Links), LinkedIn, WhatsApp, Telegram, Slack und Discord. Twitter hat zwar eigene twitter:card-Tags, fällt aber auf og:-Tags zurück, wenn keine Twitter-spezifischen Tags vorhanden sind. Die wichtigsten og:-Tags sind: og:title, og:description, og:image, og:url und og:type. Der WikiPlus Meta-Tag Generator generiert alle diese Tags und zeigt, wie sie im Code aussehen sollen.
Das og:image: Der wichtigste Social-Sharing-Tag
Das og:image-Bild ist das erste, was beim Teilen eines Links visuell auffällt. Ein aufmerksamkeitsstarkes, relevantes Bild erhöht die Klickrate auf geteilte Links enorm. Technische Anforderungen: Minimale Bildgröße: 200x200 Pixel. Empfohlene Bildgröße: 1200x630 Pixel (2:1-Verhältnis) für optimale Darstellung auf allen Plattformen. Facebook unterstützt bis zu 8 MB Bildgröße, aber 1-2 MB ist empfehlenswert. Für Twitter Cards: 1200x628 für summary_large_image. Für WhatsApp: 400x209 ist ausreichend. Dateiformat: JPG oder PNG. HTTPS-URL erforderlich. Inhaltliche Empfehlungen: Das Bild sollte den Seiteninhalt widerspiegeln und ohne Text verständlich sein. Text im Bild (Headlines, CTAs) kann sinnvoll sein, wird aber auf kleinen Displays schwer lesbar. Markenkonsistenz durch einheitliche Bildsprache in allen og:images einer Website.
OG-Tags für verschiedene Inhaltstypen
Der og:type-Tag teilt sozialen Netzwerken mit, um welche Art von Inhalt es sich handelt. Die wichtigsten Typen: og:type='website' für allgemeine Seiten und Homepages — der Standardwert. og:type='article' für Blog-Posts und Nachrichtenartikel — ermöglicht zusätzliche article:-Tags wie article:published_time, article:author und article:section. og:type='product' für E-Commerce-Produktseiten (offiziell nur von Facebook Commerce unterstützt). og:type='video.movie' und og:type='video.episode' für Videoinhalte. og:type='profile' für Personenprofile. Für Blog-Artikel sind folgende zusätzliche Tags wertvoll: <meta property='article:published_time' content='2026-05-12T09:00:00Z'> und <meta property='article:author' content='https://example.com/author/max-mustermann'>. Diese Informationen nutzt Facebook zur besseren Kategorisierung und Anzeige.
OG-Tags testen und debuggen
Bevor eine URL in sozialen Netzwerken geteilt wird, sollte man die OG-Tag-Implementierung testen. Der WikiPlus OG-Vorschau-Tool ist dafür ideal. Weitere Tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug/): Zeigt, wie Facebook die OG-Tags liest, und hat einen 'Scrape Again'-Button zum Leeren des Cache nach Änderungen. LinkedIn Post Inspector (linkedin.com/post-inspector/): Zeigt LinkedIn-Vorschau und erkennt Fehler. Twitter Card Validator (cards-dev.twitter.com/validator): Für Twitter-spezifische Vorschauen. WhatsApp zeigt og:image nach einem ersten Share im Cache. Nach Änderungen muss man einen neuen Link senden. Häufige Fehler: og:image-URL nicht erreichbar oder nicht HTTPS, Bildgröße zu klein, og:title zu lang (Facebook kürzt bei 65 Zeichen), fehlende og:url (kann zu falschen URLs in Vorschauen führen).
Häufig gestellte Fragen
- Muss ich og:-Tags und twitter:-Tags separat definieren?
- Twitter liest og:-Tags als Fallback, wenn keine twitter:-Tags vorhanden sind. Für maximale Kontrolle über Twitter-Vorschauen (z.B. summary_large_image statt summary) sollten twitter:-Tags explizit gesetzt werden. Der WikiPlus Meta-Tag Generator erzeugt beide Tag-Gruppen automatisch.
- Warum zeigt WhatsApp immer noch das alte Bild nach meiner Änderung?
- WhatsApp und andere Plattformen cachen OG-Vorschauen für mehrere Stunden bis Tage. Für WhatsApp gibt es kein offizielles Cache-Clearing-Tool. Der Facebook Sharing Debugger kann den Cache für Facebook/Instagram leeren. Bei anderen Plattformen hilft es, einen Zeitstempel-Parameter an die URL anzuhängen.
- Wie erstelle ich OG-Images, die auf allen Plattformen gut aussehen?
- Verwende 1200x630 px als Basis-Format. Halte wichtige Inhalte in der zentralen 80%-Zone des Bildes (sicherer Bereich). Vermeide zu kleinen Text. Teste die Vorschau auf den häufigsten Plattformen deiner Zielgruppe. Canva und Figma bieten OG-Image-Vorlagen.