ForHosting KIT · Bilder bearbeiten & analysieren

Open-Graph-Bild für eine Seite erstellen

Dieses Werkzeug aus dem KIT erzeugt das Open-Graph-Vorschaubild einer Seite: jenes Bild, das erscheint, wenn Sie den Link in einem Chat oder in einem sozialen Netzwerk einfügen. Ausgehend von einer Vorlage mit Titel, Hintergrund und Logo erhalten Sie ein fertiges PNG in 1200 × 630 Pixel.

● Stabilpro Anfrage + pro Bild$0.040

Ausführen — $0.040 + $0.001/Bild API ansehen

Nutzen Sie es über WebAPIE-MailApp baldTelegram bald

Online ausführen

Führen Sie dies mit Ihrem Konto auf unseren Servern aus. Kostenlose Tools laufen in Ihrem Browser; dieses wird zum oben genannten Preis von Ihrem KIT-Guthaben abgebucht.

Was das Open-Graph-Bild eigentlich ist

Fügen Sie den Link einer Seite in WhatsApp, LinkedIn oder Facebook ein, erscheint oft ein Rechteck mit Bild, Titel und Beschreibung: Dieses Bild ist die Open-Graph-Vorschau, die eine Seite über den Meta-Tag og:image angibt. Fehlt sie, wirkt der Link kahl oder zeigt einen zufälligen Bildausschnitt der Seite. Wer sie gezielt festlegt, bestimmt selbst, wie die eigene Website beim Teilen aussieht.

Die richtige Größe: 1200 × 630

Der Standard für die Vorschau ist 1200 × 630 Pixel, das Format, das soziale Netzwerke auf Computer und Smartphone korrekt zuschneiden, ohne wichtige Bildelemente abzuschneiden oder zu verzerren. Das Werkzeug erzeugt direkt diese Größe, sodass Sie gestauchte oder falsch beschnittene Bilder von vornherein vermeiden. Eine Vorschau im richtigen Seitenverhältnis wirkt überall sauber, vom Chat bis zum Feed eines sozialen Netzwerks.

Von einer Vorlage zu vielen Vorschauen

Sie gehen von einer Vorlage mit Hintergrund, Logo und Platz für den Titel aus und ändern für jede Seite nur den Text: den Titel des Artikels, den Produktnamen, das Datum der Veranstaltung. So tragen alle Vorschaubilder der Website denselben grafischen Charakter mit jeweils eigenem Inhalt, ohne dass Sie jedes Bild einzeln in einem separaten Editor gestalten, anpassen und exportieren müssen.

Einbindung, Preis und Kanäle

Das fertige PNG laden Sie auf Ihre Website und tragen es im Kopfbereich der Seite mit dem Meta-Tag og:image ein, zusammen mit Titel und Beschreibung. Die Vorschau entsteht, indem eine Vorlage in einem Browser auf unseren Systemen gerendert wird, daher der Preis von $0.040 pro Anfrage zuzüglich $0.001 je Bild. Nutzbar über die Website für eine einzelne Seite oder per API.

Anwendungsfälle

Ein Blog mit einer Vorschau je Artikel

Ein Blog möchte, dass jeder geteilte Artikel den eigenen Titel auf einem einheitlichen Hintergrund zeigt. Aus einer Vorlage erzeugt es das Open-Graph-Bild jedes Beitrags, indem nur der Text wechselt, und geteilte Links wirken gepflegt.

Produktseiten eines Onlineshops

Ein Onlineshop teilt Produkte häufig per WhatsApp. Mit einer eigenen Vorschau je Artikel zeigt die Nachricht Namen und Bild des Produkts, statt eines anonymen Rahmens.

Das Ankündigungsbild einer Veranstaltung

Für eine Veranstaltung in Hamburg wird eine Vorschau mit Titel und Datum benötigt. In der richtigen Größe erzeugt, zeigt der geteilte Link in Gruppen sofort, worum es geht.

Häufige Fragen

Warum erscheint bei meinem Link kein Bild?

Fast immer, weil die Seite kein Open-Graph-Bild über den Meta-Tag og:image angibt oder eine falsche Größe verwendet. Erzeugen Sie die passende Vorschau und binden Sie sie mit diesem Tag ein, zeigen soziale Netzwerke keinen leeren Rahmen mehr.

Welche Größe muss die Vorschau haben?

Der Standard ist 1200 × 630 Pixel, das Seitenverhältnis, das soziale Netzwerke auf Computer und Smartphone korrekt zuschneiden. Das Werkzeug erzeugt direkt diese Größe, sodass das Bild nicht gestaucht oder falsch beschnitten wirkt.

Was kostet eine Vorschau?

$0.040 pro Anfrage zuzüglich $0.001 je erzeugtem Bild, da die Vorschau durch das Rendern einer Vorlage in einem Browser entsteht. Sie zahlen nur, was Sie erzeugen.

Bleiben die übermittelten Inhalte vertraulich?

Vorlage und Texte werden zur Erstellung des Bildes verarbeitet und danach von unseren Systemen gelöscht. Wir speichern und verwenden sie nicht weiter.

Ich habe das Bild aktualisiert, aber in sozialen Netzwerken erscheint noch die alte Version. Warum?

Soziale Netzwerke speichern bereits gesehene Vorschauen zwischen. Nach einer Änderung müssen Sie die Plattform meist über ihr eigenes Entwickler-Werkzeug bitten, den Link erneut zu lesen, damit die gespeicherte Vorschau aktualisiert wird.

Kann ich die Vorschau automatisch für jede Seite erzeugen?

Ja, über die API erzeugen Sie die Vorschau jedes Artikels oder Produkts, sobald Sie ihn veröffentlichen, wobei nur der Titel wechselt und der grafische Stil gleich bleibt.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/image/og

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/image/og \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"image":"https://ejemplo.com/imagen.jpg"}'

const res = await fetch("https://api.kit.forhosting.com/image/og", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "image": "https://ejemplo.com/imagen.jpg"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/og",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/og", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => &#39;{"image":"https://ejemplo.com/imagen.jpg"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/og", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "image": "https://ejemplo.com/imagen.jpg"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.og",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.040

pro Bild$0.001

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`max_mb`	15
`max_megapixels`	12

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.
`422`	`task_failed`	Die Aufgabe ist fehlgeschlagen und wird nicht berechnet.

Vollständige KIT-Dokumentation lesen →