Open-Graph-Karten haben oft dasselbe Layout, während sich Titel und andere Inhalte von Seite zu Seite ändern. Speichern Sie das Layout als Vorlage und übergeben Sie die Variablen jeder Seite über signierte URLs. Ironfang Render übernimmt Erzeugung und Auslieferung der Bilder, sodass Ihre Anwendung keine Bilddateien erstellen oder speichern muss.
Die Karte einmal speichern
Vorlagen sind HTML mit {{ Platzhaltern }}. Alles, was ein Browser darstellen kann, funktioniert, auch Webfonts und CSS-Verläufe.
Die wiederverwendbare Vorlage anlegen.
curl -X POST https://api.ironfang.uk/render/v1/templates \
-H "Authorization: Bearer if_live_..." \
-H "Content-Type: application/json" \
-d '{
"name": "og-card",
"html": "<body style=\"background:#0a0a0f;color:#fff;font:700 64px sans-serif;padding:80px\">{{title}}</body>",
"width": 1200,
"height": 630
}'1200 × 630 ist eine weithin unterstützte Größe für Open-Graph-Bilder. Die Antwort enthält die Vorlagen-ID, die Sie in der nächsten Anfrage verwenden.
Eine URL pro Seite erstellen
Eine signierte URL enthält die Variablen und eine Signatur. Sie kann daher öffentlich sein, ohne Ihren API-Schlüssel preiszugeben. Setzen Sie ttl_hours auf 0, um eine URL ohne Ablaufdatum zu erstellen, die sich für ein Meta-Tag eignet, das Crawler später erneut abrufen.
curl -X POST https://api.ironfang.uk/render/v1/sign \
-H "Authorization: Bearer if_live_..." \
-H "Content-Type: application/json" \
-d '{
"kind": "image",
"template": "TEMPLATE_ID",
"vars": { "title": "Reliable screenshots in CI" },
"ttl_hours": 0
}'In die Seite einbinden
<meta property="og:image" content="https://api.ironfang.uk/render/v1/r/0/a1b2...">
<meta name="twitter:card" content="summary_large_image">Die Crawler sozialer Netzwerke rufen die signierte URL direkt bei Ironfang Render ab, sodass Ihr Anwendungsserver das Bild weder erzeugt noch ausliefert. Das erste Rendern verbraucht das normale Credit-Kontingent, identische Anfragen aus dem Cache sind kostenlos.
Das Design zentral ändern
So bleibt die Bilderzeugung an die aktuelle Vorlage gebunden, und nach einer Designänderung müssen Sie keine zuvor erzeugten Dateien mehr suchen, ersetzen und speichern.