Was sind Open Graph Tags? Ein Leitfaden zu Link-Vorschau und sozialen Medien

Wenn Sie einen Link auf Facebook, LinkedIn, Slack oder Twitter teilen, erscheint normalerweise eine Vorschaukarte — mit einem Titel, einer Beschreibung und einem Bild. Diese Vorschau ist kein Zauber. Sie wird durch Open Graph (OG) Tags im HTML Ihrer Seite gesteuert.

Wenn Sie Open Graph Tags richtig einsetzen, sehen Ihre geteilten Links professionell aus und erhalten mehr Klicks. Wenn Sie es falsch machen, erhalten Sie unansehnliche Vorschau, fehlende Bilder oder generischen Fallback-Text.

Was ist das Open Graph Protokoll?

Open Graph ist ein von Facebook 2010 entwickeltes Protokoll, das Webseiten ermöglicht, zu definieren, wie sie in sozialen Netzwerken erscheinen. Es verwendet Meta-Tags im HTML <head> Abschnitt:

<meta property="og:title" content="Der Titel Ihrer Seite" />
<meta property="og:description" content="Eine kurze Zusammenfassung der Seite" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Wenn eine Social-Media-Plattform eine gemeinsam genutzte URL erkennt, ruft sie die Seite ab und liest diese Tags, um die Vorschaukarte zu erstellen.

Wesentliche Open Graph Tags

og:title

Der Titel, der in der Vorschaukarte angezeigt wird. Halten Sie ihn unter 60 Zeichen für die beste Anzeige auf allen Plattformen.

<meta property="og:title" content="So erstellen Sie personalisierte Kurz-Links" />

Tipps:

Duplizieren Sie nicht einfach Ihren <title> Tag — optimieren Sie für Social-Media-Engagement
Stellen Sie wichtige Wörter an den Anfang
Vermeiden Sie Clickbait (Plattformen können dies sanktionieren)

og:description

Eine kurze Zusammenfassung, die unter dem Titel angezeigt wird. Streben Sie 120-160 Zeichen an.

<meta property="og:description" content="Erstellen Sie benutzerdefinierte Kurz-Links mit Klick-Tracking und Analyse. Einrichtung in 5 Minuten." />

og:image

Das in der Vorschau angezeigte Bild. Dies ist das einflussreichste Tag — Beiträge mit Bildern erhalten erheblich mehr Engagement.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Bildanforderungen nach Plattform:

Plattform	Empfohlene Größe	Seitenverhältnis
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px Min	Beliebig

Verwenden Sie 1200 × 630 Pixel, um alle Plattformen abzudecken.

og:url

Die kanonische URL der Seite. Dies teilt den Plattformen mit, welche URL angezeigt werden soll, und hilft, doppelte Inhalte zu vermeiden.

<meta property="og:url" content="https://example.com/page" />

og:type

Beschreibt den Inhaltstyp. Häufige Werte:

website — für Startseiten und allgemeine Seiten
article — für Blog-Posts und Artikel
product — für Produktseiten

Twitter Card Tags

Twitter verwendet seine eigenen Meta-Tags (zusätzlich zu Open Graph) für Vorschaukarten:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Ihr Titel" />
<meta name="twitter:description" content="Ihre Beschreibung" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Wenn Twitter Card Tags nicht vorhanden sind, greift Twitter auf Open Graph Tags zurück. Die meisten Websites legen beide fest, um maximale Kontrolle zu haben.

Wenn Sie eine URL teilen:

1Der Crawler der Plattform besucht die URL
2Er liest den HTML <head> nach OG Tags
3Er speichert die Vorschaukartendaten zwischen
4Nachfolgende Shares der gleichen URL verwenden die zwischengespeicherte Version

Wichtig: Änderungen an OG Tags werden nicht sofort widergespiegelt. Plattformen speichern aggressiv zwischen, daher müssen Sie möglicherweise den Cache manuell löschen (siehe Debugging unten).

Anpassen von Link-Vorschauen mit Linkly

Was ist, wenn Sie eine URL teilen, die Sie nicht kontrollieren — oder wenn Sie unterschiedliche Vorschaukarten für verschiedene Kontexte möchten?

Die Funktion Custom Social Previews von Linkly ermöglicht es Ihnen, die Open Graph Daten für jeden verkürzten Link zu überschreiben:

Legen Sie einen benutzerdefinierten Titel, eine Beschreibung und ein Bild fest
Unterschiedliche Vorschau für verschiedene Zielgruppen
Kein Bedarf, die HTML der Zielseite zu bearbeiten
Funktioniert für jede URL, auch für Seiten, die Sie nicht besitzen

Dies ist besonders nützlich, wenn:

Sie Inhalte von Drittanbietern mit Ihrem eigenen Branding teilen
Sie verschiedene Vorschaukarten A/B testen, um zu sehen, welche mehr Klicks erhält
Die Zielseite schlechte oder fehlende OG Tags hat

Debugging von Open Graph Tags

Facebooks Tool ermöglicht es Ihnen, zwischengespeicherte OG-Daten in der Vorschau anzuzeigen und zu aktualisieren:

1Geben Sie Ihre URL ein
2Klicken Sie auf Debug
3Sehen Sie, was Facebook von Ihrer Seite liest
4Klicken Sie auf Scrape Again, um den Cache zu löschen

Twitter Card Validator

Twitters Validator zeigt, wie Ihre Karte aussieht, und hebt alle Probleme hervor.

LinkedIn Post Inspector

Linkedins Tool zeigt eine Vorschau Ihrer Link-Karte und aktualisiert zwischengespeicherte Daten.

Allgemeine Tipps

Überprüfen Sie die Quelle: Zeigen Sie den Quelltext Ihrer Seite an und suchen Sie nach og:, um zu überprüfen, ob Tags vorhanden sind
Verwenden Sie absolute URLs: Bild-URLs müssen absolut sein (mit https:// beginnen), nicht relativ
Testen Sie nach Änderungen: Löschen Sie immer den Platform-Cache nach dem Aktualisieren von OG Tags
Überprüfen Sie JavaScript-Rendering: Einige Plattformen können JavaScript nicht ausführen, daher müssen OG Tags in der anfänglichen HTML-Antwort vorhanden sein

Häufige Fehler

1Fehlende og:image: Posts ohne Bilder erhalten 2-3x weniger Klicks
2Bild zu klein: Verwenden Sie mindestens 1200 × 630 Pixel
3Falsches Seitenverhältnis: Bilder werden ungeschickt zugeschnitten
4Staler Cache: Sie haben Ihre OG Tags aktualisiert, aber vergessen, die Platform-Caches zu löschen
5Doppelte Tags: Mehrere OG Tags desselben Typs führen zu unvorhersehbarem Verhalten
6HTTP-Bilder: Verwenden Sie HTTPS für Bild-URLs — einige Plattformen blockieren HTTP-Bilder
7Relative URLs: Platform-Crawler können relative Pfade nicht auflösen

Open Graph für verschiedene Inhaltstypen

Blog-Posts

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Ihr Name" />

Produkte

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Videos

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Fazit

Open Graph Tags sind eine kleine Ergänzung zu Ihrem HTML, die großen Einfluss darauf hat, wie Ihre Inhalte im Social Web erscheinen. Wenn Sie sie richtig einstellen — mit dem richtigen Titel, einer Beschreibung und einem Bild — erhöhen Sie direkt die Click-Through-Raten, wenn Ihre Links geteilt werden.

Möchten Sie benutzerdefinierte Link-Vorschauen ohne HTML-Bearbeitung? Beginnen Sie mit Linkly und passen Sie die Social-Preview-Karte für jeden verkürzten Link an — legen Sie Ihren eigenen Titel, eine Beschreibung und ein Bild fest.