# og image generator

> Ein kostenloses Online-Tool, das ein 1200 x 630 px großes PNG mit Ihrem Titel und Untertitel erstellt, passend für das Vorschaubild, das beim Teilen eines Links angezeigt wird.

Mit diesem og image generator erstellen Sie ein OG-Bild direkt im Browser. Geben Sie einen Titel und einen Untertitel ein, wählen Sie Farben und laden Sie ein 1200 x 630 px großes PNG herunter, das als Vorschaubild dient, wenn Ihre Seite als Link geteilt wird.

## Die wichtigsten Fakten

- Felder: Titel (bis zu 120 Zeichen), Untertitel (bis zu 200), Seitenname (bis zu 60), Verlaufsfarben, Text- und Akzentfarben, linksbündige oder zentrierte Ausrichtung.
- Lange Titel werden verkleinert, um zu passen, und nach vier Zeilen abgeschnitten; der Untertitel wird nach drei Zeilen abgeschnitten. Logo- und Hintergrundbild-Upload werden nicht unterstützt.
- Ausgabe: PNG, 1200 x 630 px.
- Ohne Konto kostenlos: bis zu 10 Umwandlungen pro Minute und 50 pro Tag und Besucher, ohne Wasserzeichen. Angemeldet kostet jedes Rendering 1 Credit (100 kostenlose Credits jeden Monat).
- Dateien werden automatisch gelöscht: 10 Minuten nach der Umwandlung ohne Konto, 1 Tag mit einem kostenlosen Konto.
- Entwickler können dasselbe Rendering mit POST https://api.aiipworld.com/v1/render und einem API-Schlüssel ausführen (siehe die Seite Screenshot-API).

## Quellen

- [The Open Graph protocol](https://ogp.me/)
- [W3C: Portable Network Graphics (PNG) Specification](https://www.w3.org/TR/png-3/)

Zuletzt geprüft: 2026-10-15

## So funktioniert es

1. Geben Sie den Titel, optional einen Untertitel und Ihren Seitennamen ein.
2. Wählen Sie die Verlaufsfarben des Hintergrunds, die Text- und Akzentfarben und die Ausrichtung.
3. Prüfen Sie die Vorschau und klicken Sie auf „Bild erstellen“.
4. Laden Sie das PNG herunter, laden Sie es auf Ihre Website hoch und verweisen Sie im og:image-Tag Ihrer Seite darauf.

## Was ein OG-Bild (Open Graph Image) ist und wozu der og image generator dient

Ein OG-Bild ist das Bild, das Link-Vorschauen zeigen, wenn Ihre Seite geteilt wird. Chat-Apps, soziale Netzwerke und andere Websites verwenden es als Vorschaukarte. Sie legen es mit einem og:image-Meta-Tag fest. Dieser og image generator erstellt dafür ein 1200 x 630 PNG.

## Größe und Gestaltungstipps

Verwenden Sie 1200 x 630 Pixel, eine Größe, die häufig für Vorschaubilder von Links und Bilder zum Teilen in sozialen Netzwerken genutzt wird. Halten Sie den Titel kurz. Sorgen Sie für starken Kontrast zwischen Text und Hintergrund. Lassen Sie einen Abstand zu den Rändern, damit der Text nicht zu nah am Rand steht.

## Bild auf Ihrer Seite einbinden

Laden Sie das PNG unter einer öffentlichen Adresse auf Ihre Website hoch und verweisen Sie das og:image-Tag auf diese Adresse. Prüfen Sie die Link-Vorschau, bevor Sie die Seite breit teilen.

## Lange Titel und andere Sprachen

Der Titel wird mit zunehmender Länge kleiner und endet nach vier Zeilen. Der Untertitel endet nach drei Zeilen. Chinesischer, japanischer und koreanischer Text wird dargestellt, ebenso Emojis. Prüfen Sie die Vorschau, nachdem Sie langen Text eingegeben haben.

## Dynamisches OG-Bild für jede Seite (API)

Ein dynamisches OG-Bild wird aus den eigenen Daten der Seite erstellt, etwa aus ihrem Titel, statt aus einer Datei, die die ganze Website gemeinsam nutzt. Um eines für jede Seite zu erstellen, senden Sie das HTML jeder Seite mit einem Viewport von 1200 x 630 und der Ausgabe output auf png an die API:

```bash
curl -X POST https://api.aiipworld.com/v1/render \
  -H "Authorization: Bearer $AIIPWORLD_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<body style=\"margin:0;width:1200px;height:630px;background:#312e81;color:#fff;font:700 64px sans-serif;display:flex;align-items:center;padding:0 80px;box-sizing:border-box\">How we cut build times in half</body>","output":"png","options":{"viewport":{"width":1200,"height":630}}}'

# returns {"job_id": "...", "status": "queued"}; then poll:
curl https://api.aiipworld.com/v1/jobs/JOB_ID -H "Authorization: Bearer $AIIPWORLD_API_KEY"
```

Die API arbeitet asynchron: Die erste Antwort ist eine job_id, und Sie fragen den Auftrag ab, bis er erfolgreich ist oder fehlschlägt. Laden Sie das Ergebnis über den Link in der Antwort herunter und speichern Sie es in Ihrem eigenen Speicher. Der Link ist nur kurz gültig und Ergebnisse werden nach einer festgelegten Zeit gelöscht. Verweisen Sie og:image deshalb nicht auf die API selbst. Erstellen Sie das Bild beim Veröffentlichen der Seite oder beim ersten Bedarf und liefern Sie Ihre gespeicherte Kopie aus.

Webhooks sind noch nicht verfügbar, und es gibt keinen Stapel-Endpoint, daher senden Sie für jedes Bild eine eigene Anfrage. Ein einfaches Rendering kostet 1 Credit. Die Seite zur Screenshot-API listet alle Optionen auf.

## Bild mit diesem Tool erstellen

Dieser open graph image generator nimmt einen Titel, einen Untertitel und Ihren Seitennamen und zeichnet sie auf einem Verlauf in ein 1200 x 630 PNG. Wählen Sie die Verlaufsfarben des Hintergrunds, die Textfarbe, eine Akzentfarbe und die Ausrichtung. Prüfen Sie die Vorschau, bevor Sie auf „Bild erstellen“ klicken.

Das Tool hostet die Datei nicht für Sie. Laden Sie das PNG herunter, laden Sie es unter einer öffentlichen Adresse auf Ihre Website hoch und tragen Sie diese Adresse danach in Ihre Seite ein. Halten Sie den Titel kurz, damit der Text lesbar bleibt.

## Bilder für Social Share und Twitter-Cards

Wenn Sie nach einem Generator für Social-Share-Bilder gesucht haben, erstellt dieses Tool ein Bild für eine Seite: ein 1200 x 630 PNG, auf das Sie in den Meta-Tags der Seite verweisen.

Wenn Sie einen Twitter-Card-Generator suchen, beachten Sie: Eine Twitter-Card ist der Name der Vorschaukarte, die ein Link in diesem Netzwerk anzeigen kann. Das PNG ist dieselbe Art von Bild, und Sie können aus den Meta-Tags Ihrer Seite darauf verweisen. Tragen Sie seine öffentliche Adresse im og:image-Tag ein und, falls Ihre Seite es verwendet, in einem twitter:image-Tag.

## Open-Graph-Beispiele und ihre Gemeinsamkeiten

Open-Graph-Beispiele haben meist einige Merkmale gemeinsam: einen kurzen Titel, der auch bei kleiner Vorschau lesbar bleibt, einen zurückhaltenden Untertitel und starken Kontrast zwischen Text und Hintergrund. Der Generator hat Felder für dieselben Dinge: Titel, Untertitel und Farben.

Man sucht auch nach opengraph images als ein Wort. Die Datei ist dasselbe 1200 x 630 px große PNG. Wenn Sie einen Twitter-Card-Image-Generator suchen, funktioniert das PNG aus diesem Tool auch dort: Verweisen Sie im twitter:image-Tag darauf, falls Ihre Seite es verwendet.

## Fragen

### Wie groß ist das Bild?

1200 x 630 Pixel, eine Größe, die häufig für Vorschaubilder von Links verwendet wird. Prüfen Sie die Anforderungen der Plattformen, die Sie nutzen.

### Wie verwende ich das Bild auf meiner Website?

Laden Sie das PNG irgendwo öffentlich auf Ihre Website hoch und fügen Sie im Head der Seite einen Meta-Tag hinzu, zum Beispiel `<meta property="og:image" content="https://aiipworld.com/og.png">`. Es werden absolute URLs erwartet.

### Funktioniert es mit nicht englischem Text und Emojis?

Der Render-Server hat Noto-Schriftarten, darunter für Chinesisch, Japanisch und Koreanisch, sowie farbige Emojis, daher werden diese dargestellt. Wir haben Chinesisch, Japanisch, lateinische Buchstaben mit Akzenten und ein Emoji getestet.

### Was passiert bei einem sehr langen Titel?

Der Titel wird mit zunehmender Länge kleiner und nach vier Zeilen abgeschnitten. Der Untertitel wird nach drei Zeilen abgeschnitten. Ein kurzer Titel bleibt größer und ist leichter lesbar.

### Kann ich ein Logo oder ein Hintergrundbild hinzufügen?

Nicht in diesem Tool. Mit der API können Sie Ihr eigenes HTML, einschließlich Bilder, senden und erhalten dieselbe Art von PNG.

### Kann ich für jede Seite meiner Website eines erstellen?

Ja, mit der API: Erzeugen Sie in Ihrem Code das HTML für jede Seite und fordern Sie ein PNG mit 1200 x 630 an. Der Codeabschnitt zeigt die Anfrage.

### Wie lange wird das Bild aufbewahrt?

Ergebnisse aus dem Web-Tool werden nach 10 Minuten gelöscht. Laden Sie es herunter und hosten Sie es selbst.

### Was ist ein Open-Graph-Bild?

Es ist ein Bild, das Link-Vorschauen anzeigen können, wenn jemand eine Seite Ihrer Website teilt. Sie legen es mit dem Meta-Tag og:image im Head der Seite fest. Das Bild aus diesem Tool ist ein 1200 x 630 PNG.

### Brauche ich ein Bild speziell für Twitter?

Nicht immer. Für Twitter-Cards können Sie ein twitter:image-Tag hinzufügen, und viele Websites verweisen es auf dieselbe Datei wie og:image. Prüfen Sie in der Dokumentation jeder Plattform, welche Tags sie auswertet.

### Warum wird das alte Bild noch angezeigt, nachdem ich es geändert habe?

Plattformen speichern eine eigene Kopie der Vorschau für eine gewisse Zeit, daher kann das alte Bild noch erscheinen, nachdem Sie ein neues hochgeladen haben. Prüfen Sie in der Dokumentation der Plattform, ob es eine Möglichkeit gibt, die Vorschau zu aktualisieren.

### Ist der open graph image generator kostenlos nutzbar?

Ja. Das Web-Tool ist kostenlos und benötigt kein Konto. Die anonyme Nutzung erfordert eine kurze Sicherheitsprüfung, ein angemeldetes Konto überspringt sie. Ergebnisse werden nach 10 Minuten gelöscht, laden Sie das PNG also rechtzeitig herunter.

### Kann ich das PNG auf mehreren Seiten verwenden?

Ja. Die Datei ist ein gewöhnliches PNG, daher können Sie die Meta-Tags mehrerer Seiten darauf verweisen lassen. Sie können auch mit demselben Tool für jede Seite ein eigenes Bild mit eigenem Titel erstellen.

### Wie erstelle ich für jede Seite ein dynamisches OG-Bild?

Erstellen Sie eine kleine HTML-Vorlage, tragen Sie den Titel jeder Seite ein und senden Sie sie an POST /v1/render mit einem Viewport von 1200 x 630 und der Ausgabe output auf png. Fragen Sie den Auftrag ab, laden Sie das PNG herunter und speichern Sie es mit Ihrer Seite. Verweisen Sie das og:image-Tag der Seite auf Ihre gespeicherte Datei und nicht auf die API, weil der Download-Link nur kurz gültig ist.

## Ähnliche Tools

- [HTML in Bild umwandeln](https://aiipworld.com/de/tools/html-in-bild/index.md)
- [Website Screenshot online: Tool](https://aiipworld.com/de/tools/website-screenshot/index.md)
- [Ganze Webseite Screenshot](https://aiipworld.com/de/tools/ganze-webseite-screenshot/index.md)
- [Text in PNG umwandeln](https://aiipworld.com/de/tools/text-in-png/index.md)
- [Code in Bild umwandeln](https://aiipworld.com/de/tools/code-in-bild/index.md)
- [Website mockup erstellen](https://aiipworld.com/de/tools/website-mockup-erstellen/index.md)
- [App Screenshot Generator für Store-Bilder](https://aiipworld.com/de/tools/app-screenshot-generator/index.md)
- [HTML in JPG umwandeln: Konverter](https://aiipworld.com/de/tools/html-in-jpg/index.md)

Seite: https://aiipworld.com/de/tools/og-image-generator/