Open-Graph-Tags: So steuern Sie Social-Media-Previews und stärken Ihr SEO
Open-Graph-Tags: So steuern Sie Social-Media-Previews und stärken Ihr SEO
Social Previews sind das neue Schaufenster. Wenn Links auf LinkedIn, X, Facebook oder Slack geteilt werden, entscheiden Open-Graph-Tags über Bild, Titel und Beschreibung. Dieser Leitfaden zeigt, wie Sie OG korrekt implementieren, fehlerhafte Previews vermeiden und gleichzeitig SEO stärken.
1. Was Open Graph leistet
OG-Tags beschreiben Ihre Seite für Social-Plattformen. Richtige Tags liefern konsistente Previews, höhere Click-Through-Rates und saubere Link-Unfurls in verschiedenen Clients.
2. Unverzichtbare OG-Tags
Diese gehören in den <head> jeder teilbaren Seite:
<meta property="og:title" content="Seitentitel" /> <meta property="og:description" content="Prägnante Zusammenfassung" /> <meta property="og:image" content="https://example.com/og-image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="article" /> <meta name="twitter:card" content="summary_large_image" />
Fügen Sie og:locale (de_DE, en_US) und og:site_name für konsistente Markenführung hinzu.
3. Titel und Beschreibungen formulieren
- Titel unter ~60 Zeichen halten; Keywords vorne platzieren.
- Beschreibungen: 140–180 Zeichen mit klarem Nutzen.
- Auf Anführungszeichen und ungewöhnliche Satzzeichen verzichten, die Clients abschneiden könnten.
- Metadaten an den Seiteninhalt anpassen, um Relevanzsignale zu stärken.
4. OG-Bilder gestalten
- Empfehlung: 1200×630 px (1,91:1) als JPG oder PNG, ideal unter 2 MB.
- Produktname, kurze Headline und Branding integrieren; keine zu kleine Schrift.
- Für starken Kontrast sorgen; helle/dunkle Hintergründe testen.
- Wenn möglich OG-Bilder je Sprache lokalisieren.
5. Mehrsprachige Seiten
og:localeundog:locale:alternatefür Übersetzungen setzen.og:urlauf die kanonische URL der jeweiligen Sprache zeigen lassen.- Titel/Beschreibungen lokalisiert pflegen und keine Mischsprachen im selben Preview nutzen.
6. Canonical-URLs und Duplikate
Mit <link rel="canonical"> zeigen Sie Crawlern die primäre URL. So verhindern Sie gesplittete Engagement-Metriken bei Tracking-Parametern oder Regionsdomains.
7. Testen und Debuggen
- Facebook Sharing Debugger und LinkedIn Post Inspector zeigen, wie Crawler Ihre Tags lesen.
- Nach Updates erneut scrapen, um Caches zu leeren.
- Mit dem Tool
opengraph-previewTitel, Beschreibungen und Bilder vor dem Go-Live prüfen.
8. Performance und Auslieferung
- OG-Bilder per CDN bereitstellen, damit sie schnell und cachebar sind.
- Sharebare Seiten nicht durch Auth oder robots.txt blockieren.
- Sicherstellen, dass Server vollständiges HTML liefert (keine reinen JS-Metadaten).
9. Häufige Fallstricke
- Fehlendes
og:imageoder Bilder kleiner als 200×200 px. - Relative statt absolute HTTPS-URLs in Metadaten.
- Veraltete Previews wegen gecachter Bilder nach Redesigns.
- Einheitliches OG-Bild für alle Seiten, was Relevanz mindert.
10. Workflow für verlässliche Previews
- Titel/Beschreibung/Bild parallel zum Seiteninhalt festlegen.
- Lokalisierte OG-Bilder aus einer Vorlage generieren.
- Meta-Tags in den Head einfügen; URLs absolut halten.
- Mit
opengraph-previewund Plattform-Debuggern testen. - Nach dem Deployment neu scrapen, um Caches zu aktualisieren.
Verwandtes Tool: Opengraph-preview
Nutzen Sie opengraph-preview, um OG-Tags vor dem Teilen zu rendern und zu validieren. Fehlende Felder, falsche Seitenverhältnisse und Cache-Probleme fallen früh auf – jedes Sharing sieht bewusst gestaltet aus.
