Satori
Vercels quelloffene Bibliothek, die JSX und CSS in SVG verwandelt — die Engine hinter dynamischen Open-Graph-Bildern
Satori ist eine quelloffene Bibliothek von Vercel, die JSX und einen Teil von CSS in ein SVG rendert, das du anschließend in ein PNG umwandelst. Sie steckt unter Vercels Open-Graph-Bildgenerierung und unter dem ImageResponse von Next.js — wer Social Cards erzeugt, nutzt sie also meist, ohne sie zu nennen. Für Gründerinnen und Gründer löst sie ein enges Vertriebsproblem sauber: Jeder Link, den du teilst, und jeder Link, den jemand anderes teilt, trägt ein Vorschaubild — und Satori lässt dieses Bild aus deinen Daten entstehen, statt es Seite für Seite von Hand zu gestalten.
Was Satori ist
Satori (github.com/vercel/satori) nimmt ein JSX-Element entgegen und gibt eine SVG-Zeichenkette zurück. Geschrieben ist es in TypeScript, lizenziert unter MPL-2.0. Du übergibst einen Baum schlichter Elemente plus eine Schrift als Buffer, Satori berechnet das Layout mit Yoga — derselben Flexbox-Engine, die React Native verwendet — und liefert Vektorausgabe, die du zu einem PNG machst. Es läuft im Browser, in Node ab Version 16 und in Web Workern und bringt seine WebAssembly-Abhängigkeiten fertig mit.
Es ist bewusst kein Browser, und genau die Einschränkungen sind das Interessante. Das JSX muss rein und zustandslos sein: keine React-Hooks, kein dangerouslySetInnerHTML. Es gibt keine style-Tags und keine externen Stylesheets oder Skripte, jeder Stil steht inline. Die CSS-Unterstützung ist eine dokumentierte Teilmenge, `display` steht standardmäßig auf `flex` und akzeptiert nur `flex`, `contents` oder `none`, und das Projekt sagt ausdrücklich, dass die Ausgabe nicht verspricht, pixelgenau einem Browser zu entsprechen. Die meisten fassen die Bibliothek nie direkt an: Sie begegnen ihr über `next/og` oder Vercels OG-Bildgenerierung, die Satori mit einem Rasterizer und einer HTTP-Antwort umhüllen. Unter og-playground.vercel.app gibt es außerdem einen Live-Playground — der schnellste Weg herauszufinden, ob ein Layout überhaupt darstellbar ist.
Wo ein Vorschaubild sich wirklich bezahlt macht
Eine Social Card ist das einzige gestalterische Element, das automatisch mit einem Link mitreist. Du entscheidest nicht, wo sie auftaucht, und die Flächen, auf denen sie am meisten zählt, sind genau die, die du am wenigsten siehst:
- Private Weitergabe Ein Link, der in Slack, WhatsApp oder eine Direktnachricht kopiert wird, entfaltet sich zu einer Karte — und diese Karte ist das gesamte Argument für jemanden, der noch nie von dir gehört hat. Dieser Traffic kommt ohne Referrer an und landet unter Direkt, in der Lücke, die Dark Social beschreibt. Die Karte leistet also Arbeit, die dir keine Zuordnung je zeigen wird.
- Pro Seite, nicht pro Website Eine einzige handgemachte Karte für die ganze Domain heißt: Jede deiner Seiten sieht im Feed identisch aus. Generierte Karten lassen eine Vergleichsseite, einen Changelog-Eintrag und eine Doku-Seite jeweils ihren eigenen Titel zeigen — der Unterschied zwischen einem Link, der "eine Website" sagt, und einem, der "die Antwort, nach der du gefragt hast" sagt.
- Programmatische Seiten Wer Vorlagenseiten in nennenswerter Menge veröffentlicht — programmatisches SEO, Verzeichniseinträge, Landingpages je Integration —, für den hört Handarbeit bei ungefähr Seite dreißig auf, möglich zu sein. Generierung ist die einzige Variante, die den Kontakt mit einem großen Seitenbestand überlebt.
Ehrlich zur Obergrenze: `og:image` ist kein Rankingsignal, und keine Karte rettet eine Seite, die niemand teilen möchte. Sie verändert die Klickrate von Weitergaben, die ohnehin passiert wären — ein realer, aber begrenzter Effekt, in der Größenordnung eher ein gutes Title-Tag als ein neuer Kanal.
Was uns die eigene Karte gelehrt hat
Wir erzeugen die Social Card von AgentCeres — dem AI Growth Officer unter agentceres.com — mit `next/og`, also mit Satori darunter, und zwei Dinge haben uns mehr gekostet als die Karte selbst. Das erste war ein Routing-Fehler ganz ohne Fehlermeldung: Die Konventionsdatei lag ein Segment über dem Layout, an dem jede Seite tatsächlich hängt, also entstand überhaupt kein Bild und die Route lieferte still einen 404 — in der Produktion, bis wir es am 14. Juli 2026 fanden. Es warnt dich nichts: Ein fehlendes Vorschaubild sieht exakt aus wie ein Vorschaubild, das du dir noch nicht angesehen hast, und du merkst es erst, wenn du deinen eigenen Link irgendwo einfügst und er nackt zurückkommt. Wer Karten generiert, sollte eine Prüfung ergänzen, die die Bildroute abruft und auf Status 200 besteht.
Das zweite war billiger, gilt aber überall: Satoris Layoutregeln sind keine Browserregeln. Jedes Hüllelement unserer Karte trägt ein ausdrückliches `display: flex`, die Bildmarke steckt als base64-Data-URI direkt darin statt abgerufen zu werden, und die Karte wird pro Sprache vorgerendert, damit sie eine statische Datei ist und kein Edge-Rendering bei jedem Crawl. Nichts davon ist exotisch — es ist die Form, zu der eine Satori-Vorlage findet, sobald man aufhört, das CSS zu schreiben, das man für eine Seite schreiben würde. Das Werkzeug ist eine Viertelstunde Arbeit; die Frage, was eine fremde Person sehen soll, wenn dein Link im Chatfenster von jemand anderem auftaucht, ist der Teil, über den nachzudenken lohnt.
FAQ
- Ist Satori dasselbe wie @vercel/og?
- Nein. Satori ist die Layout- und Render-Bibliothek, die JSX zu SVG macht. @vercel/og — und Next.js' ImageResponse, exportiert aus next/og — umhüllt sie mit einem Rasterizer, der das SVG in ein PNG umwandelt, plus einer cache-freundlichen HTTP-Antwort. Die meisten Anwendungen wollen die Hülle. Direkt zu Satori greifst du, wenn du SVG-Ausgabe brauchst oder außerhalb von Next.js arbeitest.
- Helfen dynamische Open-Graph-Bilder beim SEO?
- Nicht direkt — og:image ist kein Rankingsignal, und Google stuft Seiten nicht höher ein, weil die Vorschau hübscher ist. Der Effekt liegt im Vertrieb: Die Karte entscheidet, ob ein geteilter Link im Feed oder im Chat angeklickt wird. Bewerte sie als Klickrate auf Weitergaben, nicht als Suchleistung.
- Was sind die wichtigsten Grenzen?
- Die CSS-Unterstützung ist eine dokumentierte Teilmenge, aufgelöst von Yogas Flexbox-Engine, weshalb sich Block- und Grid-Layouts nicht wie im Browser verhalten; style-Tags und externe Stylesheets werden nicht unterstützt; Schriften müssen als Buffer übergeben werden; das JSX muss rein und zustandslos sein; und das Projekt schreibt klar, dass die Ausgabe nicht verspricht, exakt der Browserdarstellung zu entsprechen. Das Rendern wird zudem langsamer, je mehr Schriften und Emojis pro Bild geladen werden.
- Muss ich Karten zur Laufzeit erzeugen?
- Nein, und oft solltest du es nicht. Wenn deine Seiten zur Build-Zeit feststehen, rendere die Bilder vor, damit jedes eine statische Datei aus dem Cache ist statt eines Funktionsaufrufs bei jeder Crawler-Anfrage. Genau deshalb rendern wir unsere pro Sprache vor. Erzeugung zur Laufzeit ist die richtige Wahl, wenn die Karte veränderliche Daten zeigt: eine Live-Zahl, einen Nutzernamen, einen datierten Bericht.
You built it. Now grow it.
AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.