Screenshot-Verschönerer
Leg deinen Screenshot auf einen schönen Hintergrund oder zeig deine Website als Mockup auf Laptop, Monitor, Tablet und Smartphone. Fertig für Doku, Social Media und Product Hunt.
Im Editor öffnenSocial Media
Open-Graph-Bild-Generator (OG Image)
Vorschaubilder für Links auf Facebook, LinkedIn, X, Slack und WhatsApp: Titel, Logo und Seitenname auf einem Musterli-Motiv, mit den passenden Meta-Tags.
Generator öffnenLäuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.
Mit einem Preset starten
Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.
Worum geht’s?
Ein Open-Graph-Bild ist das Vorschaubild, das erscheint, wenn jemand einen Link teilt, etwa auf Facebook, LinkedIn, X, Slack oder WhatsApp. Ohne eigenes Bild wählt die Plattform irgendein Bild der Seite oder zeigt gar keines. Mit einem gestalteten Bild fällt dein Link auf und wird öfter angeklickt.
Wofür du es brauchst
Blogartikel
Jeder Artikel bekommt ein eigenes Vorschaubild mit seinem Titel. Im Feed erkennt man sofort, worum es geht.
Produkt und Lancierung
Teile die Startseite oder eine neue Funktion mit Logo, Kennzeichnung und einem auffälligen Verlauf.
Dokumentation und Projekte
Auch Dokumentationen, Open-Source-Projekte und Portfolios wirken in Slack und auf GitHub professioneller.
So geht’s
Gib Titel, Kennzeichnung, Untertitel und Seitenname ein und lade bei Bedarf dein Logo hoch. Wähl eine Aufteilung und als Hintergrund ein Motiv oder ein eigenes Bild. Lade das Bild als PNG oder JPG herunter, leg es auf deine Website und kopiere die Meta-Tags in den Kopf der Seite.
Open-Graph-Bild-Generator jetzt ausprobierenTipps
- Halte den Titel kurz, etwa sechs bis zehn Wörter. Auf dem Handy wird das Bild klein angezeigt.
- Lass wichtige Inhalte nicht bis an den Rand laufen. Manche Plattformen schneiden das Bild leicht zu.
- Ein Bild aus einem anderen Musterli-Tool übernimmst du mit «Weiterverwenden» direkt als Hintergrund.
Häufige Fragen
- Welche Grösse braucht ein Open-Graph-Bild?
- Üblich sind 1200 × 630 Pixel, also etwa 1.91:1. Diese Grösse ist voreingestellt und wird von Facebook, LinkedIn, X und den meisten Chat-Apps gut dargestellt.
- Wie baue ich das Bild in meine Website ein?
- Lade das Bild auf deinen Server und kopiere die Meta-Tags in den head-Bereich der Seite. Ersetze dabei die Beispieladresse durch die vollständige Adresse deines Bildes, mit https und Domain.
- Warum zeigt eine Plattform noch das alte Bild?
- Plattformen speichern Vorschauen zwischen. Mit dem Sharing Debugger von Facebook oder dem Post Inspector von LinkedIn lädst du die Vorschau neu. Ein neuer Dateiname hilft ebenfalls.
- Werden mein Logo und mein Bild hochgeladen?
- Nein. Alles entsteht in deinem Browser. Logo und eigenes Bild bleiben auf deinem Gerät und fehlen im Teilen-Link.
Passende Generatoren
Alle Generatoren in Social Media
Avatar-Generator
Profilbilder mit Initialen, Identicons oder Formen, abgeleitet aus einem Namen. Als Kreis, abgerundet oder eckig, mit Farbe, Verlauf oder Muster.
Im Editor öffnen
CSS-Verlauf
Lineare, radiale und konische Verläufe mit sanften Übergängen in OKLCH. Als CSS, SVG oder Bild exportieren.
Im Editor öffnen
CSS-Muster
Über 30 Muster aus reinem CSS: Punkte, Raster, Streifen, Wellen und Geometrie. Als CSS, Tailwind, SVG oder Bild exportieren.
Im Editor öffnen
Blob-Generator
Organische Formen per Klick, mit Farbe, Kontur oder Verlauf. Als SVG oder Bild exportieren.
Im Editor öffnen
SVG-Wellen
Geschichtete Wellen für Abschnitte, Header und Hintergründe. Als SVG, CSS oder Bild exportieren.
Im Editor öffnen