Open-Graph-Previewer

So funktioniert es

1. Gib Titel, Beschreibung, Bild, Website und URL ein.
2. Prüfe Karten und Längenwarnung.
3. Kopiere das Meta-Tag-Snippet in den Head.

Über dieses Werkzeug

Open-Graph-Metadaten bestimmen die Vorschau, die beim Teilen einer Seite in Chats, sozialen Feeds oder Lesezeichen erscheint. Titel, Beschreibung, Bild, kanonische URL und Seitenname liefern Crawlern genügend Kontext für eine brauchbare Karte. Dieser Previewer verbindet die Felder und zeigt vier unterschiedliche Darstellungen nach dem Vorbild von Twitter/X, Discord, Telegram und LinkedIn. Zusätzlich erscheint eine Warnung, wenn Titel oder Beschreibung praktische Teilungsgrenzen überschreiten. Solche Grenzen sind Richtwerte, keine überall gleichen Schnitte: Gerät, Schrift, Client und Sprache beeinflussen die Kürzung. Wähle einen klaren Titel, eine Beschreibung mit erkennbarem Nutzen und ein Querformatbild, dessen wichtige Motive nicht zu nah am Rand liegen. Die Bild-URL muss für den Crawler öffentlich erreichbar sein; eine lokale Entwicklungsadresse erzeugt keine echte Vorschau. Das Snippet enthält zentrale og-Tags sowie die Twitter-Angabe für große Bilder. Füge es in den Head ein und prüfe die veröffentlichte URL anschließend mit den aktuellen Debuggern der Netzwerke, da Vorschauen zwischengespeichert werden. Das Werkzeug lädt das Bild nicht selbst und veröffentlicht keine Metadaten. Es rendert Werte lokal im Browser und hilft dadurch beim Vorbereiten von Kampagnen, Artikeln, Produktstarts und Linkvorschauen. Prüfe außerdem Vorschaubilder auf mobilen Geräten und achte darauf, dass wichtige Motive beim automatischen Zuschneiden sichtbar bleiben. Unterschiedliche Sprachen benötigen oft eigene, kürzere Titel, damit der Kern nicht abgeschnitten wird. Kontrolliere zusätzlich og:image:width, og:image:height und og:image:type, wenn ein Crawler das Bild zuverlässig einordnen soll. Unterschiedliche Seitentypen können außerdem eigene Vorschaubilder benötigen.

Häufige Fragen

Ähnliche Werkzeuge