Open-Graph-Checker
Sieh genau, wie deine Links beim Teilen auf Facebook, Twitter/X, LinkedIn und Slack aussehen
Möchtest du, dass deine geteilten Links immer großartig aussehen?
Smmall Cloud erstellt automatisch ansprechende Link-Vorschauen für jede Datei, die du teilst — PDFs, Videos, Bilder und mehr. Keine OG-Tags zu konfigurieren.
Smmall Cloud kostenlos ausprobierenWas sind Open-Graph-Tags?
Open Graph (OG) ist ein 2010 von Facebook eingeführtes Protokoll, das jede Webseite zu einem strukturierten Objekt im sozialen Netzwerk macht. Durch das Hinzufügen von Open-Graph-Meta-Tags in deinem HTML bestimmst du genau, wie deine Seite beim Teilen auf Facebook, LinkedIn, Slack, Discord und vielen weiteren Plattformen dargestellt wird.
Ohne Open-Graph-Tags versuchen Plattformen, Titel, Beschreibung und Bild deiner Seite automatisch zu erkennen — oft mit falschen Ergebnissen. Ein fehlendes oder unpassendes Vorschaubild, ein abgeschnittener Titel oder eine generische Beschreibung lassen Links unprofessionell wirken und verringern die Klickrate erheblich.
Das Open-Graph-Protokoll ist nicht nur für soziale Netzwerke relevant. Messenger wie Slack, iMessage, WhatsApp und Discord lesen ebenfalls OG-Tags, um Link-Vorschauen zu erstellen. Auch Suchmaschinen nutzen sie, um Inhalte besser zu verstehen — selbst wenn sie das Ranking nicht direkt beeinflussen.
Wichtige Open-Graph-Tags
Diese Open-Graph-Meta-Tags sollte jede Seite enthalten:
| Tag | Description |
|---|---|
| og:title | Der Titel deiner Seite, wie er in Link-Vorschauen erscheinen soll. Halte ihn unter 60 Zeichen. |
| og:description | Eine kurze Zusammenfassung des Seiteninhalts. Ideal sind maximal 155 Zeichen. |
| og:image | Die URL des Vorschaubilds. Verwende 1200×630px für optimale Darstellung auf allen Plattformen. Muss eine absolute URL sein. |
| og:url | Die kanonische URL deiner Seite. Hilft Plattformen, Likes und Shares korrekt zu bündeln. |
| og:type | Der Inhaltstyp — meist "website" für Startseiten oder "article" für Blogartikel. |
| og:site_name | Der Name deiner Website (z. B. "Smmall Cloud"). Wird auf einigen Plattformen über dem Titel angezeigt. |
Häufige Open-Graph-Fehler
- Fehlendes og:image — Das wichtigste Tag. Ohne dieses zeigen Plattformen ein generisches Platzhalterbild oder wählen zufällig ein Bild deiner Seite.
- Relative URLs verwenden — Alle OG-Werte müssen absolute URLs mit https:// sein. Relative Pfade wie /images/preview.jpg funktionieren nicht.
- Falsche Bildgröße — Bilder kleiner als 200×200px können ignoriert werden. Empfohlen sind 1200×630px.
- Fehlendes twitter:card-Tag — Ohne dieses Tag zeigt Twitter/X keine Rich Preview an, selbst wenn deine OG-Tags korrekt sind. Füge twitter:card mit "summary" oder "summary_large_image" hinzu.
- Doppelte oder widersprüchliche Tags — Mehrere og:title- oder og:image-Tags verwirren Crawler. Jede OG-Eigenschaft sollte nur einmal vorkommen.
- Nicht aktualisierte Cache-Vorschauen — Facebook und LinkedIn speichern Link-Vorschauen aggressiv im Cache. Nutze nach Änderungen die jeweiligen Debugger-Tools, um den Cache zu aktualisieren.
So fügst du Open-Graph-Tags hinzu
Füge Open-Graph-Meta-Tags im ‹head›-Bereich deines HTML-Dokuments ein. Hier ein Beispiel mit den wichtigsten Tags:
<head>
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />
<meta name="twitter:card" content="summary_large_image" />
</head>Plattformspezifisches Verhalten
Verschiedene Plattformen lesen und interpretieren Open-Graph-Tags leicht unterschiedlich:
Verwendet OG-Tags als primäre Quelle. Speichert Vorschauen stark im Cache; nutze den Facebook Sharing Debugger zur Aktualisierung. Bilder müssen mindestens 200×200px groß sein, empfohlen sind 1200×630px.
Twitter/X
Bevorzugt twitter:card-, twitter:title-, twitter:image- und twitter:description-Tags, greift aber auf OG-Tags zurück, wenn diese fehlen. Ein twitter:card-Tag ist erforderlich, um Rich Previews zu aktivieren.
Liest OG-Tags direkt aus. Sehr aggressives Caching; nutze den LinkedIn Post Inspector zur Aktualisierung. Kürzt og:title bei etwa 70 Zeichen.
Slack
Zeigt OG-Vorschauen als eingerückten Block mit Website-Name, Titel, Beschreibung und Bild an. Verwendet og:site_name für die oberste Zeile.
Discord
Rendert OG-Vorschauen als Embed-Karte mit farbigem linken Rand. Unterstützt og:video für eingebettete Videos. Reagiert gut auf og:color-Theme-Meta-Tags.
Häufig gestellte Fragen
Was sind Open-Graph-Tags?
Open-Graph-(OG)-Tags sind Meta-Tags in deinem HTML, die steuern, wie deine Inhalte erscheinen, wenn sie auf Social-Media-Plattformen wie Facebook, LinkedIn, Slack oder Discord geteilt werden. Damit kannst du Titel, Beschreibung und Vorschaubild für jede Seite festlegen.
Warum sehen meine geteilten Links in sozialen Medien falsch aus?
Wenn beim Teilen deiner Links das falsche Bild, der falsche Titel oder eine falsche Beschreibung angezeigt wird, fehlen meist Open-Graph-Tags oder sie sind fehlerhaft. Mit diesem Checker kannst du genau sehen, welche Tags deine Seite enthält und was Plattformen anzeigen werden.
Was ist der Unterschied zwischen OG-Tags und Twitter Cards?
Open-Graph-Tags (og:title, og:description, og:image) werden von Facebook, LinkedIn und den meisten Plattformen verwendet. Twitter/X nutzt eigene Tags wie twitter:card, twitter:title und twitter:image — greift jedoch auf OG-Tags zurück, wenn keine Twitter-spezifischen Tags vorhanden sind.
Welche Größe wird für og:image empfohlen?
Die empfohlene Größe für og:image beträgt 1200×630 Pixel. Dieses Format funktioniert gut auf Facebook, LinkedIn, Twitter und Slack. Bilder sollten kleiner als 8 MB sein und im JPG- oder PNG-Format vorliegen.
Wie behebe ich die Warnung „Fehlendes og:image“?
Füge im ‹head›-Bereich deines HTML ein ‹meta property="og:image" content="https://deineseite.de/bild.jpg" /›-Tag hinzu. Die Bild-URL muss absolut sein (beginnend mit https://). Relative Pfade funktionieren nicht.
Beeinflussen Open-Graph-Tags das SEO?
OG-Tags beeinflussen das Suchranking nicht direkt, wirken sich jedoch stark auf die Klickrate in sozialen Medien aus. Ein überzeugendes Vorschaubild und ein ansprechender Titel können das Engagement beim Teilen deutlich steigern.