OG-Image-Generator: Teilen-Bild in 1200 x 630 direkt im Browser erstellen | We.Inc
Gestalte das Bild, das erscheint, wenn deine Seite geteilt wird. Wähle eine Vorlage, füge Titel, Logo und Farben hinzu, sieh dir die Vorschau als Karte in X, LinkedIn, Slack und iMessage an und lade dann ein PNG in 1200 x 630 sowie die Meta-Tags herunter.
Die Standardgröße für Open-Graph-Bilder ist 1200 x 630 Pixel, ein Seitenverhältnis von 1,91 zu 1, das Facebook, LinkedIn, X, Slack und Messaging-Apps gut darstellen. Wähle unten eine Vorlage, gib deinen Titel ein, füge Logo und Markenfarben hinzu, prüfe die Vorschauen, lade dann das PNG herunter und kopiere die og:image-Meta-Tags.
Größen für Teilen-Bilder nach Plattform
Plattform
Was verlangt wird
Hinweise
Facebook und andere Meta-Apps
1200 x 630 für beste Ergebnisse; mindestens 600 x 315
Format 1.91:1; kleine Bilder erscheinen als Miniatur
X (Twitter) große Karte
Format 2:1; 300 x 157 bis 4096 x 4096; unter 5 MB
twitter:card muss auf summary_large_image stehen
LinkedIn
1200 x 627
Mit dem Post Inspector ein zwischengespeichertes Bild aktualisieren
Slack, Discord, iMessage, WhatsApp
Keine veröffentlichte Größe
Sie lesen og:image; 1200 x 630 wird überall gut dargestellt
Vier Vorlagen, in deinem Browser auf einer Zeichenfläche in exakt 1200 x 630 gezeichnet. Dein Logo verlässt dein Gerät nie. Die Vorschauen zeigen ungefähr, wie jede App das Bild zuschneidet, und der Meta-Tag-Block ist bereit zum Einfügen in den head-Bereich deiner Seite.
Wähle eine Vorlage: große Überschrift, zentriert, geteilt mit Logo oder Artikelkarte.
Gib den Titel, eine kurze Zeile darunter und den Seitennamen oder die URL ein, die unten angezeigt wird.
Wähle Hintergrund-, Text- und Akzentfarbe und lade bei Bedarf ein Logo hoch (PNG oder SVG mit transparentem Hintergrund funktioniert am besten).
Prüfe die Vorschauen, lade das PNG herunter, lade es auf deine Website hoch und füge die Meta-Tags mit der vollständigen URL ein.
Halte den Titel unter etwa 60 Zeichen und mindestens 48 Pixel hoch im Bild, denn die meisten Menschen sehen die Karte nur in einem Bruchteil ihrer echten Größe.
Lass um wichtigen Text einen Rand. Manche Apps schneiden die Ränder ab oder runden die Ecken.
Verwende in og:image eine absolute https-URL. Relative Pfade funktionieren bei den meisten Crawlern nicht.
Plattformen speichern Teilen-Bilder im Cache. Aktualisiere ein geändertes Bild mit dem Debugging-Tool der jeweiligen Plattform oder gib der Datei einen neuen Namen.
Häufige Fragen
Was ist die beste Größe für ein OG-Image?
1200 x 630 Pixel. Das erfüllt die Empfehlung von Meta für hochauflösende Displays, liegt nah an LinkedIns 1200 x 627 und funktioniert für die große Bildkarte von X, sodass eine Datei alle abdeckt. Speichere es als PNG für textlastige Designs oder als JPG für Fotos und bleib deutlich unter 5 MB.
Brauche ich ein eigenes Bild für die Twitter Card?
Meist nicht. X greift auf og:image zurück, wenn kein twitter:image vorhanden ist. Du brauchst aber den Meta-Tag twitter:card mit dem Wert summary_large_image, damit statt einer kleinen Miniatur die große Vorschau erscheint.
Warum wird noch mein altes Bild angezeigt?
Jede Plattform speichert die Vorschau im Cache. Nutze den Sharing Debugger von Meta, den Post Inspector von LinkedIn oder einfach einen neuen Dateinamen, um einen frischen Abruf zu erzwingen. Slack und Messaging-Apps aktualisieren nach eigenem Zeitplan.
Kann ich automatisch ein Bild pro Seite erstellen?
Ja, mit einem serverseitigen Bild-Renderer, der das Bild aus dem Titel jeder Seite erzeugt. Dieses Tool dient dazu, die Vorlage zu gestalten und gezielt Bilder für wichtige Seiten zu erstellen.
Was ein Teilen-Bild klickstark macht
Eine Teilen-Karte konkurriert in kleiner Größe mit allem anderen im Feed. Ein kurzer, großer Titel und ein starkes visuelles Element schlagen ein überladenes Layout. Betrachte das Bild als Partner der Überschrift, nicht als zweite Kopie der Seite.
Ein einheitlicher Markenauftritt hilft Menschen, deine Links mit der Zeit wiederzuerkennen. Verwende für jede Seite dieselbe Vorlage mit einem anderen Titel, statt jedes Bild neu zu gestalten.
Prüfen, ob es funktioniert hat
Füge nach dem Veröffentlichen die URL der Seite in unser Open-Graph-Vorschau-Tool ein, um die Tags zu sehen, die die Seite tatsächlich ausliefert, und vor einem großen Launch zusätzlich in den Debugger jeder Plattform.