OpenGraph.xyz ist der meistgenutzte kostenlose OpenGraph og:image und Meta-Tag-Scanner im Internet. Wir haben die Plattform als modernes SaaS neu aufgebaut und die öffentlichen Tools sowie das zuvor separate authentifizierte Dashboard zu einem kontinuierlichen Produkt zusammengeführt.
Die Arbeit umfasste außerdem die Entwicklung der Rendering-, Auslieferungs- und Datensysteme, um einen zuverlässigen Betrieb des Produkts während der Weiterentwicklung zu gewährleisten.
Leistungen
- Produktstrategie
- UX/UI Design
- Full Stack Entwicklung
- Wartung
Technologien
- Next.js
- Nest.js
- GraphQL
- PostgreSQL
- AWS S3
- PostHog
- Shadcn
- Stripe
- Vercel
- Render
Ein Produkt, vom ersten Scan bis zum täglichen Workflow
Ursprünglich bot OpenGraph kostenlose Tools auf der öffentlichen Webseite an und komplexere Workflows im separaten Account-Dashboard. Wir haben die UI und UX neu gestaltet und die kostenpflichtigen, account-basierten Tools als eine integrierte Anwendung auf der Marketingseite zusammengeführt.
Die gleiche Navigation und visuelle Sprache begleiten die Nutzer nun vom ersten Vorschau-Scan über Vorlagen, generierte Bilder, Kurzlinks bis hin zu den Account-Einstellungen. Serverseitiges Rendering entscheidet über die authentifizierte oder öffentliche Darstellung, bevor die Seite im Browser angezeigt wird – dadurch werden clientseitige Lade-Spinner und Layout-Verschiebungen vermieden.
Vorlagen erstellen und bearbeiten
Die KI-gestützte Erstellung bietet Teams ohne Design-Erfahrung einen praktischen Weg, markenkonforme Vorlagen zu entwickeln. Nutzer geben eine Website-URL und optional Anweisungen an, OpenGraph verwendet die Seite als Ausgangspunkt für ein markengerechtes Design. Die KI definiert zudem dynamische Variablen wie Titel und Bild, sodass eine einzelne Vorlage für tausende Seiten individuelle Bilder generieren kann.
Für Teams, die händische Änderungen möchten, haben wir außerdem einen Ebenen-basierten Editor entwickelt. Nutzer können Ebenen auf der Arbeitsfläche verschieben, duplizieren oder umbenennen, Typografie, Farben und Bilder bearbeiten und Eigenschaften an Variablen binden. Entwürfe werden automatisch gespeichert, unterstützen Shortcuts und Vorschaufunktionen und können nach Fertigstellung veröffentlicht werden.
Automatisierte Bildgenerierung
Jede veröffentlichte Vorlage hat einen versionierten URL-Endpunkt, der von jeder Plattform genutzt werden kann, um daraus Open Graph-Bilder zu generieren. Dynamische Werte werden an den Endpunkt übergeben, sodass Websites, CMS, Anwendungen und interne Systeme ganz einfach ein Bild erzeugen können. Die gehosteten Ergebnisse werden nach der Initialisierung auf CDNs gespeichert, um einen schnellen Abruf zu ermöglichen.
Kurzlinks mit individuellen Social-Previews
Wir haben Kurzlinks als als zusätzliche Funktion entwickelt. Ein Link kann einen eigenen Titel, eine Beschreibung und ein eigenes og:image erhalten – unabhängig von der Zielseite. Das bieten andere Kurzlink-Dienste nicht. Im Workspace werden Vorschau, Ziel-URL und Klickanalysen zusammengeführt, sodass kreative kampagnenspezifische Shares möglich sind, ohne die Zielseite zu verändern.
Eine Plattform, die sich ständig weiterentwickelt
Dies ist eine fortlaufende Produktzusammenarbeit. Wir entwickeln die Plattform hinter OpenGraph kontinuierlich weiter und optimieren die nutzerorientierten Workflows, damit Bildgenerierung und -auslieferung zuverlässig bleiben, während das Produkt wächst. PostHog Analytics und Chats mit Nutzern helfen uns bei Produkt- und UX-Entscheidungen, sodass wir Verbesserungen, die Nutzern am wichtigsten sind, priorisieren können.