Öffnen Sie das Diagrammvorschau-Tool
Sehen Sie sich eine Vorschau an, wie Ihre Seite aussieht, wenn sie auf Facebook, X (Twitter), LinkedIn, WhatsApp, Slack und Discord geteilt wird. Überprüfen Sie die Tags „og:title“, „og:description“, „og:image“ und „Twitter Card“ und erhalten Sie einen bewerteten Bericht mit umsetzbaren Empfehlungen zur Verbesserung des Teilens in sozialen Netzwerken – alles sicher in Ihrem Browser verarbeitet.
Paste your HTML source code below to see exactly how your page will appear when shared on Facebook, X (Twitter), LinkedIn, WhatsApp, Slack, and Discord. All processing runs locally in your browser.
Warum sollten Sie unser Open Graph Preview-Tool verwenden?
- Umsetzbare Lösungsvorschläge: Zu jedem erkannten Problem gibt es eine klare Erklärung und praktische Lösungsvorschläge. Wenden Sie Änderungen mit Zuversicht an und wissen Sie genau, was verbessert werden muss und warum.
- 100 % privat und kostenlos: Die gesamte Analyse erfolgt lokal in Ihrem Browser. Es werden keine Daten auf einen Server hochgeladen, es ist keine Anmeldung erforderlich und es gibt keine Nutzungsbeschränkungen. Nutzen Sie es so oft Sie brauchen – völlig kostenlos.
Häufige Anwendungsfälle für das Open Graph Preview Tool
- Facebook- und Instagram-Teilen: Zeigen Sie eine Vorschau an, wie Ihre Seite als Facebook-Linkvorschau und Instagram-Story-Karte angezeigt wird. Überprüfen Sie vor dem Teilen, ob og:title, og:description und og:image korrekt mit dem richtigen Seitenverhältnis (1200×630 Pixel) gerendert werden.
- X (Twitter)-Karten: Überprüfen Sie Ihr Twitter-Karten-Markup auf Zusammenfassung, summary_large_image und Spielerkartentypen. Zeigen Sie eine Vorschau des genauen Layouts an, das X anzeigt, einschließlich Titel, Beschreibung, Bild und Domänenzuordnung.
- LinkedIn-Link-Vorschau: Stellen Sie sicher, dass Ihre Artikel und Seiten in LinkedIn-Feeds eine professionelle Vorschau anzeigen. Stellen Sie sicher, dass OG-Bilder der LinkedIn-Empfehlung von 1200×628 Pixeln entsprechen und dass die Beschreibungen in die Vorschaukarte passen.
- Messaging-App-Links: Sehen Sie sich eine Vorschau an, wie geteilte Links in WhatsApp, Telegram und anderen Messaging-Apps angezeigt werden. Diese Plattformen verwenden OG-Tags, um umfangreiche Linkvorschauen mit Miniaturansichten und Beschreibungen zu generieren.
- Entwickler-QA und Debugging: Beheben Sie OG-Tag-Probleme während der Entwicklung. Überprüfen Sie vor der Bereitstellung in Produktionsumgebungen, ob CMS-Vorlagen, Next.js-Metadaten und vom Server gerenderte Seiten korrekte soziale Tags erzeugen.
- Content-Marketing-QA: Validieren Sie soziale Metadaten für Blog-Posts, Landingpages und Marketingkampagnen vor dem Start. Stellen Sie mit präzisen Titeln, Bildern und Beschreibungen die Markenkonsistenz auf allen Sharing-Plattformen sicher.
Was ist die Open-Graph-Tags-Analyse?
Die Open Graph Tags-Analyse untersucht die Open Graph-, Twitter Card- und Social-Meta-Tags in HTML-Dokumenten, um Probleme zu identifizieren, die Qualität zu verbessern und Best Practices sicherzustellen. Dieses Tool bietet eine umfassende Bewertung, die Ihnen hilft, den aktuellen Zustand zu verstehen und zu erkennen, was verbessert werden muss.
So funktioniert unser Analysator
- Geben Sie Ihren Inhalt ein: Laden Sie eine Datei hoch, fügen Sie Inhalte ein oder geben Sie die URL ein, die Sie analysieren möchten. Das Tool akzeptiert eine Vielzahl von Eingabeformaten für maximale Flexibilität.
- Umfassende Analyse: Der Analysator verarbeitet Ihre Eingaben anhand einer detaillierten Checkliste mit Regeln, Best Practices und Qualitätsmetriken. Für genaue Ergebnisse wird jede Prüfung unabhängig ausgewertet.
- Korrekturen überprüfen und anwenden: Durchsuchen Sie die nach Kategorien geordneten Analyseergebnisse. Jeder Befund enthält eine klare Erklärung und praktische Lösungsvorschläge, die Sie direkt anwenden können.
Häufige Anwendungsfälle für Open Graph-Tags
Überprüfen der Sharing-Vorschauen in sozialen Medien vor der Veröffentlichung, Überprüfen von OG-Bildern und -Beschreibungen für Facebook und LinkedIn, Validieren des Twitter-Card-Markups, Debuggen geteilter Linkauftritte auf WhatsApp und Discord und Überprüfen sozialer Metadaten während Website-Migrationen. Das Tool ist für Entwickler, QS-Ingenieure und technische Teammitglieder konzipiert, die ein Erscheinungsbild des Social-Media-Sharings, Klickraten und Markenkonsistenz auf allen Sharing-Plattformen benötigen.
Datenschutz, Sicherheit und Verfügbarkeit
Sämtliche Analysen erfolgen vollständig innerhalb Ihres Browsers mittels clientseitiger Verarbeitung. Es werden niemals Daten auf einen Server hochgeladen – jedes Byte verbleibt auf Ihrem Gerät. Es gibt keine Dateigrößenbeschränkungen, keine Anmeldeanforderungen und keine Nutzungsbeschränkungen. Die Nutzung des Tools ist zu 100 % kostenlos und es gibt keine versteckten Premium-Funktionen.
Häufig gestellte Fragen
Mit einem Open Graph-Vorschautool können Sie genau sehen, wie Ihre Seite aussehen wird, wenn sie auf Social-Media-Plattformen wie Facebook, X (Twitter), LinkedIn, WhatsApp, Slack und Discord geteilt wird. Es analysiert Ihren HTML-Code, um die Tags og:title, og:description, og:image und Twitter Card zu extrahieren, und rendert visuelle Vorschauen für jede Plattform – alles lokal in Ihrem Browser.
Dieses Tool überprüft og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale, og:image:width, og:image:height, og:image:alt, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator und greift auf Titel-Tags und Meta-Beschreibungen zurück, wenn OG-Tags fehlen.
Absolut! Die gesamte Verarbeitung erfolgt direkt in Ihrem Browser mithilfe von JavaScript. Es werden keine HTML-Inhalte auf einen Server hochgeladen. Ihre Daten verlassen nie Ihr Gerät, was die sicherste Möglichkeit zur Vorschau von Open Graph-Tags darstellt.
Die empfohlene og:image-Größe beträgt 1200×630 Pixel für Facebook und die meisten Plattformen. LinkedIn empfiehlt 1200×628px. Verwenden Sie für Twitter-Summary_large_image-Karten mindestens 600×314 Pixel. Die akzeptable Mindestgröße auf allen Plattformen beträgt 200×200 Pixel. Verwenden Sie für og:image immer absolute URLs, die mit https:// beginnen.
Zu den häufigsten Gründen gehören: fehlendes og:image-Tag, Verwendung einer relativen statt einer absoluten URL, die Bild-URL gibt 404 zurück, das Bild ist zu klein (unter 200 x 200 Pixel), das Bildformat wird nicht unterstützt (verwenden Sie JPEG, PNG oder WebP) oder Plattform-Cache – verwenden Sie den Facebook Sharing Debugger oder den LinkedIn Post Inspector, um zwischengespeicherte Daten zu löschen.
Open Graph-Tags (og:title, og:description, og:image) wurden von Facebook erstellt und werden von den meisten sozialen Plattformen verwendet. Twitter-Karten (twitter:card, twitter:title, twitter:description, twitter:image) sind spezifisch für X (Twitter). Wenn Twitter-Card-Tags fehlen, greift X auf OG-Tags zurück. Die Verwendung beider gewährleistet eine optimale Anzeige auf allen Plattformen.
Verwenden Sie den Facebook Sharing Debugger unter Developers.facebook.com/tools/debug/. Fügen Sie Ihre URL ein und klicken Sie auf „Erneut scannen“, um Facebook zu zwingen, Ihre OG-Tags erneut zu lesen. Verwenden Sie für LinkedIn den Post Inspector. Für X werden OG-Daten normalerweise innerhalb von Minuten nach Seitenänderungen aktualisiert.
Ja, unser Open Graph-Vorschautool ist 100 % kostenlos und ohne versteckte Kosten, Anmeldeanforderungen, Premium-Stufen oder Nutzungsbeschränkungen. Sehen Sie sich unbegrenzt viele OG-Tags für jedes Projekt an – privat, kommerziell oder geschäftlich – völlig kostenlos.