Zum Hauptinhalt springen

Was ist Open Graph?

image

Definition​

Open Graph Protocol ist ein von Facebook im Jahr 2010 entwickeltes Metadaten-Protokoll, das steuert, wie Webseiten dargestellt werden, wenn sie in sozialen Medien geteilt werden. Einfach ausgedrückt, handelt es sich um HTML-Meta-Tags, die den Titel, die Beschreibung und das Bild vorab definieren, die erscheinen, wenn Sie einen Blog-Link auf Facebook, KakaoTalk, LinkedIn usw. teilen.

Mit Open Graph können Sie Ihre Webseite in ein "Objekt" für soziale Medien verwandeln. Wenn Sie beispielsweise einen Blog-Beitrag teilen, wird nicht nur eine URL angezeigt, sondern ein attraktives Vorschaubild erscheint zusammen mit Titel und Zusammenfassung in einem schön gestalteten Kartenformat. Dies erhöht die Klickraten erheblich und ist zu einem Kernelement des Social-Media-Marketings geworden.

Open Graph wird mit Tags im Format <meta property="og:xxx"> im <head>-Bereich implementiert. Obwohl es von Facebook entwickelt wurde, wird es heute als Standard von den meisten Social-Media-Plattformen übernommen, darunter Twitter (X), LinkedIn, Slack, KakaoTalk und Line. Ohne Open Graph extrahieren soziale Plattformen willkürlich Inhalte von Ihrer Seite, was möglicherweise unbeabsichtigte Bilder oder Texte anzeigt.

Merkmale​

  • Social-Media-Optimierung: Kontrollieren Sie präzise Titel, Beschreibungen und Bilder beim Teilen von Links, um die Klickraten erheblich zu verbessern. Untersuchungen zeigen, dass Links mit Open Graph-Bildern bis zu 200% höheres Engagement aufweisen.
  • Standardprotokoll: Von Facebook entwickelt, aber heute ein De-facto-Industriestandard, der von fast allen sozialen Plattformen unterstützt wird. Einmal eingerichtet, funktioniert es auf mehreren Plattformen.
  • Einfache Implementierung: Technisch nicht komplex, da Sie nur Meta-Tags zum HTML-<head>-Bereich hinzufügen müssen. Jeder kann es ohne Programmierkenntnisse einfach anwenden.
  • Debug-Tools verfügbar: Facebook, LinkedIn und andere bieten offizielle Debug-Tools zum Testen und Vorschauen von Open Graph-Tags.
  • Nützlich für Suchmaschinen: Open Graph-Informationen werden auch von Suchmaschinen referenziert und helfen indirekt beim SEO. Besonders effektiv für die Optimierung der Bildsuche.

Verwendung​

So nutzen Sie Open Graph effektiv.

Schritt 1: Erforderliche Open Graph-Tags hinzufügen Fügen Sie grundlegende Open Graph-Tags zum <head>-Bereich Ihrer Webseite hinzu. Mindestens vier Tags müssen enthalten sein: og:title, og:type, og:url und og:image. Dies sind die vier Kernelemente von Open Graph.

<head>
  <meta property="og:title" content="Vollständiger Blog-SEO-Optimierungsleitfaden">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/seo-guide">
  <meta property="og:image" content="https://zero-coke.com/images/seo-thumbnail.jpg">
</head>

Schritt 2: Optionale Tags hinzufügen Fügen Sie Beschreibung, Seitenname, Locale usw. hinzu, um reichhaltigere Informationen bereitzustellen. og:description ist besonders wichtig und sollte überzeugende Texte enthalten, die zum Klicken anregen.

<meta property="og:description" content="Schritt-für-Schritt Blog-SEO-Optimierungsmethoden, denen auch Anfänger leicht folgen können.">
<meta property="og:site_name" content="Zero-Coke Blog">
<meta property="og:locale" content="de_DE">

Schritt 3: Bildoptimierung Das wichtigste Element in Open Graph ist das Bild. Vorschaubilder bestimmen den ersten Eindruck, wählen Sie daher sorgfältig aus. Facebook empfiehlt 1200x630px, mindestens 600x314px. Dateigröße unter 8MB halten.

<meta property="og:image" content="https://zero-coke.com/images/thumbnail.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="SEO-Optimierungsleitfaden Vorschaubild">

Schritt 4: Inhaltstypspezifische zusätzliche Tags Für Blog-Beiträge (Artikel) können Sie zusätzliche Informationen wie Autor, Veröffentlichungsdatum und Kategorie bereitstellen. Dies hilft, reichhaltigere Informationen in News-Feeds anzuzeigen.

<meta property="article:author" content="Max Mustermann">
<meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Blog">
<meta property="article:tag" content="SEO">

Schritt 5: Debuggen und Testen Testen Sie nach dem Hinzufügen der Tags immer. Geben Sie Ihre URL in den Facebook-Sharing-Debugger (https://developers.facebook.com/tools/debug/) ein, um eine Vorschau anzuzeigen, wie Open Graph dargestellt wird. Beheben Sie Fehler sofort.

Schritt 6: Cache aktualisieren Wenn Sie Open Graph für eine bereits geteilte URL geändert haben, müssen Sie den Cache der sozialen Plattform aktualisieren. Klicken Sie im Facebook-Sharing-Debugger auf die Schaltfläche "Erneut abrufen", um auf die neuesten Informationen zu aktualisieren. Jede Plattform bietet ähnliche Tools.

Beispiele​

Beispiel 1: Grundlegendes Open Graph für Blog-Beitrag

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Was sind Backlinks? SEO-Leitfaden für Anfänger</title>

  <!-- Grundlegende Open Graph-Tags -->
  <meta property="og:title" content="Was sind Backlinks? Vollständiger Leitfaden für SEO-Anfänger">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://zero-coke.com/blog/what-is-backlink">
  <meta property="og:image" content="https://zero-coke.com/img/backlink-guide.jpg">
  <meta property="og:description" content="Erklärt Definition, Wichtigkeit und Methoden zum Erwerb von Backlinks auf eine Weise, die auch Anfänger leicht verstehen können.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="de_DE">

  <!-- Artikel-bezogene zusätzliche Tags -->
  <meta property="article:author" content="Max Mustermann">
  <meta property="article:published_time" content="2024-03-23T09:00:00+09:00">
  <meta property="article:modified_time" content="2024-03-23T14:30:00+09:00">
  <meta property="article:section" content="SEO">
  <meta property="article:tag" content="Backlinks">
  <meta property="article:tag" content="SEO">
  <meta property="article:tag" content="Suchmaschinenoptimierung">
</head>
<body>
  <!-- Seiteninhalt -->
</body>
</html>

Beispiel 2: Open Graph mit Bildoptimierung

<head>
  <!-- Grundlegende Informationen -->
  <meta property="og:title" content="Digital Marketing Trends 2024">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/marketing-trends-2024">

  <!-- Detaillierte Bildinformationen -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:secure_url" content="https://example.com/images/marketing-trends-main.jpg">
  <meta property="og:image:type" content="image/jpeg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Digital Marketing Trends 2024 Infografik">

  <!-- Mehrere Bilder (Plattform wählt) -->
  <meta property="og:image" content="https://example.com/images/marketing-trends-square.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">

  <!-- Zusätzliche Informationen -->
  <meta property="og:description" content="Analysiert zu beachtende Digital Marketing Trends 2024 einschließlich KI, Influencer-Marketing und Kurzform-Inhalte.">
  <meta property="og:site_name" content="Marketing Insights">
</head>

Beispiel 3: E-Commerce-Produktseite

<head>
  <!-- Grundlegende Produktinformationen -->
  <meta property="og:title" content="Premium Wireless Bluetooth-Ohrhörer - XYZ-2000">
  <meta property="og:type" content="product">
  <meta property="og:url" content="https://shop.example.com/products/xyz-2000">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-main.jpg">
  <meta property="og:description" content="Hochwertige kabellose Ohrhörer mit Geräuschunterdrückung. Bis zu 30 Stunden Wiedergabe.">

  <!-- Produktspezifische Informationen -->
  <meta property="product:price:amount" content="129.00">
  <meta property="product:price:currency" content="EUR">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:brand" content="TechSound">
  <meta property="product:retailer_item_id" content="XYZ2000-BLK">

  <!-- Zusätzliche Bilder -->
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-side.jpg">
  <meta property="og:image" content="https://shop.example.com/products/xyz-2000-case.jpg">
</head>

Beispiel 4: Video-Inhalt

<head>
  <!-- Grundlegende Videoinformationen -->
  <meta property="og:title" content="Vollständiger Leitfaden zur Blog-Monetarisierung (2024 aktuell)">
  <meta property="og:type" content="video.other">
  <meta property="og:url" content="https://example.com/video/blog-monetization">
  <meta property="og:image" content="https://example.com/video/thumbnails/blog-monetization.jpg">
  <meta property="og:description" content="1000€/Monat mit Ihrem Blog verdienen. Wir zeigen Ihnen alles von AdSense bis zum Affiliate-Marketing und digitalen Produktverkauf.">

  <!-- Videospezifische Informationen -->
  <meta property="og:video" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:secure_url" content="https://example.com/video/blog-monetization.mp4">
  <meta property="og:video:type" content="video/mp4">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  <meta property="video:duration" content="1200">
  <meta property="video:release_date" content="2024-03-23T09:00:00+09:00">

  <!-- YouTube-Einbettungs-URL -->
  <meta property="og:video" content="https://www.youtube.com/embed/abc123xyz">
  <meta property="og:video:type" content="text/html">
</head>

Beispiel 5: Website-Startseite

<head>
  <!-- Gesamte Website-Informationen -->
  <meta property="og:title" content="Zero-Coke - Blog-SEO-Optimierungsspezialist">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://zero-coke.com">
  <meta property="og:image" content="https://zero-coke.com/images/og-homepage.jpg">
  <meta property="og:description" content="Wir teilen Expertenwissen über Blog-SEO, Suchmaschinenoptimierung und Webentwicklung. Praktische Leitfäden für jeden, vom Anfänger bis zum Experten.">
  <meta property="og:site_name" content="Zero-Coke">
  <meta property="og:locale" content="de_DE">
  <meta property="og:locale:alternate" content="en_US">

  <!-- Social-Media-Profile -->
  <meta property="og:see_also" content="https://twitter.com/zerocoke">
  <meta property="og:see_also" content="https://www.facebook.com/zerocoke">
  <meta property="og:see_also" content="https://www.instagram.com/zerocoke">
</head>

Vor- und Nachteile​

Vorteile​

  • Dramatisch verbesserte Klickraten: Links mit attraktiven Vorschaubildern und Beschreibungen haben 2-3 mal höhere Klickraten als reine Text-Links. Der effektivste Weg, um Social-Media-Traffic zu erhöhen.

  • Verbessertes Markenimage: Die Verwendung konsistenter Open Graph-Bilder und Beschreibungen schafft ein professionelles und vertrauenswürdiges Markenimage. Gut gestaltete Vorschaubilder erhöhen die Markenbekanntheit.

  • Vielseitigkeit und Kompatibilität: Einmal eingerichtet, gilt es automatisch für die meisten Plattformen, einschließlich Facebook, Twitter, LinkedIn, KakaoTalk und Slack. Keine separate Konfiguration für jede Plattform erforderlich.

Nachteile​

  • Bilderstellungsaufwand: Benötigt Design-Ressourcen, da Sie für jede Seite geeignete Open Graph-Bilder erstellen müssen. Kann bei vielen Blog-Beiträgen erhebliche Arbeit sein.

  • Cache-Probleme: Soziale Plattformen cachen Open Graph-Informationen, sodass Änderungen nicht sofort angezeigt werden. Cache muss manuell aktualisiert werden, und bereits geteilte Links werden möglicherweise nicht aktualisiert.

  • Plattformunterschiede: Während die meisten Plattformen Open Graph unterstützen, bevorzugen einige ihre eigenen Tags. Twitter priorisiert beispielsweise Twitter Cards, sodass für eine perfekte Optimierung möglicherweise zusätzliche Arbeit erforderlich ist.

FAQ​

F: Was passiert ohne Open Graph? A: Links können auch ohne Open Graph-Tags geteilt werden, aber soziale Plattformen extrahieren willkürlich Informationen von der Seite. Dies kann dazu führen, dass unbeabsichtigte Bilder oder Texte angezeigt werden oder überhaupt kein Vorschaubild erscheint. Dies senkt die Klickraten erheblich.

F: Was ist die optimale Open Graph-Bildgröße? A: Facebook empfiehlt 1200x630px (Seitenverhältnis 1,91:1). Mindestgröße ist 600x314px; kleinere Größen verschlechtern die Qualität. Die Bereitstellung quadratischer Bilder (1200x1200px) zeigt sich auf verschiedenen Plattformen besser. Dateigröße sollte unter 8MB liegen, JPG- oder PNG-Formate werden bevorzugt.

F: Was ist der Unterschied zwischen og:title und HTML-title-Tag? A: Das HTML-<title>-Tag ist der Titel, der in Browser-Tabs und Suchergebnissen angezeigt wird, während og:title der Titel ist, der beim Teilen in sozialen Medien angezeigt wird. Sie können gleich sein, aber kürzere, überzeugendere Titel für soziale Medien können effektiver sein. Beispiel: <title> ist "Was sind Backlinks? Definition, Merkmale, Erwerbsmethoden Vollständiger Leitfaden | Zero-Coke", während og:title "Wie Sie Blog-Rankings mit Backlinks steigern" ist.

F: Ich habe Open Graph geändert, aber es wird nicht aktualisiert. Was soll ich tun? A: Soziale Plattformen cachen Open Graph-Informationen zur Leistungsverbesserung. Klicken Sie im Facebook-Sharing-Debugger (https://developers.facebook.com/tools/debug/) auf die Schaltfläche "Erneut abrufen", um den Cache zu aktualisieren. LinkedIn verwendet Post Inspector (https://www.linkedin.com/post-inspector/), Twitter hat Card Validator. Bereits geteilte Beiträge werden nicht aktualisiert, daher können wichtige Änderungen ein erneutes Teilen erfordern.