Kostenloser Open Graph-Bildgenerator

Erstellen Sie mühelos ansprechende OG-Bilder, Twitter/X-Header und mehr mit nur wenigen Klicks – keine Designkenntnisse erforderlich. Sorgen Sie für die beste Darstellung in sozialen Medien wie Twitter, Facebook und LinkedIn mit den Formaten PNG (empfohlen), JPEG oder WebP. Automatisierung gewünscht? Generieren Sie Open Graph-Bilder sofort mit unserer leistungsstarken API.

Choose a template

Vorlageneigenschaften
Passen Sie Ihr Bild an, indem Sie die Eigenschaften ändern.
Hintergrund
Legen Sie einen benutzerdefinierten Hintergrund für Ihr Bild fest.
Verlaufsrichtung
Rasterüberlagerung
0.15
Preview
Optimale Bildformate für Open Graph
Wählen Sie das beste Bildformat für das Teilen in sozialen Medien.
  • PNG: Bietet hervorragende Qualität für Text und Logos.
  • JPEG: Ideal für Fotos und Bilder mit komplexen Farben.
  • WebP: Ein modernes Format mit hervorragender Komprimierung bei hoher Qualität.
Bild herunterladen
Exportieren Sie Ihr Bild im PNG-, JPEG- oder WebP-Format.

Für die beste Darstellung von Open Graph (OG)-Bildern auf Plattformen wie Twitter, Facebook und LinkedIn wird PNG (bevorzugt), JPEG oder WebP empfohlen.

API-Integration
Generieren Sie Open Graph-Bilder sofort mit unserer API.

Kopieren Sie den Anfragekörper als JSON oder cURL-Befehl.

Open Graph-Bilder einfach hinzufügen

Fügen Sie in nur wenigen Minuten Vorschaubilder für soziale Medien zu Ihrer Website hinzu. Wählen Sie unten Ihre bevorzugte Methode – ob mit HTML oder Next.js App Router.

1. Bild speichern

Speichern Sie Ihr generiertes OG-Bild als og.png im Stammverzeichnis Ihrer Website.

2.Generieren und fügen Sie den Open Graph-Tag zum HTML-head hinzu

<!-- Basic OG Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page description" />
<meta property="og:image" content="https://yourdomain.com/og.png" />
<meta property="og:url" content="https://yourdomain.com" />

<!-- Twitter/X Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yourdomain.com/og.png" />

<!-- Optional but recommended -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

Stellen Sie sicher, dass Sie yourdomain.com durch Ihren tatsächlichen Domainnamen ersetzen.

Experten-Tipps

  • Halten Sie immer Ersatzbilder bereit, falls das OG-Bild nicht geladen wird.
  • Verwenden Sie Debugging-Tools für soziale Medien, um Ihre OG-Bilder zu testen.
  • Fügen Sie aussagekräftigen Alt-Text für bessere Barrierefreiheit hinzu.
  • Nutzen Sie dynamische OG-Bilder für häufig aktualisierte Inhalte.