Ein geteilter Link ist oft der erste Kontakt mit Ihrer Website: im Team-Chat, in einer WhatsApp-Gruppe, in einem LinkedIn-Beitrag. Ob dort ein ansprechendes Bild mit klarem Titel erscheint oder ein abgeschnittenes Logo mit „Startseite“, bestimmen Sie mit dem Open-Graph-Protokoll. Ursprünglich von Facebook entwickelt, wird es heute von nahezu allen Plattformen und Messengern ausgewertet.
Die wichtigsten Tags
Die Tags stehen im <head> jeder Seite:
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.beispiel.de/leistungen/badsanierung/">
<meta property="og:title" content="Badsanierung in München – Festpreis in 10 Tagen">
<meta property="og:description" content="Komplettbad vom Meisterbetrieb: Planung, Fliesen, Sanitär. Kostenlose Beratung vor Ort.">
<meta property="og:image" content="https://www.beispiel.de/og/badsanierung.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Modernes Bad mit bodengleicher Dusche">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Sanitär Huber">
<meta name="twitter:card" content="summary_large_image">| Tag | Pflicht? | Hinweis |
|---|---|---|
og:title |
ja | Kann vom SEO-Title abweichen, eher kürzer und emotionaler |
og:type |
ja | website für Seiten, article für Beiträge |
og:image |
ja | Absolute HTTPS-URL |
og:url |
ja | Kanonische URL der Seite |
og:description |
empfohlen | 1–2 Sätze |
og:image:width/height |
empfohlen | Beschleunigt die erste Darstellung |
twitter:card |
für X | summary_large_image für großes Bild |
Die passenden Tags erzeugt der Meta-Tags-Generator zusammen mit Title und Description.
Das richtige Vorschaubild
- Größe: 1200 × 630 px (1,91 : 1). Mindestens 600 × 315 px, damit Facebook das große Format nutzt.
- Sicherer Bereich: Text und Logo mittig platzieren. WhatsApp und manche Plattformen zeigen je nach Ansicht einen quadratischen Ausschnitt.
- Dateigröße: Möglichst klein halten – unter 300 KB ist für Messenger eine gute Faustregel. Facebook erlaubt bis 8 MB, WhatsApp scheitert aber oft schon an deutlich kleineren Dateien.
- Format: JPEG oder PNG sind am sichersten. WebP wird nicht von allen Plattformen zuverlässig angezeigt.
- Text sparsam: Wenige große Wörter, gut lesbar auch als Miniatur.
- Eigenes Bild pro wichtiger Seite, nicht überall das Logo.
Vorschau testen und Fehler finden
Bevor Sie einen wichtigen Link teilen, prüfen Sie die Darstellung mit der Open-Graph-Vorschau. Sie zeigt, welche Tags gefunden werden und wie die Karte auf verschiedenen Plattformen aussieht.
Die Plattformen bieten zusätzlich eigene Werkzeuge:
- Facebook Sharing Debugger (developers.facebook.com/tools/debug): zeigt Fehler und lädt die Seite mit „Erneut scrapen“ neu.
- LinkedIn Post Inspector (linkedin.com/post-inspector): prüft die URL und aktualisiert den LinkedIn-Cache.
- X: Der frühere Card Validator zeigt keine Vorschau mehr; testen Sie am besten in einem Entwurf.
- WhatsApp: Hat kein öffentliches Debug-Tool. Testen Sie, indem Sie den Link an sich selbst senden.
Typische Probleme und Lösungen
| Problem | Ursache | Lösung |
|---|---|---|
| Kein Bild | Relative URL, Bild per robots.txt gesperrt, Bot-Schutz blockiert Crawler | Absolute URL, Crawler wie facebookexternalhit zulassen |
| Altes Bild/alter Titel | Plattform-Cache | Debugger „erneut scrapen“, neuer Dateiname fürs Bild |
| Falscher Titel | Plugin setzt doppelte Tags | Nur eine Quelle für OG-Tags |
| Bild abgeschnitten | Falsches Seitenverhältnis | 1200 × 630, Motiv mittig |
| WhatsApp zeigt nur Text | Bild zu groß oder Server zu langsam | Bild verkleinern, Caching |
| Vorschau leer bei Shop-Produkten | Tags werden per JavaScript gesetzt | Tags serverseitig ausgeben |
Wichtig: Die meisten Crawler sozialer Netzwerke führen kein JavaScript aus. Tags, die erst ein Single-Page-Framework im Browser einfügt, sehen sie nicht. Nutzen Sie Server-Side-Rendering oder statische Generierung.
Cache leeren
Plattformen speichern Vorschauen teils wochenlang. Hilfreiche Tricks:
- Bild unter neuem Dateinamen hochladen (
badsanierung-v2.jpg), statt die Datei zu überschreiben. - Im Facebook-Debugger und LinkedIn Post Inspector die URL neu einlesen lassen.
- Für WhatsApp und Telegram beim Teilen einen Parameter anhängen (
?v=2). Achten Sie darauf, dass das Canonical-Tag weiterhin auf die saubere URL zeigt.
OG-Tags in gängigen Systemen
- WordPress: SEO-Plugins wie Yoast SEO oder Rank Math setzen Open-Graph-Tags automatisch und bieten pro Seite ein Feld für ein eigenes Social-Bild.
- Shopify: Das Theme erzeugt die Tags aus Produktbild und Beschreibung; das Standard-Teilen-Bild legen Sie in den Einstellungen fest.
- Statische Seiten und Frameworks: Tags im Layout-Template definieren und pro Seite mit Titel, Beschreibung und Bild befüllen.
Ein häufiger Fehler bei Plugins: Theme und SEO-Plugin geben beide Open-Graph-Tags aus. Die Plattformen nehmen dann oft den ersten Treffer – und der ist nicht immer der richtige. Prüfen Sie im Quelltext (Strg+U), ob jedes og:-Tag nur einmal vorkommt.
Beispiel: Blogartikel optimal teilen
Ein Ratgeberartikel „Heizkosten senken“ eines Energieberaters bekommt einen eigenen OG-Titel („7 Tipps, mit denen Sie sofort Heizkosten sparen“), eine kurze Beschreibung mit konkretem Nutzen und ein Bild mit Thermostat und großer Schrift „–15 %“. Das SEO-Title-Tag bleibt sachlicher („Heizkosten senken: 7 Tipps vom Energieberater“). So passt die Vorschau zum lockeren Ton in Messengern, während das Suchergebnis die Suchanfrage trifft.
Datenschutz und Social Media
Open-Graph-Tags selbst übertragen keine Daten. Anders sieht es bei eingebetteten „Gefällt mir“-Buttons oder Pixeln aus: Diese laden Skripte der Plattform und dürfen nach DSGVO und TDDDG in der Regel erst nach Einwilligung geladen werden. Einfache Teilen-Links ohne Skript sind die datensparsame Alternative.
Planen Sie das Vorschaubild schon beim Erstellen einer Seite mit ein – nachträglich alle Caches zu aktualisieren, kostet mehr Zeit als eine durchdachte erste Version.
Checkliste
og:title,og:description,og:image,og:url,og:typeauf jeder wichtigen Seite.- Bild 1200 × 630 px, absolute HTTPS-URL, möglichst unter 300 KB.
twitter:cardaufsummary_large_image.- Tags im HTML-Quelltext, nicht erst per JavaScript.
- Vorschau vor dem Teilen getestet, Cache bei Änderungen aktualisiert.
Wie Sie Title und Meta Description für die Google-Suche formulieren, lesen Sie im Ratgeber Title-Tag und Meta Description.