OG-Bild-Generator

Was ist OG-Bild-Generator?

Der OG-Bild-Generator ist ein kostenloses Browser-Tool zum Erstellen von Social-Share-Cards (Open-Graph- / Twitter-Card-Bilder) in der Standardgröße von 1200x630 Pixeln. Marketer, Blogger, Indie-Entwickler und alle, die eine Landingpage veröffentlichen, nutzen es, um ein sauberes Vorschau-Thumbnail zu erstellen, ohne eine Design-App zu öffnen. Du tippst die Überschrift und eine optionale Unterüberschrift, wählst eine einfarbige Fläche oder einen diagonalen Verlauf, legst Textfarbe sowie linke oder zentrierte Ausrichtung fest und fügst eine Logo-URL ein, wenn du eine Markenkennzeichnung in der Ecke möchtest. Das Canvas wird live neu gezeichnet, sodass du Formulierung und Farben feinjustieren und dann ein PNG exportieren kannst, das du direkt in deinem og:image-Meta-Tag referenzieren kannst.

So verwendest du OG-Bild-Generator

1. Gib deinen Titel in das Feld „Titel“ ein; er wird groß und fett gezeichnet und auf bis zu drei Zeilen umgebrochen.
2. Füge unter dem Titel einen optionalen Untertitel hinzu oder lass ihn leer, um nur die Überschrift anzuzeigen.
3. Öffne die Einstellungen, um einen einfarbigen Hintergrund oder einen Verlauf zu wählen, die Hintergrund- und Textfarben festzulegen und linke oder zentrierte Ausrichtung zu wählen.
4. Füge optional eine Logo-Bild-URL ein (ein Bild mit aktiviertem CORS), um ein Logo über dem Text zu platzieren.
5. Beobachte, wie sich die 1200x630-Vorschau live aktualisiert, klicke darauf zum Vergrößern und lade die Karte dann als PNG herunter.

Beispiele

Häufig gestellte Fragen

Welche Größe hat das erzeugte Bild?

Immer 1200x630 Pixel, das Standard-Seitenverhältnis von Open Graph und Twitter summary-large-image (etwa 1,91:1). Diese Größe wird in den Link-Vorschauen von Facebook, X/Twitter, LinkedIn, Slack und Discord gestochen scharf angezeigt.

Wie füge ich mein eigenes Logo hinzu?

Füge eine direkte URL zu einem Logo-Bild in das Feld „Logo-URL“ ein. Das Bild wird von dieser URL abgerufen und mit fester Höhe und unter Beibehaltung des Seitenverhältnisses über dem Text gezeichnet. Die Quelle muss die ursprungsübergreifende Nutzung (CORS) erlauben, sonst blockiert der Browser das Zeichnen auf dem Canvas.

Kann ich Farben und Layout steuern?

Ja. In den Einstellungen kannst du zwischen einem einfarbigen Hintergrund und einem zweifarbigen diagonalen Verlauf wechseln, die Hintergrundfarbe(n) und die Textfarbe festlegen und linke oder zentrierte Ausrichtung wählen. Titel und Untertitel werden automatisch umgebrochen und langer Text wird mit Auslassungspunkten gekürzt.

Wird mein Text oder Bild irgendwohin hochgeladen?

Nein. Die Karte wird vollständig auf einem HTML-Canvas in deinem Browser gezeichnet und lokal als PNG exportiert. Dein Titel, Untertitel und deine Farben werden nie an einen Server gesendet. Nur eine von dir angegebene Logo-URL wird abgerufen, und diese Anfrage geht direkt von deinem Browser an den von dir gewählten Host.