Was ist Open Graph? Ein vollständiger Leitfaden für Anfänger
Sie teilen einen Link in den sozialen Medien. Die Vorschau sieht schrecklich aus. Hier erfahren Sie, warum – und wie Open Graph-Tags das Problem beheben.
Möchten Sie sehen, wie Ihre Links tatsächlich aussehen?
Überprüfen Sie Ihre Open Graph-Tags kostenlos mit Proovd – fügen Sie eine URL ein und sehen Sie sich die Vorschau auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit an, bevor Sie sie teilen.
Schnelle Antwort
- Open Graph ist eine Reihe von HTML-Meta-Tags, die steuern, wie Links in sozialen Medien aussehen
- Kerntags:
og:title, og:description, og:image, og:url
- Ohne OG-Tags raten Plattformen – und sie raten schlecht
- Legen Sie OG-Tags + Twitter Card-Tags für eine vollständige Abdeckung fest
Was Open Graph eigentlich ist
Open Graph ist ein Protokoll, das 2010 von Facebook erfunden wurde. Wenn vor Open Graph jemand einen Link auf Facebook geteilt hat, war die Vorschau unvorhersehbar. Facebook durchsuchte die Seite nach Bildern und Text, und das Ergebnis war oft zufällig – manchmal ein kleines Favicon, manchmal ein zufälliges Foto von der Seite, manchmal überhaupt nichts.
Facebook sagte: „Geben wir Webmastern eine einheitliche Möglichkeit, uns zu sagen, was sie zeigen sollen.“ Sie führten eine Reihe von Meta-Tags ein, die jede Website zu ihrem HTML hinzufügen kann. Andere Plattformen – X, LinkedIn, Slack, Discord, WhatsApp, Reddit – haben denselben Standard übernommen. Heute ist Open Graph die universelle Sprache für Linkvorschauen im Internet.
Es ist keine Technologie, die Sie installieren. Es handelt sich lediglich um HTML-Meta-Tags im Abschnitt
Die Kern-Open Graph-Tags
Jede Seite, die in sozialen Medien geteilt wird, sollte mindestens diese vier Tags haben:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
Hier ist, was jeder tut:
- og:title – Die Überschrift, die in der Vorschaukarte angezeigt wird. Normalerweise der Seitentitel oder die Überschrift des Artikels.
- og:description – Eine kurze Zusammenfassung (2-3 Sätze), die unter dem Titel erscheint.
- og:image – Das Vorschaubild. Empfohlene Größe: 1200 x 630 Pixel (Verhältnis 1,91:1).
- og:url – Die kanonische URL der Seite. Hilft Plattformen, die richtige URL zu identifizieren.
Es gibt zusätzliche optionale Tags wie og:type (normalerweise „Website“ oder „Artikel“), og:site_name (Ihr Markenname) und og:locale (Sprache). Aber die vier oben genannten sind diejenigen, die für die Linkvorschau am wichtigsten sind.
So funktioniert Open Graph – Schritt für Schritt
Folgendes passiert, wenn jemand einen Link teilt:
- Jemand fügt eine URL in X, LinkedIn, Slack, Discord oder wo auch immer ein.
- Der Bot der Plattform ruft die URL ab und liest den HTML-Code von oben nach unten.
- Es sucht nach og:-Tags im Abschnitt
- Es erstellt eine Vorschaukarte unter Verwendung der Werte og:title, og:description und og:image.
- Die Karte wird jedem angezeigt, der den geteilten Link sieht.
Wenn die Plattform keine og:-Tags findet, greift sie auf ihre eigene Heuristik zurück – sie wählt zufällige Bilder aus, verwendet das Tag </code> usw. Dieses Fallback-Verhalten ist der Grund, warum so viele geteilte Links schrecklich aussehen.</p>
<h2 data-i18n="b.what-is-open-graph.31">Open Graph vs. Twitter Cards</h2>
<p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter hat ein eigenes Tag-System namens „Twitter Cards“ erstellt, bevor Open Graph existierte. Twitter Cards Verwenden Sie stattdessen die Attribute <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> und <code>twitter:image</code> <code>og:</code> Präfixe.</p>
<p data-i18n="b.what-is-open-graph.33" data-i18n-html>Heutzutage unterstützen die meisten Plattformen beides. Aber X/Twitter bevorzugt immer noch <code>twitter:card</code>-Tags gegenüber OG-Tags. Aus diesem Grund besteht die beste Vorgehensweise darin, <strong>both</strong> festzulegen:</p>
<pre><code><!-- Open Graph (works on LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<!-- Twitter/X (works on X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre>
<h2 data-i18n="b.what-is-open-graph.34">Warum das für Ihre Website wichtig ist</h2>
<p data-i18n="b.what-is-open-graph.35">Wenn Sie Ihre Inhalte irgendwo in sozialen Medien teilen – was Sie wahrscheinlich tun, wenn Sie eine Website haben – sind Ihre Linkvorschauen Ihr erster Eindruck. Eine gut gestaltete Vorschau mit einem klaren Titel, einer überzeugenden Beschreibung und einem guten Bild erhöht die Klickraten erheblich.</p>
<p data-i18n="b.what-is-open-graph.36">Eine fehlerhafte Vorschau – fehlendes Bild, abgeschnittener Titel oder unleserliche Beschreibung – lässt Ihre Inhalte unprofessionell aussehen. Die Leute scrollen daran vorbei.</p>
<p data-i18n="b.what-is-open-graph.37">Open Graph Tags sind der Unterschied zwischen den beiden. Die Einrichtung dauert 5 Minuten und hat einen unverhältnismäßigen Einfluss auf die Leistung Ihrer Inhalte in sozialen Medien.</p>
<h2 data-i18n="b.what-is-open-graph.38">Schnelle Checkliste</h2>
<div class="checklist">
<ol>
<li data-i18n="b.what-is-open-graph.39" data-i18n-html>Fügen Sie <code>og:title</code>, <code>og:description</code>, <code>og:image</code> und <code>og:url</code> zu jeder Seite hinzu</li>
<li data-i18n="b.what-is-open-graph.40" data-i18n-html>Fügen Sie <code>twitter:card</code> und <code>twitter:image</code> für X/Twitter-Kompatibilität hinzu</li>
<li data-i18n="b.what-is-open-graph.41">Stellen Sie die Bildgröße auf 1200×630 Pixel ein</li>
<li data-i18n="b.what-is-open-graph.42">Verwenden Sie absolute URLs (https://...) für alle Bildpfade</li>
<li data-i18n="b.what-is-open-graph.43" data-i18n-html>Testen Sie mit <a href="https://proovd.in/de/">Proovd</a>, um zu sehen, wie Ihre Seite auf allen Plattformen aussieht</li>
</ol>
</div>
<h2 data-i18n="b.what-is-open-graph.44">Häufig gestellte Fragen</h2>
<div class="faq-item">
<h3 data-i18n="b.what-is-open-graph.45">Benötige ich Open Graph-Tags, wenn ich nicht in sozialen Medien teile?</h3>
<p data-i18n="b.what-is-open-graph.46">Wenn Sie nirgendwo Links teilen, brauchen Sie sie nicht. Aber wenn Sie eine Website haben und diese auch nur einmal in den sozialen Medien teilen, sind OG-Tags unerlässlich.</p>
</div>
<div class="faq-item">
<h3 data-i18n="b.what-is-open-graph.47">Beeinflussen Open Graph-Tags das Google-Ranking?</h3>
<p data-i18n="b.what-is-open-graph.48">Nicht direkt. Google verwendet OG-Tags nicht als Rankingfaktor. Sie können sich jedoch auf die Klickraten von Suchergebnissen und Social Shares auswirken, was sich indirekt auf den Traffic und die Sichtbarkeit auswirkt.</p>
</div>
<div class="faq-item">
<h3 data-i18n="b.what-is-open-graph.49">Kann ich für verschiedene Seiten unterschiedliche OG-Tags festlegen?</h3>
<p data-i18n="b.what-is-open-graph.50">Ja. Jede Seite sollte ihre eigenen OG-Tags haben, die zu ihrem Inhalt passen. Ein Blogbeitrag über Hunde sollte andere og:title und og:image haben als eine Seite über Katzen.</p>
</div>
<div class="internal-links">
<h3 data-i18n="b.what-is-open-graph.51">Verwandte Artikel</h3>
<ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/de/blog/discord-link-preview-not-working">Discord Linkvorschau funktioniert nicht? 7 Korrekturen zum Ausprobieren (2026)</a></li>
<li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/de/blog/how-to-add-open-graph-tags">So fügen Sie Open Graph Tags zu jeder Website hinzu</a></li>
<li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/de/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card: Was ist der Unterschied?</a></li>
<li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/de/blog/og-image-size-guide">Open Graph Bildgröße: Der komplette Leitfaden für 2026</a></li>
</ul>
</div>
<div class="cta">
<p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>Überprüfen Sie Ihre Open Graph Tags in Sekunden</strong></p>
<p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>Überprüfen Sie Ihre Open Graph-Tags kostenlos mit <a href="https://proovd.in/de/">Proovd</a> – fügen Sie eine URL ein und sehen Sie sich die Vorschau auf X, LinkedIn, Slack, Discord, WhatsApp und Reddit an.</p>
</div>
</article>
</div>
<script src="/i18n/apply.js" defer></script>
</body>
</html>