Was sind Open Graph (OG) Tags? Optimieren Sie das Erscheinungsbild Ihrer Website in sozialen Medien

Open Graph (OG) Tags sind HTML-Meta-Tags, die die Vorschauinformationen festlegen, die angezeigt werden, wenn eine Webseite in sozialen Medien geteilt wird, wie Titel, Beschreibung, Bild, URL und Inhaltstyp. Kurz gesagt, OG-Tags ermöglichen es Ihnen, zu kontrollieren, wie Ihre Website auf Plattformen wie Facebook, LinkedIn, WhatsApp, X und ähnlichen Netzwerken aussieht; wenn sie richtig verwendet werden, können sie die Klickrate erhöhen, das Markenbewusstsein stärken und Fehler bei der Veröffentlichung wie falsche Bilder oder fehlende Beschreibungen verhindern.

Wenn Sie einen Blogbeitrag, eine Produktseite oder eine Unternehmensdienstleistungsseite in sozialen Medien teilen, scannen die Plattformen in der Regel Ihre Seite und generieren automatisch eine Vorschaukarte. Wenn keine Open Graph-Daten definiert sind, können soziale Netzwerke ein zufälliges Bild auswählen, einen alten Titel anzeigen oder die Beschreibung leer lassen. Dies kann insbesondere bei Kampagnenseiten, E-Commerce-Produkten, Nachrichteninhalten und Unternehmenswebsites, die für das Markenbewusstsein entscheidend sind, zu erheblichen Performanceverlusten führen.

In diesem Leitfaden für den Hostragons-Blog werden wir Schritt für Schritt erörtern, was Open Graph-Tags sind, welche OG-Tags unbedingt verwendet werden müssen, wie sie in WordPress und benutzerdefinierten Websites hinzugefügt werden, die idealen Bildgrößen, Testwerkzeuge und häufige Fehler. Zudem werden wir auch die indirekten Auswirkungen der Hosting-, SSL- und Domainkonfiguration auf die Qualität der sozialen Medienvorschau anhand praktischer Beispiele erläutern. Webhosting Domain-Abfrage SSL-Zertifikat

Was ist das Open Graph-Protokoll?

Das Open Graph-Protokoll ist ein von Facebook entwickelter Metadatenstandard. Ziel ist es, die Webseiten in sozialen Medien als reichhaltige Karten darzustellen. Die OG-Tags im HTML-Quellcode einer Seite beantworten den sozialen Netzwerk-Crawlern die folgenden Fragen: Wie lautet der Titel dieser Seite? Wie lautet die Beschreibung? Welches Bild sollte verwendet werden? Wie lautet die URL? Ist der Inhalt ein Artikel, ein Produkt oder ein Video?

Heute ist Open Graph nicht mehr nur auf Facebook beschränkt. LinkedIn, WhatsApp, Telegram, Slack und viele Messaging-Apps lesen OG-Daten, um eine Vorschau der Links zu erstellen. X, ehemals Twitter, unterstützt zwar seine eigenen Twitter Card-Tags, profitiert in den meisten Fällen jedoch auch von OG-Tags. Daher ist die Open Graph-Konfiguration eine Brücke zwischen technischem SEO, Social Media-Optimierung und Benutzererfahrung in modernen Websites.

OG-Tags werden nicht direkt als Google-Rankingfaktor angesehen; das bedeutet, dass Ihre organische Platzierung nicht automatisch ansteigt, nur weil Sie OG-Tags hinzugefügt haben. Wenn Sie jedoch in sozialen Medien klarer, professioneller und klickbarer aussehen, kann der Traffic steigen, Inhalte können häufiger geteilt werden und die Markensignale können gestärkt werden. Daher tragen OG-Tags indirekt zur digitalen Sichtbarkeit bei.

Warum sind Open Graph-Tags wichtig?

Soziale Mediennutzer treffen innerhalb von Sekunden Entscheidungen, bevor sie auf einen Link klicken. Die wichtigsten Faktoren, die diese Entscheidung beeinflussen, sind: der Titel, das Bild, die Beschreibung und die vertrauenswürdige Domain. OG-Tags machen diese vier Elemente verwaltbar. Besonders auf mobilen Geräten bietet die Vorschaukarte häufig den ersten und einzigen Eindruck der Seite für den Nutzer.

• Erhöht die Klickrate: Ein klarer Titel und ein ansprechendes Bild ziehen mehr Aufmerksamkeit im sozialen Medienfeed auf sich.
• Stellt Konsistenz der Marke sicher: Bei jeder Veröffentlichung sind das richtige Logo, die Farben, die Beschreibung und die URL sichtbar.
• Verhindert das Problem mit falschen Bildern: Es wird verhindert, dass Plattformen zufällig Bilder von der Seite auswählen.
• Verbessert das Sharing-Erlebnis: Professionelle Karten werden auf WhatsApp, LinkedIn oder Facebook erstellt.
• Unterstützt die Kampagnenleistung: Es stellt sicher, dass die Botschaft bei Produkt-, Rabatt- und Ankündigungsseiten korrekt übermittelt wird.

Betrachten wir zum Beispiel eine Hosting-Kampagnenseite. Wenn Ihr OG-Bild den Kampagnennamen, den Prozentsatz des Rabatts und die Markenfarben enthält, versteht der Nutzer sofort das Thema, sobald er den Link sieht. Fehlen jedoch OG-Tags, kann das System eine kleine Icon-Datei oder ein irrelevantes Bannerbild auswählen. Dies mindert das Vertrauen und die Klickbereitschaft. Bei der Erstellung von Kampagnenseiten sind eine vertrauenswürdige Infrastruktur, schnelle Serverantworten und die Verwendung von HTTPS ebenfalls wichtig. WordPress-Hosting Geschäftliches Hosting

Unbedingt zu verwendende OG-Tags

Obwohl die Bedürfnisse jeder Website unterschiedlich sind, sind einige Tags in der grundlegenden Open Graph-Konfiguration nahezu obligatorisch. Diese bilden das minimale Datenset, das erforderlich ist, damit soziale Plattformen Ihren Link korrekt verstehen.

og:title

og:title bestimmt den Titel, der in sozialen Medien angezeigt wird. Er muss nicht identisch mit dem SEO-Titel der Seite sein. Sie können einen kürzeren, klareren und klickintentionserzeugenden Titel für soziale Medien schreiben. In der Regel wird eine Länge von 40-60 Zeichen als sicher angesehen. Zu lange Titel können in der mobilen Vorschau abgeschnitten werden.

Beispiel: <meta property='og:title' content='Optimieren Sie Ihre Social Media-Präsenz mit Open Graph-Tags'>

og:description

og:description ist die kurze Beschreibung auf der Vorschaukarte. Sie sollte dem Nutzer klar sagen, was er auf der Seite finden wird. Ein Bereich von 120-160 Zeichen ist für die meisten Plattformen ideal. Die Beschreibung sollte informativ und ansprechend sein, nicht übertrieben wie ein Werbetext.

Beispiel: <meta property='og:description' content='Steuern Sie Titel, Bild und Beschreibung mit OG-Tags; präsentieren Sie Ihre Social Media-Beiträge professionell.'>

og:image

og:image ist die URL des Bildes, das in der Veröffentlichung angezeigt werden soll. Dieses Tag ist einer der Bereiche, die die Social Media-Performance am meisten beeinflussen. Das Bild sollte mit der vollständigen URL angegeben werden, über HTTPS zugänglich und nicht blockiert sein. Eine Größe von 1200 x 630 Pixel ist ein gängiger und sicherer Standard für horizontale Social Sharing-Karten. Halten Sie die Dateigröße idealerweise zwischen 300 KB und 1 MB für eine schnelle Ladezeit.

Beispiel: <meta property='og:image' content='https://beispielwebsite.com/bilder/open-graph-leitfaden.jpg'>

og:url

og:url gibt die kanonische Social Sharing-Adresse des Inhalts an. Die URL sollte keine Parameter, Sitzungs-ID oder Tracking-Codes enthalten. Wenn der gleiche Inhalt über verschiedene URL-Variationen zugänglich ist, kann die Klärung der bevorzugten Adresse mit der OG-URL die Aufteilungsproblematik der Sharing-Statistiken verhindern.

og:type

og:type gibt den Typ des Inhalts an. Für Blogbeiträge kann "article", für Startseiten "website" und für Produktseiten "product" verwendet werden. Diese Information hilft den Plattformen, den Inhalt korrekt zu klassifizieren.

og:site_name und og:locale

og:site_name zeigt den Markennamen Ihrer Website an. og:locale gibt die Sprach- und Regionsinformation an. Für eine auf Türkisch ausgerichtete Website in der Türkei kann der Wert tr_TR verwendet werden. In mehrsprachigen Websites ist es wichtig, die richtigen Locale-Informationen für jede Sprachversion anzugeben.

Zusammenfassungstabelle der grundlegenden OG-Tags

Der Unterschied zwischen Open Graph und Twitter Card

Während Open Graph-Tags von vielen sozialen Netzwerken verwendet werden, wurden Twitter Card-Tags speziell für Vorschauen auf der X-Plattform entwickelt. Beide Strukturen sind ähnlich, unterscheiden sich jedoch in der Benennung und einigen Eigenschaften. Die beste Praxis besteht darin, sowohl OG- als auch Twitter Card-Tags auf der Seite zusammen zu verwenden. Dadurch erscheint der Inhalt auf verschiedenen Plattformen konsistenter.

In der Praxis ergibt es oft gute Ergebnisse, den Wert von twitter:card nach der Erstellung Ihrer OG-Tags auf summary_large_image zu setzen, um eine große Bildkarte zu erhalten und in mobilen Feeds sichtbarer zu werden.

Wie fügt man Open Graph-Tags hinzu?

OG-Tags werden im HTML-Code der Seite im Head-Bereich hinzugefügt. Das bedeutet, dass sie nicht im für den Nutzer sichtbaren Inhalt, sondern im Metadatenbereich, den Browser und soziale Netzwerkrichtlinien lesen, platziert werden. Die Methode kann je nach verwendeter Infrastruktur variieren.

1. Hinzufügen von OG-Tags in WordPress-Seiten

Wenn Sie WordPress verwenden, können Sie OG-Tags ohne manuelles Programmieren verwalten. Plugins wie Yoast SEO, Rank Math oder All in One SEO erlauben es Ihnen, für jeden Beitrag und jede Seite den Titel, die Beschreibung und das Bild für soziale Medien festzulegen.

• Installieren und aktivieren Sie Ihr SEO-Plugin.
• Gehen Sie zum Bearbeitungsbildschirm des Beitrags oder der Seite.
• Öffnen Sie den Reiter für soziale Medien oder Social.
• Bestimmen Sie Titel, Beschreibung und Bild für Facebook/LinkedIn.
• Laden Sie das Bild in 1200 x 630 px hoch.
• Aktualisieren Sie die Seite und überprüfen Sie die Vorschau im Testwerkzeug.

Die Performance ist auch ein kritischer Faktor bei WordPress-Seiten. Wenn soziale Netzwerk-Bots nicht auf Ihre Seite zugreifen können oder der Server langsam reagiert, kann die Vorschau fehlen. Daher ist es wichtig, eine schnelle und zuverlässige WordPress-Infrastruktur zu verwenden. WordPress-Hosting LiteSpeed Hosting

2. Hinzufügen von OG-Tags in benutzerdefinierten oder statischen Seiten

Wenn Sie benutzerdefinierte Software, Laravel, Next.js, Nuxt, reines HTML oder einen statischen Seiten-Generator verwenden, können Sie OG-Tags auf der Template-Ebene definieren. Titel, Beschreibung und Bild für Blogbeiträge und Produktseiten sollten dynamisch aus der Datenbank abgerufen werden.

Eine einfache Beispielstruktur könnte so aussehen: <meta property='og:title' content='Seitentitel'> <meta property='og:description' content='Seitenbeschreibung'> <meta property='og:image' content='https://site.com/og-bild.jpg'> <meta property='og:url' content='https://site.com/seite'> <meta property='og:type' content='article'>

In dynamischen Systemen ist der häufigste Fehler, denselben OG-Titel und dasselbe Bild auf allen Seiten zu verwenden. Dies kann insbesondere bei E-Commerce-Websites mit Hunderten von Produktseiten die Social-Sharing-Performance verringern. Jede wichtige Seite sollte ihre eigenen OG-Daten haben, die dem jeweiligen Kontext entsprechen.

3. Verwendung von produktbasierten OG-Tags in E-Commerce-Seiten

Auf E-Commerce-Seiten sollte der Produktname im og:title-Feld, der kurze Nutzen des Produkts im og:description-Feld und ein qualitativ hochwertiges Produktfoto im og:image-Feld hinzugefügt werden. Bei nicht vorrätigen Produkten sollten irreführende Kampagnentexte vermieden werden. Wenn es Produktvariationen gibt, kann die kanonische URL des Hauptprodukts als og:url verwendet werden.

Wenn eine Produktseite in sozialen Medien geteilt wird, sollte der Nutzer sofort das Produktbild, den Preisvorteil oder das Hauptmerkmal erkennen können. Statt übertriebener Verkaufssprache in der Beschreibung ist es besser, einfach und klar zu vermitteln, was das Produkt bietet, um Vertrauen zu schaffen.

Ideale Open Graph-Bildgrößen und Dateiregeln

Das OG-Bild ist das sichtbarste Element der Vorschaukarte. Niedrig aufgelöste, abgeschnittene oder unlesbare Bilder hinterlassen einen unprofessionellen Eindruck. Bis 2026 bleibt die sicherste allgemeine Größe 1200 x 630 Pixel. Dieses Verhältnis entspricht ungefähr dem Format 1.91:1 und funktioniert auf vielen Plattformen, einschließlich Facebook und LinkedIn, gut.

• Empfohlene Größe: 1200 x 630 px.
• Minimale akzeptable Größe: 600 x 315 px, aber für die Qualität wird eine höhere Größe empfohlen.
• Format: JPG oder PNG werden häufig unterstützt; WebP kann auf einigen Plattformen Probleme verursachen.
• Dateigröße: Halten Sie sie idealerweise unter 1 MB.
• URL: Verwenden Sie unbedingt die vollständige URL; relative Pfade sollten vermieden werden.
• HTTPS: Sie sollte über eine sichere Verbindung zugänglich sein.

Vermeiden Sie es, wichtige Texte in der Bildgestaltung zu nah an den Rändern zu platzieren. Einige Plattformen können die Karte zuschneiden. Es ist sicherer, das Logo, den Titel und die Hauptbotschaft in der Mitte zu halten. Darüber hinaus reduziert die Erstellung eines einzigartigen OG-Bildes für jeden Beitrag das Gefühl der Wiederholung im sozialen Medienfeed.

Testen von Open Graph-Tags und Probleme mit dem Cache

Nach dem Hinzufügen von OG-Tags ist es wichtig, diese zu testen. Denn soziale Plattformen cachen die Seiten. Wenn einmal ein fehlerhaftes Bild oder eine fehlerhafte Beschreibung abgerufen wurde, kann das alte Erscheinungsbild trotz Änderungen eine Weile bestehen bleiben.

Verwendbare Testwerkzeuge

• Facebook Sharing Debugger: Führt eine URL-Überprüfung durch, zeigt OG-Tags an und ermöglicht es Ihnen, den Cache zu aktualisieren.
• LinkedIn Post Inspector: Wird verwendet, um die Vorschau der LinkedIn-Karte zu überprüfen.
• Twitter Card Validator: Hilft Ihnen zu sehen, ob die X-Kartenstruktur korrekt funktioniert.
• WhatsApp-Test: Sie können den Link an sich selbst senden, um die mobile Vorschau praktisch zu überprüfen.

Wenn Sie während des Tests einen 404-Fehler, eine 403-Zugriffsbeschränkung, eine SSL-Warnung oder eine robots.txt-Beschränkung sehen, könnte es sein, dass die sozialen Bots nicht auf Ihre Seite zugreifen können. In diesem Fall sollten die Sicherheitseinstellungen des Hostings, die CDN-Regeln und die Firewall-Konfiguration überprüft werden. Ein sicheres und korrekt konfiguriertes SSL spielt eine wichtige Rolle beim Zugriff sozialer Medienbots auf Bilder und Seitenressourcen. SSL-Zertifikat Was ist ein CDN? 403 Verbotene Fehlerlösung

Häufige Open Graph-Fehler

Kleine Fehler bei der Anwendung von Open Graph können große Anzeigeprobleme verursachen. Die folgenden Punkte fassen die häufigsten Probleme in technischen SEO-Überprüfungen zusammen.

• Verwendung relativer Bildpfade: Anstelle von /images/og.jpg sollte die vollständige URL https://site.com/images/og.jpg verwendet werden.
• Das Bild ist nicht zugänglich: Hotlink-Schutz, Firewalls oder falsche Dateiberechtigungen können Bots blockieren.
• Verwendung derselben OG-Inhalte auf jeder Seite: Für Blogbeiträge, Produkte und Dienstleistungsseiten sind einzigartige Titel und Beschreibungen erforderlich.
• Zu lange Titel schreiben: Auf mobilen Karten kann dies zu Abschneidungen führen und die Klarheit der Botschaft beeinträchtigen.
• HTTPS nicht verwenden: Dies kann Sicherheitswarnungen und Zugriffskostenprobleme verursachen.
• Cache nicht löschen: Soziale Plattformen können weiterhin das alte Bild anzeigen.
• Inkompatibilität zwischen kanonischer URL und OG-URL: Sharing-Signale können auf verschiedene URL-Variationen verteilt werden.

Denken wir an ein Beispiel: Sie haben das hervorgehobene Bild in Ihrem Blogbeitrag geändert, aber WhatsApp zeigt immer noch das alte Bild an. Der Grund dafür ist in der Regel der Cache der Plattform. Überprüfen Sie zunächst im Seitenquellcode, ob der Wert von og:image wirklich geändert wurde. Dann scannen Sie die URL erneut mit dem Facebook Sharing Debugger oder dem entsprechenden Plattform-Tool. Wenn immer noch das alte Bild angezeigt wird, löschen Sie den CDN-Cache und die Server-Cache-Schicht.

Wie sollten Open Graph-Tags aus SEO-Sicht bewertet werden?

Open Graph-Tags sind nicht im klassischen Sinne SEO-Tags; sie gestalten nicht direkt die Suchmaschinen-Ergebnisseite wie Titel, Meta-Beschreibung, kanonische oder strukturierte Daten. Dennoch sollten im Jahr 2026 Nutzerverhalten, Markenvertrauen, Inhaltsverteilung und multikanalige Sichtbarkeit zusammen betrachtet werden. Inhalte, die in sozialen Medien gut aussehen, können mehr Klicks, Shares und Rückmeldungen erhalten.

Insbesondere im Zeitalter von Google AI Overviews und den reichen Erfahrungen in den Suchergebnissen muss der Inhalt nicht nur für Suchmaschinenbots, sondern auch für die Vorschau-Systeme verschiedener Plattformen verständlich sein. Aus diesem Grund sind OG-Tags ein wesentlicher Bestandteil der technischen SEO-Checklisten.

Für eine gute Praxis sollten der SEO-Titel und der OG-Titel im gleichen Sinne formuliert werden. Der SEO-Titel konkurriert in den Suchergebnissen, während der OG-Titel im sozialen Feed auffällt. Beide sollten nicht im Widerspruch zueinander stehen, den Nutzer nicht irreführen und den tatsächlichen Inhalt der Seite korrekt repräsentieren. Die Meta-Beschreibung und og:description können ebenfalls ähnlich abgestimmt, jedoch plattformgerecht optimiert werden.

Schritt-für-Schritt Open Graph-Checkliste

Die folgende Checkliste kann verwendet werden, um vor der Veröffentlichung einer neuen Seite eine schnelle Überprüfung durchzuführen. Sie schafft einen standardisierten Veröffentlichungsprozess, insbesondere für Agenturen, Inhaltsteams und Webadministratoren.

• Hat die Seite einen einzigartigen OG-Titel?
• Beschreibt og:description die Seite korrekt und kurz?
• Ist og:image 1200 x 630 px groß und von guter Qualität?
• Ist das Bild für jeden über HTTPS zugänglich?
• Ist og:url mit der kanonischen URL kompatibel?
• Wurde og:type entsprechend dem Inhaltstyp korrekt ausgewählt?
• Wurde og:locale für die auf Türkisch ausgerichtete Seite als tr_TR definiert?
• Wurde die Vorschau auf Facebook, LinkedIn und WhatsApp getestet?
• Wurde eine CDN- oder Cache-Reinigung durchgeführt?
• Wurde in der mobilen Ansicht auf Bild- und Titelabschneidungen geachtet?

Die Anwendung dieser Liste für jeden neuen Blogbeitrag, Produktseite, Kampagnenseite und wichtige Unternehmensseite sorgt für Konsistenz in Ihrem sozialen Medienerscheinungsbild und beschleunigt zudem den internen Qualitätskontrollprozess.

Die Auswirkungen von Hosting, SSL und Domain auf die OG-Darstellung

Obwohl OG-Tags im HTML definiert sind, müssen sie korrekt funktionieren, damit die Webinfrastruktur gesund ist. Soziale Medienbots müssen beim Zugriff auf Ihre Seite schnelle und fehlerfreie Antworten vom Server erhalten. Wenn der Server häufig Zeitüberschreitungen hat, das SSL-Zertifikat fehlerhaft ist oder Bilder durch 403 blockiert werden, kann es zu fehlenden Vorschaukarten kommen.

Auf der Domainseite ist auch das Sicherheitsaspekt wichtig. Eine kurze, lesbare und markenkonforme Domain sieht in der sozialen Sharing-Karte professioneller aus. Ein SSL-Zertifikat ist mittlerweile ein grundlegendes Bedürfnis, sowohl für das Vertrauen der Nutzer als auch für die Plattformkompatibilität. Wenn Sie eine neue Website erstellen, sollten Sie die Domain-, Hosting- und SSL-Konfiguration von Anfang an richtig planen, um zukünftige Probleme mit sozialen Shares und SEO zu reduzieren. Domain-Abfrage Webhosting SSL-Zertifikat

Fazit: Open Graph-Tags sind eine kleine, aber mächtige Optimierung

Open Graph (OG) Tags sind grundlegende Metadaten, die es Ihnen ermöglichen, zu kontrollieren, wie Ihre Website in sozialen Medien aussieht. Durch die Verwendung des richtigen Titels, der richtigen Beschreibung, des richtigen Bildes und der richtigen URL werden Ihre Links vertrauenswürdiger, verständlicher und klickbarer. Diese Optimierung garantiert nicht direkt ein besseres Ranking; sie bietet jedoch eine starke Unterstützung in Bezug auf sozialen Traffic, Markenwahrnehmung und Inhaltsverteilung.

Das Überprüfen der OG-Tags, das Vorbereiten der Bilder in der richtigen Größe und das Testen der Sharing-Vorschau sind professionelle Gewohnheiten im Webmanagement. Wenn Sie Ihre Infrastruktur auch mit schnellem Hosting, sicherem SSL und korrektem Domainmanagement unterstützen, funktionieren Ihre sozialen Medienkarten reibungsloser. Sie können auch die Lösungen von Hostragons prüfen, um eine zuverlässige Grundlage für Ihre Website zu schaffen und Ihre OG-Überprüfungen Teil Ihres regelmäßigen Veröffentlichungsprozesses zu machen.

Häufig gestellte Fragen

Was sind Open Graph (OG) Tags?

Open Graph (OG) Tags bestimmen, welcher Titel, Beschreibung, welches Bild und welche URL angezeigt werden, wenn eine Webseite in sozialen Medien geteilt wird. Dadurch sieht die Vorschau des Links professioneller und konsistenter aus.

Beeinflussen OG-Tags direkt das SEO-Ranking?

OG-Tags gelten nicht direkt als Google-Rankingfaktor. Sie können jedoch indirekt zur SEO-Performance beitragen, indem sie in sozialen Medien höhere Klickzahlen, Shares und Markenvertrauen generieren.

Wie groß sollte ein Open Graph-Bild sein?

Die sicherste OG-Bildgröße für den allgemeinen Gebrauch beträgt 1200 x 630 Pixel. Das Bild sollte über HTTPS zugänglich, von guter Qualität und idealerweise unter 1 MB groß sein.

Wie fügt man OG-Tags in WordPress hinzu?

In WordPress können OG-Tags einfach über Plugins wie Yoast SEO, Rank Math oder All in One SEO für jede Seite und jeden Beitrag definiert werden.

Was tun, wenn WhatsApp das falsche Bild anzeigt?

Stellen Sie zunächst sicher, dass der Wert von og:image im Seitenquellcode korrekt ist. Löschen Sie anschließend den Cache und das CDN, scannen Sie die URL erneut mit Tools wie dem Facebook Sharing Debugger und testen Sie den Link erneut.