Kompletter Leitfaden zu Open Graph Tags
Alles, was Sie über OG-Tags für perfekte Social-Media-Vorschauen wissen müssen
Einführung
Im digitalen Zeitalter kann die Art und Weise, wie Ihre Inhalte beim Teilen in sozialen Medien erscheinen, den Unterschied zwischen einem Klick und dem Weiterscrollen ausmachen. Open Graph (OG) Tags sind das Geheimnis attraktiver, klickbarer Link-Vorschauen. Ursprünglich 2010 von Facebook erstellt, sind sie zum Standard geworden.
Warum OG-Tags wichtig sind
1. Höhere Klickraten
Studien zeigen, dass Links mit reichhaltigen Vorschauen bis zu 2x mehr Engagement erhalten als reine Textlinks.
2. Markenkontrolle
Ohne OG-Tags raten Plattformen, was angezeigt werden soll. Mit OG-Tags entscheiden Sie, welches Bild, welcher Titel und welche Beschreibung Ihre Inhalte repräsentieren.
3. Professionelles Erscheinungsbild
Eine gut formatierte Link-Vorschau signalisiert Qualität und Vertrauenswürdigkeit.
4. Plattformübergreifende Konsistenz
OG-Tags stellen sicher, dass Ihre Inhalte auf Facebook, LinkedIn, Twitter oder Messaging-Apps gleich aussehen.
Pro Tip
Links mit optimierten OG-Tags können den Social-Media-Traffic um bis zu 150% steigern.
Plattformspezifische Tags
Twitter Cards
Twitter (jetzt X) hat eigene Meta-Tags. Obwohl es auf OG-Tags zurückfällt, geben Twitter-Tags mehr Kontrolle.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.png" />LinkedIn verwendet OG-Tags, erfordert aber Bilder mit mindestens 1200x627 Pixeln.
WhatsApp & Telegram
WhatsApp und Telegram verwenden ebenfalls OG-Tags, cachen Vorschauen aber aggressiv.
Best Practices
| Platform | Size | Ratio |
|---|---|---|
| 1200 x 630px | 1.91:1 | |
| 1200 x 628px | 1.91:1 | |
| 1200 x 627px | 1.91:1 | |
| 1200 x 630px | 1.91:1 |
- Titel: 60-90 Zeichen (Facebook kürzt bei ~88)
- Beschreibung: 150-200 Zeichen für vollständige Anzeige
- URL: Verwenden Sie saubere, lesbare URLs
Häufige Fehler vermeiden
1. Fehlendes og:image
Das Bild ist das auffälligste Element. Ohne es wirkt Ihr Link unvollständig.
2. Relative URLs verwenden
Verwenden Sie immer absolute URLs, die mit https:// beginnen.
3. Falsche Bildabmessungen
Zu kleine Bilder oder falsches Seitenverhältnis können beschnitten oder nicht angezeigt werden.
4. Nicht auf allen Plattformen testen
Jede Plattform rendert Vorschauen unterschiedlich. Testen Sie immer.
5. Cache ignorieren
Plattformen cachen Vorschauen. Verwenden Sie Debugger nach Änderungen.
Test-Tools
Validieren Sie Ihre OG-Tags vor der Veröffentlichung mit diesen offiziellen Tools:
Häufig gestellte Fragen
Was sind Open Graph Tags?
Meta-Tags, die steuern, wie Ihre URL beim Teilen in sozialen Medien erscheint und Titel, Beschreibung und Bild definieren.
Warum wird mein og:image nicht angezeigt?
Häufige Probleme: Bild zu klein (min 200x200px), relative URL, Datei zu groß (max 8MB), oder alte Version im Cache.
Kann ich SVG für og:image verwenden?
Nein, Facebook und die meisten Plattformen unterstützen kein SVG. Verwenden Sie PNG oder JPEG.