Open Graph Vorschau-Tester
Haben Sie jemals einen Link auf Facebook oder LinkedIn geteilt und die Vorschau sah völlig falsch aus? Vielleicht fehlte das Bild, der Titel war abgeschnitten oder die Beschreibung zeigte etwas Peinliches. Mit unserem OG-Vorschau-Tester können Sie genau sehen, wie Ihre Webseite aussehen wird, wenn sie in sozialen Medien geteilt wird, bevor Sie auf Senden klicken. Fügen Sie einfach Ihre URL ein und Sie erhalten sofort eine Vorschau mit Titel, Beschreibung und Bild, die angezeigt werden. Keine hässlichen Überraschungen mehr in Ihrem Feed. Testen Sie Ihre Seite auf mehreren Plattformen und stellen Sie sicher, dass Ihre Open Graph-Tags ihre Aufgabe erfüllen.
Was ist
Ein OG-Vorschau-Tester ist ein Tool, das Ihnen genau zeigt, wie eine Webseite angezeigt wird, wenn sie auf Social-Media-Plattformen wie Facebook, LinkedIn, WhatsApp und X geteilt wird. Wenn jemand eine URL in einen Social-Media-Beitrag einfügt, ruft die Plattform die Open Graph-Meta-Tags der Seite ab, um eine umfangreiche Vorschaukarte mit Titel, Beschreibung und Bild zu erstellen. Wenn diese Tags fehlen, falsch oder schlecht formatiert sind, kann die Vorschau fehlerhaft aussehen — falsches Bild, abgeschnittener Titel, fehlende Beschreibung oder nur ein einfacher Textlink. Der OG-Vorschau-Tester simuliert diesen Vorgang, sodass Sie sehen können, was andere sehen, bevor Sie es freigeben. Es zieht die Open Graph-Tags von Ihrer Seite und rendert sie in einer visuellen Vorschau, die nachahmt, wie verschiedene Plattformen freigegebene Links anzeigen. Dies ist unglaublich nützlich, da jede Plattform unterschiedliche Anzeigeregeln hat. Facebook zeigt möglicherweise ein großes Bild mit dem Titel unten an, während LinkedIn ein anderes Seitenverhältnis verwendet und WhatsApp eine kleinere Vorschau anzeigt. Ein Tag, das auf einer Plattform perfekt aussieht, kann auf einer anderen Plattform unbeholfen abgeschnitten werden. Wenn Sie vorher testen, können Sie diese Probleme erkennen und Ihre Tags korrigieren, damit Ihre Links immer professionell und anklickbar aussehen.
Wie zu verwenden
- Kopieren Sie die URL der Webseite, die Sie testen möchten — stellen Sie sicher, dass es sich um eine öffentlich zugängliche Seite handelt, nicht hinter einem Login oder auf einem lokalen Server.
- Fügen Sie die URL in das Eingabefeld des OG-Vorschau-Testers ein und klicken Sie auf die Schaltfläche Vorschau oder Test, um die Open Graph-Daten Ihrer Seite abzurufen.
- Überprüfen Sie die generierte Vorschaukarte mit dem Titel, der Beschreibung und dem Bild, die angezeigt werden, wenn Ihr Link in sozialen Medien geteilt wird.
- Überprüfen Sie, wie die Vorschau auf verschiedenen Plattformstilen aussieht — einige Tester zeigen Facebook-, LinkedIn- und WhatsApp-Variationen nebeneinander an.
- Wenn etwas nicht stimmt, gehen Sie zurück und aktualisieren Sie Ihre Open Graph-Tags. Testen Sie dann erneut, bis die Vorschau genau so aussieht, wie Sie es möchten.
Beispiele
Eingabe: URL: https://example.com/blog
Prozess: Fetch OG tags then render preview card
Ergebnis: Facebook-style preview with title, description, thumbnail
Eingabe: Missing og:image tag
Prozess: Warnung erkennen und Platzhalterbild anzeigen
Ergebnis: Preview with broken image warning, suggests adding og:image
Verwandte Suchen
Leute suchen auch nach: og Vorschau-Tester, Grafikvorschau öffnen, vorschau auf soziale Medien, link-Vorschau, og Meta-Tags, facebook-Vorschau.
og Vorschau-TesterGrafikvorschau öffnenvorschau auf soziale Medienlink-Vorschauog Meta-Tagsfacebook-Vorschautwitter-Karteog-Tag-Testervorschau auf soziale Netzwerkeopen graph Debuggerminiaturansicht des Linkssoziale Meta-Tagsog Bildtesterurl-Vorschaudebugger für soziale Medienopen graph Validatorvorschau teilenwerkzeuge für die Webentwicklung
Häufig gestellte Fragen
Warum zeigt mein geteilter Link das falsche Bild an?
Dies geschieht normalerweise, wenn Ihre Seite entweder kein og:image-Tag hat, die Bild-URL im Tag fehlerhaft ist oder die Bildabmessungen nicht ideal sind. Facebook bevorzugt Bilder mit 1200 x 630 Pixel. Wenn Ihr Bild zu klein ist, ignoriert Facebook es möglicherweise und zieht stattdessen ein anderes Bild von Ihrer Seite. Geben Sie immer ein og:image-Tag mit einem qualitativ hochwertigen Bild in der empfohlenen Größe an, um die Kontrolle darüber zu behalten, was angezeigt wird.
Meine Seite hat offene Grafik-Tags, aber die Vorschau sieht immer noch falsch aus. Warum?
Soziale Plattformen speichern Open Graph-Daten zwischen.Wenn Sie also kürzlich Ihre Tags aktualisiert haben, wird möglicherweise noch die alte Version angezeigt. Der Cache von Facebook kann Tage dauern. Verwenden Sie das Sharing-Debugger-Tool von Facebook, um Ihre Seite zu durchsuchen und den Cache zu leeren. Überprüfen Sie auch, ob Ihre og: image-URL absolut (beginnend mit https: //) und nicht relativ ist, da einige Plattformen relative URLs nicht korrekt auflösen.
Kann ich eine Seite testen, die noch nicht live ist?
Die meisten OG-Vorschau-Tester verlangen, dass die Seite im Internet öffentlich zugänglich ist. Wenn sich Ihre Seite noch in der Entwicklung befindet, können Sie eine Staging-URL verwenden, wenn sie öffentlich verfügbar ist, oder sie vorübergehend zum Testen bereitstellen. Mit einigen erweiterten Tools können Sie auch rohen HTML- oder Open Graph-Tag-Code direkt zum Testen ohne Live-URL einfügen.
Benötige ich unterschiedliche Open Graph-Tags für verschiedene Plattformen?
Das standardmäßige Open Graph-Protokoll funktioniert auf Facebook, LinkedIn, WhatsApp und den meisten anderen Plattformen. X (Twitter) verwendet jedoch zusätzlich zu OG-Tags eigene Twitter-Karten-Tags. Um überall die besten Ergebnisse zu erzielen, fügen Sie sowohl Standard-OG-Tags als auch Twitter-Karten-Tags hinzu. Die Kernfunktionen og: title, og:description und og:image decken die meisten Plattformen ab, während twitter: card und twitter: image X speziell behandeln.
Wie lange dauert es, bis aktualisierte Open Graph-Tags angezeigt werden, wenn ich sie teile?
Sobald Sie die Tags auf Ihrer Live-Seite aktualisiert haben, sind sie technisch sofort verfügbar. Soziale Plattformen speichern die Daten jedoch zwischen, sodass die alte Vorschau möglicherweise weiterhin angezeigt wird, wenn Sie den Link zuvor freigegeben haben. Sie müssen das Debugger-Tool jeder Plattform verwenden, um einen erneuten Abruf zu erzwingen. Mit dem Sharing-Debugger von Facebook, dem Post-Inspektor von LinkedIn und dem Kartenprüfer von Twitter können Sie den Cache leeren und die aktualisierte Vorschau anzeigen.