Open Graph Vorschau
EXAMPLE WEBSITE
Beispiel Seitentitel
Dies ist ein Beispiel für eine Beschreibung des Seiteninhalts, die beim Teilen in sozialen Medien angezeigt wird.
https://example.com/page
Beispiel Seitentitel
Dies ist ein Beispiel für eine Beschreibung des Seiteninhalts, die beim Teilen in sozialen Medien angezeigt wird.
example.com
websiteSo verwenden Sie Open Graph Previewer
- 1
Seiten-URL eingeben
Fügen Sie die vollständige URL der Seite, die Sie prüfen möchten, in das Feld für die Website-URL ein.
- 2
OG-Daten abrufen
Klicken Sie auf „OG-Daten abrufen“, um den vorhandenen Open-Graph-Titel, die Beschreibung, das Bild und den Seitennamen der Seite abzurufen.
- 3
Bei Bedarf manuell bearbeiten
Wechseln Sie zu „Manuell bearbeiten“, um Titel, Beschreibung, Bild-URL, Typ und weitere Felder anzupassen und die Vorschau zu aktualisieren.
- 4
Vorschau ansehen und Tags kopieren
Prüfen Sie die Facebook- und Twitter-Card-Vorschauen und kopieren Sie dann die erzeugten Meta-Tags, um sie Ihrer Seite hinzuzufügen.
Der umfassende Leitfaden zu Open Graph und Linkvorschauen
Was das Open-Graph-Protokoll ist
Das Open-Graph-Protokoll ist ein kleiner Satz von Meta-Tags, ursprünglich von Facebook eingeführt, der es jeder Webseite ermöglicht, sich beim Teilen als reichhaltiges Objekt zu beschreiben. Statt eines nackten blauen Links wird eine Seite mit Open-Graph-Tags zu einer Karte mit Überschrift, Zusammenfassung und einem großen Bild. Die Tags stehen im head der Seite und nutzen das Attribut property mit einem og-Präfix, zum Beispiel og:title und og:image, gepaart mit einem content-Attribut, das den Wert enthält. Da der Standard breite Verbreitung fand, steuern dieselben og-Tags heute Vorschauen weit über Facebook hinaus.
Bei Open Graph geht es rein um die Darstellung in sozialen Netzwerken und Messaging-Kontexten. Es hat keine direkte Auswirkung auf das Suchmaschinenranking, aber einen großen Einfluss auf Klickrate und Teilen, denn eine ansprechende Karte wird angeklickt und weitergeteilt, während eine schlichte oder fehlerhafte überscrollt wird.
Die zentralen Open-Graph-Tags
Fünf Eigenschaften erledigen den Großteil der Arbeit. og:title ist die Überschrift der Karte und kann sich von Ihrem HTML-title-Tag unterscheiden, sodass Sie eine auf das Teilen optimierte Formulierung wählen können. og:description ist die ergänzende Zeile darunter. og:image ist das Vorschaubild und trägt mit Abstand das größte visuelle Gewicht. og:url ist die kanonische URL, auf die die Karte zeigen soll, wodurch geteilte Beiträge auf einer Adresse gebündelt bleiben, selbst wenn derselbe Inhalt über mehrere URLs erreichbar ist. og:type beschreibt das Objekt, üblicherweise website für eine allgemeine Seite oder article für einen Blogbeitrag oder eine Nachrichtenmeldung.
Weitere Eigenschaften verfeinern das Ergebnis: og:site_name benennt die Quelle, og:locale gibt die Sprache an, und bei Bildern helfen og:image:width und og:image:height den Plattformen, die Karte schon anzuordnen, bevor das Bild fertig geladen ist. Diese Angaben auszufüllen ergibt eine zuverlässigere und schneller dargestellte Vorschau.
Twitter Cards und wie X Ihre Tags liest
X verwendet eigene twitter-card-Tags, ist dabei aber nachsichtig: Fehlen die Twitter-spezifischen Tags, greift es auf Ihre Open-Graph-Tags zurück. Der entscheidende Tag ist twitter:card, wobei summary_large_image das Layout mit großem Bild erzeugt, das die meisten Marken wünschen, während summary ein kleineres Vorschaubild neben dem Text liefert. Sie können außerdem twitter:title, twitter:description, twitter:image und twitter:site setzen, um die Open-Graph-Werte gezielt für X zu überschreiben, wenn Sie dort einen anderen Text möchten.
In der Praxis ist es eine gute Strategie, vollständige Open-Graph-Tags für eine breite Abdeckung zu setzen und nur twitter:card hinzuzufügen, um das Layout mit großem Bild zu aktivieren, während X den Rest von Open Graph übernimmt. So vermeiden Sie es, zwei nahezu identische Tag-Sätze zu pflegen, und erhalten dennoch die reichhaltigere Karte auf X.
Bildanforderungen, die über die Karte entscheiden
Beim og:image entscheidet sich, ob die meisten Vorschauen gelingen oder scheitern. Die weithin empfohlene Größe ist 1200 mal 630 Pixel, ein Verhältnis von etwa 1.91 zu 1, das die Karte mit großem Bild auf Facebook, LinkedIn und X sauber und ohne Beschnitt ausfüllt. Verwenden Sie eine absolute, öffentlich erreichbare URL, die mit https beginnt; relative Pfade wie /images/card.png sind der häufigste Grund, warum ein Vorschaubild schlicht nicht erscheint, denn der Scraper hat keine Basis-URL, gegen die er sie auflösen könnte. Halten Sie die Datei unter ein paar hundert Kilobyte und vermeiden Sie wichtigen Text nahe den Rändern, da verschiedene Plattformen leicht unterschiedlich beschneiden.
Jede Plattform setzt zudem eigene Mindest- und Höchstwerte durch. Zu kleine Bilder fallen auf ein winziges Vorschaubild oder gar kein Bild zurück, und extrem große Dateien werden möglicherweise übersprungen. Sich auf ein einziges JPEG oder PNG mit 1200 mal 630, ausgeliefert über HTTPS, zu beschränken, ist die sicherste Wahl für eine überall einheitliche Darstellung.
Wie Facebook, LinkedIn, Discord und Slack Vorschauen darstellen
Wird ein Link in eine dieser Plattformen eingefügt, schickt die Plattform ihren eigenen Scraper-Bot, der die Seite abruft und den head liest, bevor sie eine Karte darstellt. Facebook verwendet facebookexternalhit, Slack und Discord haben eigene Bots, und jeder wertet die og-Tags aus, um die Vorschau aufzubauen. Das bedeutet, die Vorschau spiegelt wider, was der Scraper serverseitig sieht, was sich von dem unterscheiden kann, was ein angemeldeter Nutzer sieht — besonders bei Seiten, die eine Anmeldung erfordern oder ihre Meta-Tags erst nach dem Laden per JavaScript erzeugen.
Da die Darstellung auf Bot-Seite geschieht, sind zwei Dinge wichtig. Erstens müssen Ihre og-Tags im anfänglichen HTML enthalten sein, das der Server zurückgibt, und nicht erst nachträglich von clientseitigen Skripten eingefügt werden, die der Scraper womöglich nicht ausführt. Zweitens muss die Seite für den Bot ohne Authentifizierung erreichbar sein, sonst stößt der Scraper auf eine Anmeldeschranke statt auf Ihren Inhalt, und die Vorschau bleibt leer.
Caching, Debugger und ein erneutes Scraping erzwingen
Soziale Plattformen cachen die gescrapte Vorschau aggressiv, manchmal tagelang. Daher rührt die klassische Klage, dass aktualisierte Open-Graph-Tags nicht erscheinen: Die Plattform liefert noch die zwischengespeicherte Version von vor Ihrer Änderung aus. Die Lösung ist, das plattformeigene Debugging-Werkzeug zu nutzen, um ein frisches Scraping zu erzwingen. Der Sharing Debugger von Facebook, der Post Inspector von LinkedIn und der Card Validator von X rufen die Seite jeweils erneut ab und zeigen Ihnen genau, welche Tags sie ausgewertet haben — was zugleich dazu dient zu diagnostizieren, warum eine Karte falsch aussieht.
Machen Sie das erneute Scraping zu einem festen Bestandteil Ihres Veröffentlichungsablaufs, sobald Sie Titel, Beschreibung oder Bild einer bereits geteilten URL ändern. Ohne das können frühe Shares eine veraltete oder fehlerhafte Karte festschreiben, die noch lange nachwirkt, nachdem die Seite selbst längst korrekt ist. Mit dieser Vorschau können Sie die Tags vor der Veröffentlichung prüfen, sodass später weniger Korrekturen nötig sind.
Die häufigsten Open-Graph-Fehler
Die wiederkehrenden Fehler sind vorhersehbar: ein fehlendes og:image, sodass die Karte kein Vorschaubild hat, eine relative Bild-URL, die der Scraper nicht auflösen kann, ein og:image, das auf einer ansonsten per HTTPS ausgelieferten Seite über HTTP geladen wird (was manche Plattformen ablehnen), und Tags, die per JavaScript eingefügt werden, das der Scraper nie ausführt. Ein weiterer häufiger Fehler ist, og:url auf eine nicht-kanonische oder eine Staging-URL zeigen zu lassen, was die Zählung der Shares aufteilt und Nutzer an den falschen Ort schicken kann.
Ein subtilerer Fehler ist zu vergessen, dass Open Graph und Ihr Such-Snippet getrennt sind. og:title und og:description steuern die Social-Karte, während das HTML-title-Tag und die meta description das Google-Ergebnis steuern, und beide müssen nicht identisch sein. Optimieren Sie jedes für seinen Kontext: prägnant und neugierig machend für die Social-Karte, klar und auf Schlüsselwörter bedacht für das Such-Snippet.
Häufig gestellte Fragen
Was sind Open-Graph-Tags und warum sind sie wichtig?
Wie funktioniert die Facebook- und Twitter-Vorschau?
Kann ich Tags ohne eine vorhandene Seite erzeugen?
Warum könnte das Abrufen einer URL fehlschlagen oder keine Daten liefern?
Ist das Tool kostenlos und was geschieht mit der eingegebenen URL?
Verwandte Tools
Machen Sie weiter mit diesen praktischen Tools