Open Graph Online prüfen: Wie ein Website-Link in sozialen Medien angezeigt wird und wie man das Problem behebt

Die Kurzfassung: Um Open Graph online zu prüfen, fügen Sie die Seitenadresse in den kostenlosen Open Graph Debugger PromoPilot ein. Dieser liest alle og:* und Twitter-Card-Tags, prüft das Vorhandensein und die Größe des Bildes, bewertet die Vollständigkeit des Markups und zeigt Link-Vorschauen für Facebook, X (Twitter) und LinkedIn an – inklusive Empfehlungen für fehlende Informationen. Eine Registrierung ist nicht erforderlich. Im Folgenden finden Sie die benötigten Tags, die erforderliche Größe für og:image und eine Anleitung zum Aktualisieren einer nicht funktionierenden Vorschau.

Ich erstelle seit 12 Jahren Webseiten und höre von Kunden häufiger die Frage: „Warum hat Telegram Link kein Bild?“, als Fragen zum Suchmaschinenranking. Normalerweise ist das in fünf Minuten erledigt – wenn man weiß, wo man suchen muss.

Was überprüft der Open Graph Debugger?

Wenn Sie einen Link in einen Beitrag oder eine Nachricht einfügen, ruft die Plattform die Seite auf und sucht nach Open-Graph-Tags. Wird ein Tag gefunden, wird eine entsprechende Karte erstellt. Andernfalls wird der gefundene Wert verwendet oder die URL ohne Tags angezeigt. Das Tool prüft ausschließlich, was soziale Netzwerke lesen können.

Wie kann ich Open Graph-Seiten online überprüfen?

1. Open Graph Debugger öffnen.
2. Geben Sie die URL der Seite ein, die Sie teilen möchten: einen Artikel, ein Produkt oder eine Werbe-Landingpage. Klicken Sie auf „Prüfen“.
3. Gehen Sie die Liste der Tags durch: Welche sind gesetzt, welche sind leer und gibt es in og:url eine fremde oder Testadresse?
4. Prüfen Sie die Vorschau für jedes Netzwerk: Ist der Titel abgeschnitten? Ist das Bild sichtbar? Befindet sich am Rand wichtiger Text?
5. Bitte fügen Sie die fehlenden Tags wie empfohlen hinzu und überprüfen Sie die Seite erneut.

Toolseite: Adressfeld, Schaltfläche „Prüfen“, Liste der Prüfungen und FAQ.

Das Tool ist ressourcenschonend: Ein tägliches Limit reicht aus, damit ein Gast alle Vorlagen der Website – Startseite, Kategorien, Produkte und Artikel – überprüfen kann. Nach kostenloser Registrierung verdreifacht sich das Limit.

Was sind die häufigsten Fehler in Open Graph?

Hier ist, was ich auf fast jeder anderen Seite finde, und in welcher Reihenfolge man das Problem beheben kann.

1. Es fehlt das og:image-Attribut oder es ist als relative URL angegeben. Soziale Netzwerke verstehen content="/img/cover.jpg" nicht – die vollständige URL, beginnend mit https:// ist erforderlich. Ohne Bild sinkt die Reichweite des Beitrags deutlich.
2. Das Bild ist zu klein. Das 200x200-Logo lässt die Karte an der Seite wie ein kleines Quadrat erscheinen. Benötigt wird ein Bild mit 1200x630 Pixeln.
3. Ein einziges og:image für die gesamte Website. Jeder Artikel und jedes Produkt in den sozialen Medien sollte einheitlich – mit dem Logo – dargestellt werden. Für Blog und Katalog sollte das Titelbild der jeweiligen Seite verwendet werden.
4. og:url führt zu einer anderen Adresse – der Homepage, einer Testdomain oder der http:// Version. Die Plattform kann alle Links auf einer einzigen Seite zusammenfassen.
5. Es gibt kein twitter:card. Ohne dieses zeigt X oft eine kleine Karte an. Für ein größeres Bild benötigen Sie summary_large_image.
6. og:title wiederholt den Titel und fügt „Kaufen“ und die Marke hinzu. In einem Social-Media-Feed wirkt das wie Werbung; eine aussagekräftige Überschrift, wie sie für einen Beitrag verwendet wird, ist besser.

Die minimale korrekte Menge sieht folgendermaßen aus:

<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">

Wie bereitet man ein Bild für og:image vor?

Das Bild ist der auffälligste Teil der Karte, und genau hier wird oft gespart. Hier sind ein paar Regeln, die ich befolge:

• Das Bild hat die Größe 1200 × 630 Pixel und ist horizontal ausgerichtet. Das soziale Netzwerk schneidet den oberen und unteren Rand eines quadratischen Produktfotos ab, wodurch unter Umständen der Kopf oder die Sohle des Produkts fehlen.
• Das Wichtigste ist die Mitte. Verschiedene Plattformen beschneiden die Ränder unterschiedlich, und im mobilen Feed ist die Karte noch kleiner. Halten Sie den Text groß und achten Sie darauf, dass er nicht an den Rändern anliegt.
• Minimaler Text. Der Titel befindet sich bereits unter dem Bild; 3-6 Wörter oder keine Bildunterschrift genügen direkt auf dem Bild.
• Leichtgewichtige Datei. Eine JPG- oder PNG-Datei mit angemessener Größe wird schnell geladen, und die Plattform verursacht keine Zeitüberschreitung.
• Für jede wichtige Seite ein eigenes Bild. Bei Artikeln und Produkten lässt sich dieses bequem automatisch erstellen: ein Titelbild oder das Hauptproduktfoto.

Ein guter Test ist, die Vorschau im Debugger auf Ihrem Smartphone zu öffnen. Wenn der Link ohne Hineinzoomen nicht klar erkennbar ist, muss das Bild überarbeitet werden.

Wie kann ich eine alte Vorschau nach einer Fehlerbehebung aktualisieren?

Ein häufiges Problem: Sie haben die Tags korrigiert, aber das soziale Netzwerk zeigt hartnäckig das alte Bild an. Der Grund ist der Cache: Die Plattform hat sich die Vorschau vom ersten Teilen gemerkt. Auf Facebook die Daten im Sharing Debugger neu zu erfassen, auf LinkedIn mit dem Post Inspector und auf Telegram mit dem Bot @WebpageBot, an den Sie den Link senden. Wenn alles andere fehlschlägt, fügen Sie der Adresse einen harmlosen Parameter hinzu, z. B. ?v=2: Für die Plattform ist dies ein neuer Link.

Vergleich: Open Graph Debugger und Alternativen

Fazit: Offizielle Plattform-Debugger sind erforderlich, um den Cache zu leeren, jedoch zeigt jede Plattform nur ihr eigenes Netzwerk an. Um alle Vorschauen und eine Liste fehlender Tags auf einmal anzuzeigen, ist ein universeller Debugger praktischer.

Übrigens bietet PromoPilot 87 kostenlose SEO-Tools an. Falls Sie noch keine Tags erstellt haben, finden Sie in unserer Artikelserie einen Beitrag über einen Meta-Tag-Generator, der einen Open-Graph-Block mit Vorschau erstellt.

Worin unterscheidet sich der Open Graph Debugger von der Metadatenanalyse?

Die Meta-Tag-Analyse betrachtet eine Seite aus der Perspektive einer Suchmaschine: Titel, Beschreibung, Canonical-Tag, hreflang und Open Graph sind nur eine Gruppe. Der Debugger konzentriert sich auf soziale Medien: Er erstellt Karten für verschiedene Plattformen, prüft die Bildgröße und gibt Empfehlungen basierend auf Vorschauen. Wenn Links zu Ihrer Website aktiv in sozialen Medien und Messenger-Apps geteilt werden, ist der Debugger besonders nützlich.

Beide Methoden haben eine Einschränkung: Sie lesen den vom Server zurückgegebenen HTML-Code. Werden Tags von einem Browser-Skript eingefügt, erkennen viele soziale Netzwerke diese nicht – das muss serverseitig behoben werden. Ein weiterer Punkt: Der Debugger prüft zwar die Tags, aber nicht den eigentlichen Freigabevorgang. Ist die Seite passwortgeschützt, geografisch gesperrt oder vor Bots geschützt, kann das soziale Netzwerk möglicherweise nicht darauf zugreifen, selbst wenn alle Tags vorhanden sind.

Wann reicht ein kostenloses Tool nicht aus?

Ein Debugger zeigt an, dass die Seite kein og:image-Attribut besitzt. Bei Tausenden von Seiten ist das manuelle Einfügen von Bildern jedoch nicht möglich. Ein Spezialist wird benötigt, wenn:

• Jedes Produkt oder jeder Artikel sollte über ein eigenes, automatisch erfasstes Vorschaubild verfügen;
• Die Website gibt Tags mithilfe eines Skripts zurück, die von den sozialen Netzwerken nicht gesehen werden.
• Sie schalten Anzeigen und Mailings, bei denen jede Vorschau die Kosten pro Klick beeinflusst;
• Wir benötigen eine Kombination aus „Website + Telegram Kanal + automatischer Veröffentlichung“ mit den richtigen Karten.

Was kann ich für Ihre Website tun?

Ich bin Valeriy Danyuk, Entwickler und SEO-Spezialist mit 12 Jahren Erfahrung und über 200 Kunden. Eine ansprechende Link-Vorschau ist kostenlos und wird von mir für jedes Projekt individuell angepasst.

SEO und Promotion

• Schlüsselfertige Website-SEO-Prüfung: Ich überprüfe alle Template-Tags, richte automatische Vorschaubilder ein und korrigiere den Code.

Websites und Online-Shops

• Übertragung Ihres Shops von Instagram auf Ihre Website – Produkte mit aussagekräftigen Vorschauen zum einfachen Teilen.
• Eine Landingpage für ein neues Produkt, die an einem Abend erstellt wurde – eine Fallstudie von NordHarvest mit einer fertigen Visitenkarte für soziale Medien.
• Eine Website für plastische Chirurgie mit KI und Anwendungen via Telegram.
• Website auf 1001site: Vorschauen für soziale Netzwerke und automatische Veröffentlichung in Telegram werden automatisch konfiguriert.

Bots und Automatisierung

• Telegram Bot mit KI für einen Online-Saucen-Shop.
• QuestFlow ist ein SaaS-Baukasten Telegram Bots mit KI.
• E-Commerce-Agenten statt Chatbots.

Schick mir einen Link, der in einem Telegram Messenger schlecht aussieht, und ich sage dir, welches Tag fehlt.

Ergebnis

1. Ein Online-Open-Graph-Checker zeigt an, wie ein Link auf Facebook, X und LinkedIn aussieht und welche Tags fehlen.
2. Das erforderliche Minimum ist og:title, og:type, og:image (1200×630, vollständige Adresse) und og:url sowie twitter:card.
3. Nach der Behebung des Problems sollte der Cache der folgenden Seiten zurückgesetzt werden: Sharing Debugger, Post Inspector, @WebpageBot.
4. Für den Katalog und den Blog sollten Vorschaubilder automatisch gesammelt werden, wie bei 1001site.

Überprüfen Sie die Seite, die Sie teilen möchten, im kostenlosen Open Graph Debugger, bevor Ihre Follower den Beitrag sehen.

Quellen

• PromoPilots Open Graph Debugger-Toolseite – Liste der Prüfungen und FAQ.
• Open Graph Protocol (ogp.me) - obligatorische und optionale Eigenschaften.
• Der Sharing Debugger von Meta und der LinkedIn Post Inspector sind die offiziellen Tools der Plattformen.