So fügen Sie Open-Graph-Tags hinzu: Platzieren Sie einen kleinen Satz von og:-Meta-Tags im <head> Ihrer Seite, geben Sie ihnen einen Titel, eine Beschreibung und ein 1200x630-Bild, und validieren Sie das Ergebnis, bevor Sie es teilen. Open Graph ist das Protokoll, das steuert, was Facebook, LinkedIn, Discord, Slack und die meisten anderen Plattformen anzeigen, wenn jemand Ihren Link einfügt. Ohne es sieht Ihr Link wie nackter Text oder eine kaputte Vorschau aus.
Diese Anleitung enthält den exakten Copy-Paste-Tag-Satz (kein Plugin, kein CMS erforderlich), die Bildgrößen, die auf jeder Plattform tatsächlich korrekt dargestellt werden, und die Lösung für das häufigste Problem: die Vorschau, die sich weigert zu aktualisieren, weil eine Plattform die alte gecacht hat. Am Ende wissen Sie, wie Sie Open-Graph-Tags von Hand hinzufügen und auf allen wichtigen Netzwerken überprüfen.
Was Open Graph Tags tatsächlich bewirken#
Open Graph (oft als OG abgekürzt) ist ein Markup-Protokoll, das Facebook 2010 eingeführt hat. Es ermöglicht Ihnen als Seitenbetreiber, genau zu bestimmen, wie Ihre URL dargestellt wird, wenn sie geteilt wird. Anstatt dass ein Crawler einen Titel errät und ein zufälliges Bild nimmt, liest er Ihre deklarierten Werte.
Wenn jemand Ihren Link in einen Beitrag, eine Nachricht oder einen Chat einfügt, ruft die Plattform Ihre Seite auf, liest die og:-Tags aus dem <head> und erstellt daraus eine Vorschaukarte. Diese Karte ist Ihr erster Eindruck. Eine saubere Karte mit einem scharfen Bild wird angeklickt. Eine nackte URL wird überblättert.
Wichtiger Punkt: Open Graph Tags beeinflussen Ihre Google-Rankings nicht direkt. Sie beeinflussen die Klickrate und Shares auf sozialen und Chat-Plattformen, was ein eigener und sehr realer Traffic-Kanal ist.
Welche Plattformen lesen Open Graph#
Fast alle, mit einer historischen Ausnahme. Die folgende Liste umfasst die acht Oberflächen, die die meisten Menschen interessieren, und welches Protokoll jede einzelne liest.
| Plattform | Liest Open Graph? | Anmerkungen |
|---|---|---|
| Ja | Der ursprüngliche Nutzer von OG; verwendet den Sharing Debugger zum Aktualisieren | |
| Ja | Liest og:title, og:description, og:image; hat einen eigenen Post Inspector | |
| X (Twitter) | Ja, mit Twitter Card Fallback | Bevorzugt twitter:-Tags, fällt auf og: zurück |
| Discord | Ja | Erstellt umfangreiche Einbettungen aus OG-Tags |
| Slack | Ja | Entfaltet Links mit OG-Tags |
| Ja | Kleine Thumbnail-Vorschau von og:image | |
| iMessage | Ja | Rich Link Vorschau von OG |
| Ja, plus eigene | Liest OG, unterstützt aber auch Rich Pins Metadaten |
Die praktische Schlussfolgerung: Richten Sie Ihre Open Graph Tags richtig ein und Sie decken die überwältigende Mehrheit der Sharing-Oberflächen mit einem einzigen Markup-Block ab.
Die essenziellen Open-Graph-Tags, die Sie brauchen#
Sie brauchen keine Dutzende von Tags. Fünf Kern-OG-Tags plus ein kleiner Twitter-Card-Block decken fast jeden realen Fall ab. Hier ist das minimale, korrekte Set, das Sie in Ihren <head> einfügen.
<!-- Open Graph Kern -->
<meta property="og:title" content="Ihr Seitentitel hier" />
<meta property="og:description" content="Eine Zusammenfassung in 1 bis 2 Sätzen, die den Klick verdient." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/ihre-seite" />
<meta property="og:type" content="website" />
<!-- Twitter Card (X liest diese, greift auf og: zurück, falls fehlend) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Ihr Seitentitel hier" />
<meta name="twitter:description" content="Eine Zusammenfassung in 1 bis 2 Sätzen, die den Klick verdient." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
Ein paar Dinge, die Sie über diesen Block wissen sollten, denn die Details sind der Punkt, an dem Vorschauen brechen:
og:-Tags verwendenproperty, Twitter-Tags verwendenname. Das bringt viele durcheinander.<meta property="og:title">ist korrekt;<meta name="og:title">ist technisch falsch und wird von manchen Crawlern ignoriert.og:urlsollte die kanonische, absolute URL sein. Verwenden Sie die vollständigehttps://-Adresse, keinen relativen Pfad. Dies wird der Link, auf den die Vorschau zeigt.og:imagemuss ebenfalls eine absolute URL sein. Ein relativer Pfad wie/og.jpgwird nicht aufgelöst, wenn ein externer Crawler Ihre Seite abruft.twitter:cardaufsummary_large_imagegesetzt gibt Ihnen die große Banner-Karte. Lassen Sie es weg und X zeigt stattdessen ein winziges quadratisches Vorschaubild.
Optionale Tags, die sich für Artikel lohnen#
Wenn die Seite ein Blogbeitrag oder Artikel ist (keine generische Seite), sorgen zwei zusätzliche Tags für mehr Glanz und ermöglichen auf manchen Plattformen reichhaltigere Einbettungen.
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Ihre Marke" />
<meta property="article:published_time" content="2026-06-25T08:00:00Z" />
Setzen Sie og:type auf article für Beiträge und auf website für Startseiten, Landingpages und Tools. Das og:site_name zeigt Ihre Marke auf mehreren Plattformen über oder unter dem Titel an, was die Wiedererkennung bei Shares fördert.
Die og:image-Größe, die überall korrekt dargestellt wird#
Das Bild ist der Teil, der am häufigsten falsch gemacht wird, und es ist der Teil, der visuell am wichtigsten ist. Es gibt eine sichere Spezifikation, die auf allen großen Plattformen funktioniert.
Verwenden Sie 1200 x 630 Pixel bei einem Seitenverhältnis von 1,91:1. Dies ist die von Facebook empfohlene Größe und wird auf LinkedIn, X (als große Bildkarte), Discord und Slack ohne unschönes Zuschneiden sauber dargestellt. Halten Sie wichtigen Text und Gesichter von den äußersten Rändern fern, da einige Plattformen einen leichten Beschnitt vornehmen.
Hier ist eine kurze Übersicht für die Plattformen mit strengeren oder abweichenden Anforderungen.
| Anwendungsfall | Empfohlene Größe | Seitenverhältnis | Hinweise |
|---|---|---|---|
| Universelles OG-Bild | 1200 x 630 | 1,91:1 | Der Standard, der fast überall funktioniert |
| X große Zusammenfassungskarte | 1200 x 628 | ~1,91:1 | Effektiv identisch mit der universellen Größe |
| X kleine Zusammenfassungskarte | 144 x 144 (mindestens) | 1:1 | Nur wenn Sie twitter:card auf summary setzen |
| 1200 x 627 | ~1,91:1 | Behandeln Sie 1200 x 630 als sicher | |
| Discord / Slack | 1200 x 630 | 1,91:1 | Skaliert das universelle Bild sauber herunter |
Ein paar Bildregeln, die kaputte oder unscharfe Vorschauen verhindern:
- Halten Sie die Datei unter etwa 5 MB. Facebook und andere überspringen möglicherweise zu große Bilder, sodass gar kein Vorschaubild angezeigt wird.
- Verwenden Sie JPG oder PNG. Die WebP-Unterstützung ist bei Crawlern uneinheitlich. Verwenden Sie daher für OG-Bilder die sicheren Formate, auch wenn Ihre Website sonst WebP verwendet.
- Stellen Sie es über HTTPS bereit. Ein gemischtes
http://-Bild innerhalb einer HTTPS-Seite kann verworfen werden. - Geben Sie die Abmessungen explizit an. Das Hinzufügen von
og:image:widthundog:image:heighthilft Plattformen, den richtigen Platz zu reservieren und schneller zu rendern.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Wenn Sie eine gebrandete Karte in der richtigen Größe gestalten möchten, ohne ein Designtool zu öffnen, erstellt der kostenlose Meta-Tag- und Open-Graph-Generator den vollständigen Tag-Block und zeigt Ihnen genau, wie das 1200x630-Bild in der Vorschau sitzt.
So fügen Sie Open Graph Tags Schritt für Schritt hinzu#
Diese Anleitung funktioniert für jede Website, bei der Sie den HTML-<head> bearbeiten können: eine handcodierte Seite, ein Static Site Generator, eine benutzerdefinierte Vorlage oder ein Framework wie Next.js oder Astro. Kein Plugin erforderlich. Folgen Sie diesen Schritten, um Open Graph Tags von Grund auf hinzuzufügen und zu überprüfen, ob sie funktionieren.
Schritt 1: Schreiben Sie Titel und Beschreibung#
Legen Sie zuerst den genauen Text fest. Ihr og:title kann sich von Ihrem <title>-Tag und Ihrer SEO-Meta-Beschreibung unterscheiden, und das sollte er oft auch. Der OG-Titel und die Beschreibung sind für einen Menschen geschrieben, der durch einen Social Feed scrollt, also machen Sie sie prägnant und nutzenorientiert.
Halten Sie og:title unter etwa 60 bis 90 Zeichen, damit er nicht abgeschnitten wird, und og:description bei etwa 110 bis 200 Zeichen, je nach Plattform. Kürzer ist sicherer. Wenn Sie sehen möchten, wie sich die Länge auch auf das Suchergebnis auswirkt, finden Sie in unserem Leitfaden zur Meta-Beschreibungslänge und Pixelbreite detaillierte Informationen zu den Abschneidegrenzen.
Schritt 2: Erstellen und hosten Sie Ihr og:image#
Erstellen Sie ein 1200x630 Bild mit Ihrer Überschrift, Ihrem Logo und einem sauberen Hintergrund. Exportieren Sie es als JPG oder PNG und laden Sie es dann an einem Ort mit einer stabilen, öffentlichen HTTPS-URL hoch. Das kann Ihr eigener Server, ein /images/-Ordner oder ein CDN sein.
Kopieren Sie die vollständige absolute URL des hochgeladenen Bildes. Sie werden sie sowohl in og:image als auch in twitter:image einfügen. Öffnen Sie die URL direkt in einem Browser, um zu bestätigen, dass sie ohne Login-Wall oder Weiterleitung lädt, da Crawler sich nicht einloggen können.
Schritt 3: Fügen Sie die Tags in Ihren Head ein#
Fügen Sie den vollständigen Tag-Block aus dem obigen Abschnitt in den <head> Ihrer Seite ein, idealerweise oben in der Nähe Ihrer anderen Meta-Tags. Ersetzen Sie die Platzhalterwerte durch Ihren tatsächlichen Titel, Beschreibung, Bild-URL und kanonische Seiten-URL.
<head>
<meta charset="utf-8" />
<title>Ihr Seitentitel hier</title>
<meta property="og:title" content="Ihr Seitentitel hier" />
<meta property="og:description" content="Eine Zusammenfassung, die den Klick verdient." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/ihre-seite" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
</head>
Wenn Sie ein Framework verwenden, setzen Sie diese in der Head- oder Metadaten-API des Frameworks, anstatt das rohe HTML zu bearbeiten. Die Tag-Namen bleiben identisch, unabhängig davon, wie Sie sie einfügen.
Schritt 4: Validieren Sie vor dem Teilen#
Gehen Sie nicht davon aus, dass es funktioniert. Jede Plattform bietet ein Debugging-Tool, das Ihre Seite abruft und die genaue Karte anzeigt, die gerendert wird. Führen Sie Ihre URL durch diese, bevor Sie sie irgendwo posten:
- Facebook Sharing Debugger für Facebook und die meisten generischen OG-Konsumenten.
- LinkedIn Post Inspector für LinkedIn-Vorschauen.
- Die X (Twitter) Card Vorschau, sichtbar durch Einfügen des Links in einen Entwurfsbeitrag.
Diese Validatoren melden auch fehlende oder fehlerhafte Tags, sodass sie gleichzeitig als Fehlerprüfung dienen. Wenn die Karte falsch aussieht, korrigieren Sie das von ihnen markierte Tag und führen Sie den Test erneut durch.
Schritt 5: Vorschau auf allen Plattformen gleichzeitig#
Drei separate Debugger für jeden Link auszuführen, wird schnell mühsam. Um zu sehen, wie eine URL auf allen wichtigen Plattformen in einer Ansicht aussieht, fügen Sie sie in ein Multi-Plattform-Vorschau-Tool ein. Das SERP- und Social-Preview-Tool rendert Ihren Titel, Ihre Beschreibung und Ihr OG-Bild nebeneinander, sodass Sie ein abgeschnittenes Bild oder eine abgeschnittene Überschrift in Sekunden erkennen, nicht erst nach einem fehlgeschlagenen Post.
Behebung des Cache-Problems bei nicht aktualisierten Bildern#
Dies ist das frustrierendste Open-Graph-Problem, und fast niemand dokumentiert die echte Lösung. Sie haben Ihr og:image aktualisiert, den Link erneut geteilt, und das alte Bild (oder gar keins) wird immer noch angezeigt. Die Tags sind korrekt. Warum funktioniert es nicht?
Die Antwort ist Caching. Wenn eine Plattform Ihre URL zum ersten Mal abruft, speichert sie die OG-Daten auf ihren eigenen Servern, damit sie nicht jedes Mal neu crawlen muss, wenn jemand den Link teilt. Ändern Sie später die Tags, und die Plattform liefert weiterhin ihre veraltete Kopie, bis der Cache abläuft, was Tage dauern kann.
Die Lösung besteht darin, die Plattform zu zwingen, Ihre Seite erneut zu scrapen. Sie warten nicht ab; Sie sagen dem Cache, dass er aktualisiert werden soll.
So löschen Sie den Cache auf den Plattformen, die einen speichern:
- Facebook: Öffnen Sie den Facebook Sharing Debugger, fügen Sie Ihre URL ein und klicken Sie auf "Erneut scrapen". Dies erzwingt einen neuen Abruf und aktualisiert die zwischengespeicherte Vorschau sofort.
- LinkedIn: Verwenden Sie den LinkedIn Post Inspector. Das Ausführen Ihrer URL löst einen erneuten Abruf aus. LinkedIn speichert ansonsten historisch etwa 7 Tage zwischen.
- X (Twitter): X lässt Karten-Caches von selbst ablaufen, normalerweise innerhalb weniger Tage. Es gibt keinen öffentlichen manuellen Aktualisierungsknopf mehr, daher ist das Ändern der Bild-URL der zuverlässige Workaround.
- Discord und Slack: Beide speichern Embeds zwischen. Der zuverlässige Trick ist, den Bilddateinamen zu ändern oder einen Query-String anzuhängen (z.B.
og-image.jpg?v=2), den die Plattform als brandneue URL ohne Cache behandelt.
Der Query-String-Trick (?v=2, ?v=3) ist der universelle Fallback. Da der Cache an die genaue Bild-URL gebunden ist, umgeht eine neue URL den veralteten Eintrag auf allen Plattformen gleichzeitig. Kombinieren Sie das mit einem manuellen erneuten Scrapen auf Facebook und LinkedIn, und Ihre Vorschau wird überall aktualisiert.
Warum Ihr Bild möglicherweise nie erschienen ist#
Wenn die Vorschau von der ersten Teilung an defekt war, ist Caching nicht die Ursache. Überprüfen Sie Folgendes der Reihe nach:
- Relative Bild-URL.
og:imagemuss absolut sein (https://...), nicht/og.jpg. - Bild hinter Authentifizierung oder Weiterleitung. Crawler können Logins nicht folgen. Öffnen Sie die Bild-URL in einem Inkognito-Fenster, um dies zu bestätigen.
- Datei zu groß oder falsches Format. Bleiben Sie unter ~5 MB und verwenden Sie JPG oder PNG.
- Tag verwendet
namestattproperty. Denken Sie daran:og:-Tags benötigenproperty, nichtname. - Tags werden nach dem Laden per JavaScript eingefügt. Viele Crawler führen kein JS aus, daher müssen OG-Tags im serverseitig gerenderten HTML vorhanden sein, nicht clientseitig hinzugefügt.
Der letzte Punkt betrifft viele Single-Page-Apps. Wenn Ihre Tags erst nach der Hydrierung von React oder Vue erscheinen, rendern Sie sie serverseitig oder prerendern Sie die Seite, damit der Crawler sie in der anfänglichen HTML-Antwort sieht.
Das gesamte Tag-Block ohne manuelle Codierung generieren#
Die Tags einmal von Hand zu schreiben, ist gut zum Verständnis. Es für jede Seite zu tun, ist repetitiv und führt leicht zu subtilen Fehlern (eine fehlende property, eine relative URL, eine vergessene Twitter Card). Ein Generator nimmt die lästige Arbeit ab, während Sie die Kontrolle über die Werte behalten.
Der Open Graph und Meta-Tag Generator ermöglicht es Ihnen, Titel, Beschreibung und Bild-URL einzugeben und gibt dann den vollständigen, korrekten Block mit og: und twitter: Tags aus, der zum Einfügen bereit ist. Er verwendet property und name korrekt, macht URLs absolut und fügt die Bildabmessungs-Tags hinzu, damit Plattformen schneller rendern.
Führen Sie das Ergebnis dann durch das Social und SERP Vorschau-Tool, um zu bestätigen, dass die Karte richtig aussieht, bevor sie live geht. Diese zweistufige Schleife, generieren und dann vorschauen, ist der Weg, um Link-Vorschauen auszuliefern, die beim ersten Mal funktionieren, anstatt sie in der Öffentlichkeit zu debuggen, nachdem ein Beitrag bereits kaputt ausgesehen hat.
Fazit#
Open-Graph-Tags richtig einzubinden, ist eine kurze, wiederholbare Routine: Fügen Sie die fünf Kern-og:-Tags plus einen Twitter-Card-Block in Ihren <head> ein, setzen Sie og:image auf eine absolute 1200x630 JPG oder PNG, und validieren Sie dann mit dem Debugger jeder Plattform, bevor Sie teilen. Wenn eine Vorschau sich weigert zu aktualisieren, liegt die Ursache fast immer an einer gecachten Kopie, und die Lösung ist ein erzwungenes Re-Scraping oder eine neue Bild-URL, nicht Geduld.
Wenn Sie diese Grundlagen richtig machen, zeigt jeder Link, den Sie auf Facebook, LinkedIn, X, Discord, Slack und darüber hinaus teilen, eine saubere, gebrandete Karte, die Klicks verdient. Generieren Sie die Tags, sehen Sie sich die Vorschau an und veröffentlichen Sie mit Zuversicht.
Häufig gestellte Fragen#
Wo platziere ich Open-Graph-Tags in meinem HTML?
Open-Graph-Tags gehören in den <head>-Bereich Ihrer Seite, zusammen mit anderen Meta-Tags. Sie müssen im serverseitig gerenderten HTML vorhanden sein, damit externe Crawler sie lesen können, da die meisten Crawler kein JavaScript ausführen, das Tags nach dem Laden der Seite hinzufügt.
Welche Größe ist für og:image korrekt? Verwenden Sie 1200 x 630 Pixel mit einem Seitenverhältnis von 1,91:1. Diese einzelne Größe wird auf Facebook, LinkedIn, X, Discord und Slack sauber ohne unschöne Beschnitte dargestellt. Halten Sie die Datei unter etwa 5 MB, verwenden Sie JPG oder PNG und liefern Sie sie über HTTPS mit einer absoluten URL aus.
Warum wird in meiner Linkvorschau kein Bild angezeigt?
Die häufigsten Ursachen sind eine relative og:image-URL anstelle einer absoluten https://-URL, ein Bild hinter einem Login oder einer Weiterleitung, eine zu große Datei oder die Verwendung von name anstelle von property bei den og:-Tags. Wenn das Bild korrekt war, sich aber geändert hat und nicht aktualisiert wird, hat die Plattform die alte Version gecacht und Sie müssen ein erneutes Scraping erzwingen.
Wie aktualisiere ich eine gecachte Open-Graph-Vorschau?
Verwenden Sie den Sharing Debugger von Facebook und klicken Sie auf "Erneut scrapen", und führen Sie die URL durch den Post Inspector von LinkedIn, um ein erneutes Abrufen auszulösen. Für Discord, Slack oder einen hartnäckigen Cache ändern Sie den Bilddateinamen oder hängen Sie einen Versions-Query-String wie ?v=2 an, den die Plattform als neue URL ohne veralteten Cache behandelt.
Brauche ich Twitter-Card-Tags, wenn ich bereits Open-Graph-Tags habe?
Nicht unbedingt, da X auf Ihre og:-Tags zurückfällt, wenn Twitter-Card-Tags fehlen. Das Hinzufügen von twitter:card mit dem Wert summary_large_image lohnt sich jedoch, da es die große Banner-Bildkarte anstelle eines kleinen Thumbnails erzwingt, was im Feed deutlich besser performt.
Helfen Open-Graph-Tags bei meinem Google-Ranking? Nein, Open-Graph-Tags beeinflussen das Google-Ranking nicht direkt. Sie steuern, wie Ihre Links auf sozialen und Chat-Plattformen erscheinen, was Klicks und Shares fördert. Dieser Referral- und Marken-Traffic ist für sich genommen wertvoll, aber es ist ein separater Kanal von den organischen Suchranking-Signalen.
