Muss ich die Bilder beim Build erzeugen?

Nein. Setzen Sie eine signierte Render-URL in das og:image-Tag, und die Card wird bei der ersten Anfrage gerendert und danach aus dem Cache ausgeliefert. Während Ihres Builds wird nichts erzeugt, und Ihre Anwendung speichert nichts.

Was passiert, wenn ich das Design ändere?

Aktualisieren Sie die gespeicherte Vorlage, und jede Card folgt, auch die bereits verlinkten. Es gibt keinen neuen Build und nichts zu leeren, denn die nächste Anfrage rendert das neue Design.

Läuft die URL ab und macht alte Links kaputt?

Nur wenn Sie das wollen. Signierte URLs erhalten eine Lebensdauer in Stunden, und null bedeutet, dass sie nie abläuft, und genau das braucht ein og:image-Tag.

Gibt die signierte URL meinen API-Schlüssel preis?

Nein. Ihr Server erzeugt die URL mit dem Schlüssel, und der Schlüssel ist nie Teil der URL. Die Signatur deckt die Parameter ab, sodass niemand die Vorlage oder die Variablen ändern und trotzdem ein Rendering erhalten kann.

Welche Größe sollte die Card haben?

Die Vorlage bringt ihre eigene Breite und Höhe mit. Legen Sie sie einmal auf die 1200 x 630 fest, die die großen Plattformen erwarten, und jedes Rendering passt.

Kann ich das mit Next.js, Astro oder einem anderen Framework nutzen?

Ja. Es ist eine gewöhnliche URL in einem Meta-Tag, also kann alles, was HTML rendert, sie nutzen. Es gibt kein SDK, das Sie einführen, und keine Laufzeitumgebung, die Sie Ihrer Anwendung hinzufügen müssen.

Ein Credit pro generiertem Bild, und Wiederholungen derselben URL kommen kostenlos aus dem Cache. Crawler, die dieselbe Card wiederholt abrufen, kosten Sie keine Credits.

API für Open-Graph-Bilder

Eine Social Card für jede Seite

Gestalten Sie eine Vorlage und lassen Sie dann jede Seite ihre eigene Share Card bei Bedarf rendern. Das og:image-Tag zeigt direkt auf Ironfang Render, es gibt also keinen Build-Schritt, keinen Bild-Bucket und keinen Schlüssel in Ihrem Markup.

Kostenloses Konto erstellen API-Dokumentation lesen

Kein Build-Schritt
Kein Bildspeicher
Crawls aus dem Cache sind kostenlos
Auf Wunsch ohne Ablaufdatum

Die Open-Graph-Share-Card der Produktseite von Ironfang Render, erzeugt von Ironfang Render — Die eigene Share Card dieser Website, gerendert von der API, die sie beschreibt.

Eine Vorlage

Jede Seite braucht eine Card, und niemand will den Build-Schritt

Die üblichen Lösungen bedeuten alle Mehraufwand. Erzeugen Sie Cards beim Build, wird der Build mit jeder Seite langsamer und ist veraltet, sobald sich Inhalte ändern. Erzeugen Sie sie zur Anfragezeit, betreiben Sie einen Browser, eine Warteschlange und einen Bucket. Lassen Sie sie weg, sieht jeder geteilte Link gleich aus.

Eine signierte Render-URL streicht den Zwischenschritt vollständig. Das Tag zeigt auf Ironfang Render, die Card wird bei der ersten Anfrage gerendert und kommt danach aus dem Cache, und eine Änderung der Vorlage ändert jede Card, ohne dass Sie Ihre Anwendung anfassen.

POST /render/v1/sign
Authorization: Bearer if_live_...

{
  "kind": "image",
  "template": "og-card",
  "vars": { "title": "Why we own our hardware" },
  "width": 1200,
  "height": 630,
  "ttl_hours": 0
}

<meta property="og:image" content="https://..." >

Funktionen

Was Ihnen das Tag bringt

Die Card wird von derselben Vorlagen-Engine erzeugt wie Ihre übrigen Bilder und über eine URL ausgeliefert, die Sie überall einsetzen können.

Eine Vorlage, jede Seite

Gestalten Sie die Card einmal in HTML und CSS mit 1200 x 630. Jede Seite übergibt ihren eigenen Titel, Autor, Preis oder ihre Kategorie als Variablen.

Direkt in og:image

Eine signierte URL rendert bei Bedarf direkt unter dieser URL, sodass das Tag auf Ironfang Render zeigt statt auf eine Datei, die Ihre Anwendung erst erzeugen und hosten musste.

Neu gestalten ohne neuen Build

Ändern Sie die gespeicherte Vorlage, und jede Card folgt, auch bereits geteilte. Kein Build-Schritt, kein Cache zu leeren, kein Nachbefüllen.

Crawler kosten nichts extra

Die erste Anfrage rendert, und jede identische Anfrage danach ist ein Cache-Treffer. Wiederholte Crawls derselben Card verbrauchen keine Credits.

Kein Schlüssel im Markup

Ihr Server signiert die URL. Die Signatur deckt die Parameter ab, sodass Vorlage und Variablen von niemandem geändert werden können, der den Link besitzt.

Kein Framework nötig

Es ist eine URL in einem Meta-Tag. Next.js, Astro, Rails, Laravel oder eine statische Website nutzen sie alle auf dieselbe Weise, ohne Zusatz in Ihrer Laufzeitumgebung.

Anwendungsfälle

Seiten, die eine eigene Card verdienen

Überall dort, wo sich ein geteilter Link selbst erklären soll, statt dasselbe Bild für die ganze Website zu zeigen.

Cards für Blogbeiträge und Artikel

Eine Card pro Beitrag mit Überschrift und Autor, erzeugt, wenn jemand ihn zum ersten Mal teilt.

Produkte und Angebote teilen

Zeigen Sie Produktname, Preis und Bild in der Vorschau statt einer allgemeinen Card der Website.

Dokumentationsseiten

Geben Sie jeder Seite der Referenz eine eigene Card, damit ein geteilter Deep Link lesbar ist.

Links zu Veranstaltungen und Buchungen

Setzen Sie Datum, Ort und Titel in die Vorschau, damit sich ein geteilter Link selbst erklärt.

Nutzergenerierte Seiten

Profile und öffentliche Boards bekommen eigene Cards, ohne dass eine Job-Warteschlange Bilder erzeugt.

Changelog und Release Notes

Jedes Release wird mit eigener Version und Überschrift geteilt, aus derselben Vorlage.

Sie erzeugen andere Bilder aus Daten?

Social Cards sind nur ein Einsatzzweck der Vorlagen-Engine. Zertifikate, Abzeichen, Produktgrafiken und personalisierte Marketingbilder funktionieren alle auf dieselbe Weise, aus demselben gespeicherten HTML.

HTML-zu-Bild-API So funktionieren signierte URLs

Preise

Ein Credit pro Card, und Crawls kommen aus dem Cache

Starten Sie mit 250 kostenlosen Credits pro Monat, ohne Kreditkarte. Eine Card kostet einen Credit, wenn sie zum ersten Mal gerendert wird, und jede identische Anfrage danach ist ein Cache-Treffer, der nichts kostet, wiederholte Crawls derselben Seite sind also kostenlos. Fehlgeschlagene Aufträge werden erstattet, und beim Erreichen einer Obergrenze pausiert das Rendern, statt Mehrkosten abzurechnen.

Preise von Ironfang Render ansehen Mit anderen Anbietern vergleichen

Fragen

Bevor Sie integrieren

Die Details, die entscheiden, ob es passt, ohne vorher die ganze Referenz zu lesen.

Muss ich die Bilder beim Build erzeugen?: Nein. Setzen Sie eine signierte Render-URL in das og:image-Tag, und die Card wird bei der ersten Anfrage gerendert und danach aus dem Cache ausgeliefert. Während Ihres Builds wird nichts erzeugt, und Ihre Anwendung speichert nichts.
Was passiert, wenn ich das Design ändere?: Aktualisieren Sie die gespeicherte Vorlage, und jede Card folgt, auch die bereits verlinkten. Es gibt keinen neuen Build und nichts zu leeren, denn die nächste Anfrage rendert das neue Design.
Läuft die URL ab und macht alte Links kaputt?: Nur wenn Sie das wollen. Signierte URLs erhalten eine Lebensdauer in Stunden, und null bedeutet, dass sie nie abläuft, und genau das braucht ein og:image-Tag.
Gibt die signierte URL meinen API-Schlüssel preis?: Nein. Ihr Server erzeugt die URL mit dem Schlüssel, und der Schlüssel ist nie Teil der URL. Die Signatur deckt die Parameter ab, sodass niemand die Vorlage oder die Variablen ändern und trotzdem ein Rendering erhalten kann.
Welche Größe sollte die Card haben?: Die Vorlage bringt ihre eigene Breite und Höhe mit. Legen Sie sie einmal auf die 1200 x 630 fest, die die großen Plattformen erwarten, und jedes Rendering passt.
Kann ich das mit Next.js, Astro oder einem anderen Framework nutzen?: Ja. Es ist eine gewöhnliche URL in einem Meta-Tag, also kann alles, was HTML rendert, sie nutzen. Es gibt kein SDK, das Sie einführen, und keine Laufzeitumgebung, die Sie Ihrer Anwendung hinzufügen müssen.
Was kostet das?: Ein Credit pro generiertem Bild, und Wiederholungen derselben URL kommen kostenlos aus dem Cache. Crawler, die dieselbe Card wiederholt abrufen, kosten Sie keine Credits.

Weniger betreiben. Mehr ausliefern.

Geben Sie jeder Seite ihre eigene Card

Erstellen Sie ein Konto, speichern Sie eine Vorlage und signieren Sie eine URL. Die erste Card ist in Ihren kostenlosen Credits enthalten.

Kostenloses Konto erstellen API-Referenz lesen

250 kostenlose Credits pro Monat, ohne Kreditkarte, mit festen Nutzungsobergrenzen und kostenlosen Cache-Treffern.