Open-Graph-Tags
Technik & InfrastrukturMeta-Tags, die steuern, wie Inhalte beim Teilen auf Social-Media-Plattformen wie Facebook angezeigt werden.
Definition
Open-Graph-Tags (OG-Tags) sind HTML-Meta-Tags im `<head>`-Bereich einer Webseite, die steuern, wie diese Seite erscheint, wenn ihre URL auf Social-Media-Plattformen, Messaging-Apps und anderen Diensten geteilt wird, die Link-Vorschauen generieren. Das Protokoll wurde ursprünglich 2010 von Facebook entwickelt und ist seitdem zum universellen Standard für Link-Vorschauen im Web geworden. OG-Tags definieren vier Kerneigenschaften: `og:title` (die in der Vorschau angezeigte Überschrift), `og:description` (der Zusammenfassungstext), `og:image` (das Vorschaubild) und `og:url` (der kanonische Link). Zusätzliche Eigenschaften wie `og:type`, `og:site_name` und `og:locale` liefern weiteren Kontext. Ohne OG-Tags versuchen Plattformen zu erraten, was angezeigt werden soll, indem sie die Seite analysieren, was häufig zu defekten Bildern, abgeschnittenem Text oder irrelevantem Inhalt führt.
Warum Es Wichtig Ist
Jeder auf Social Media geteilte Link generiert eine Vorschaukarte. Diese Karte ist das Erste und oft das Einzige, was Menschen sehen, bevor sie entscheiden, ob sie klicken. Ein gut konfiguriertes OG-Bild, ein klarer Titel und eine überzeugende Beschreibung können die Klickraten im Vergleich zu einer generischen oder fehlenden Vorschau vervielfachen. Für Verleger, die [Flipbooks](/glossary/flipbook) über soziale Kanäle verbreiten, wirkt die Vorschaukarte wie eine Miniaturwerbung für den Inhalt. OG-Tags beeinflussen auch, wie Links in Messaging-Apps wie WhatsApp, Slack und iMessage erscheinen, was bedeutet, dass sie das Klickverhalten weit über Social-Media-Feeds hinaus beeinflussen.
So Funktioniert Es in FlipLink
FlipLinks Funktion [SEO und Social-Vorschauen](/features/seo-and-social-previews) ermöglicht die Konfiguration von OG-Tags für jede Publikation. Du legst einen benutzerdefinierten Titel, eine Beschreibung und ein Vorschaubild über die Publikationseinstellungen fest, und FlipLink generiert automatisch die korrekten Meta-Tags `og:title`, `og:description`, `og:image`, `og:url` und `og:type`. Das bedeutet, dass jeder geteilte [Flipbook](/glossary/flipbook)-Link eine professionelle, markengerechte Vorschaukarte anzeigt, ohne dass HTML bearbeitet werden muss. Das OG-Bild kann das Cover deines Flipbooks oder eine benutzerdefinierte Grafik für [Social Sharing](/glossary/social-sharing) sein.
Einrichtungs-Checkliste
Befolge diese Schritte, um OG-Tags korrekt für maximale Social-Sharing-Wirkung zu konfigurieren:
1. **og:title festlegen** - Halte ihn unter 60 Zeichen. Verwende einen beschreibenden Titel, der das Inhaltsthema enthält, nicht nur deinen Markennamen. Beispiel: „Frühjahrskollektion Katalog | IhreMarke" statt nur „IhreMarke."
2. **og:description schreiben** - Ziele auf 120-155 Zeichen. Füge ein Wertversprechen oder einen Call-to-Action ein. Beschreibe, was der Leser im Flipbook finden wird.
3. **og:image wählen** - Verwende ein Bild von mindestens 1200x630 Pixeln. Das Cover des Flipbooks funktioniert gut, aber eine benutzerdefinierte Social-Grafik mit Textüberlagerung kann besser performen. Vermeide Bilder mit zu viel kleinem Text, da sie als Miniaturansichten angezeigt werden.
4. **og:url überprüfen** - Dies sollte die [kanonische URL](/glossary/canonical-url) der Publikation sein. Wenn dein Flipbook über mehrere URLs zugänglich ist, sollte og:url auf die primäre verweisen.
5. **og:type festlegen** - Verwende „website" für Landingpages und „article" für einzelne Publikationen oder Blogbeiträge.
6. **Vor dem Teilen testen** - Nutze Facebooks Sharing Debugger, Twitters Card Validator oder LinkedIns Post Inspector, um vorab zu sehen, wie dein Link erscheinen wird, bevor du ihn öffentlich teilst.
Häufig Gestellte Fragen
**Was passiert, wenn ich keine OG-Tags setze?**
Die Social-Media-Plattform wird versuchen, deine Seite zu analysieren und Titel, Beschreibung und Bild zu erraten. Die Ergebnisse sind unvorhersehbar: Sie könnten ein zufälliges Bild von der Seite, einen abgeschnittenen HTML-Titel oder gar keine Vorschau erhalten. Explizite OG-Tags zu setzen beseitigt dieses Rätselraten vollständig.
**Beeinflussen OG-Tags das SEO-Ranking?**
OG-Tags beeinflussen das Suchmaschinen-Ranking nicht direkt. Sie beeinflussen jedoch erheblich die Klickraten auf geteilte Links, was Traffic generiert. Mehr Traffic und Engagement können deine Suchsichtbarkeit im Laufe der Zeit indirekt verbessern.
**Sind OG-Tags dasselbe wie Twitter Cards?**
Twitter hat eigene Meta-Tags (`twitter:card`, `twitter:title`, `twitter:image`), greift aber auf OG-Tags zurück, wenn Twitter-spezifische Tags nicht vorhanden sind. Die meisten Plattformen, einschließlich LinkedIn, WhatsApp, Slack und iMessage, nutzen OG-Tags als primäre Quelle für Link-Vorschauen.
Technische Details
OG-Tags folgen einer einfachen HTML-Struktur innerhalb des `<head>`-Elements:
- `og:title` - Der in der Vorschau angezeigte Titel. Sollte sich vom `<title>`-Tag der Seite unterscheiden, wenn der Seitentitel Navigations-Breadcrumbs oder seitenweite Suffixe enthält, die im sozialen Kontext keinen Sinn ergeben.
- `og:description` - Eine knappe Zusammenfassung. Anders als die Meta-Description für Suchmaschinen sollte die OG-Description für den sozialen Kontext optimiert sein: kürzer, direkter und handlungsorientiert.
- `og:image` - Eine absolute URL zur Bilddatei. Facebook empfiehlt 1200x630 Pixel. Bilder kleiner als 200x200 Pixel werden auf manchen Plattformen möglicherweise nicht gerendert.
- `og:type` - Kategorisiert den Inhalt. Häufige Werte sind „website", „article", „product" und „video.other".
- `og:url` - Die kanonische URL. Dies verhindert doppelte Vorschaukarten, wenn derselbe Inhalt über mehrere URLs erreichbar ist.
- `og:locale` - Gibt die Inhaltssprache an (z.B. „en_US", „de_DE"). Nützlich für mehrsprachige Publikationen.
Wenn eine URL geteilt wird, ruft der Crawler der Plattform die Seite ab, liest die OG-Tags aus dem HTML und cached das Ergebnis. Deshalb wirken sich Änderungen an OG-Tags nicht sofort auf Plattformen aus, die bereits die alte Vorschau gecached haben. Verwende das Debug-Tool jeder Plattform, um nach dem Aktualisieren der Tags einen erneuten Abruf zu erzwingen.
Verwandte Begriffe
Payment-Gateway
Ein Dienst zur Abwicklung von Online-Zahlungen, wie Stripe, der den Dokumentenverkauf über FlipLink ermöglicht.
PDF.js
Mozillas Open-Source-JavaScript-Bibliothek, die PDF-Dateien direkt im Webbrowser darstellt.
Progressive Web App (PWA)
Eine Webanwendung, die offline funktioniert und wie eine native App auf Geräten installiert werden kann.
Responsives Design
Automatische Anpassung von Layout und Inhalt für eine optimale Darstellung auf Bildschirmen aller Größen und Geräte.
Responsives Embed
Ein Einbettungscode, der die Flipbook-Größe automatisch an den jeweiligen Container oder die Bildschirmbreite anpasst.
Verwandte Funktionen
In anderen Sprachen verfügbar
Bereit, deine
PDFs zu verwandeln?
Schließe dich Tausenden von Unternehmen an, die FlipLink nutzen, um ansprechende, interaktive Inhalte aus ihren PDFs zu erstellen. Starte kostenlos — keine Kreditkarte erforderlich.