So erstellst du ein Vorschaubild für geteilte Website-Links

Was ist ein Vorschaubild für geteilte Links?

Du schickst jemandem einen Artikel. Vielleicht erscheint nur die Adresse, ein falsches Bild oder eine übersichtliche Karte mit Bild und Titel. Das Bild in dieser Karte heißt Link-Vorschaubild, Social-Media-Vorschaubild oder Open-Graph-Bild.

Es gehört zur Vorschau eines Webseitenlinks. Ein Instagram-Beitrag, das kleine Symbol im Browser-Tab (Favicon) und das sichtbare Titelbild einer Seite haben andere Aufgaben. Du kannst dieselbe Vorlage verwenden, solltest aber Zuschnitt, Text und Einstellungen jeweils anpassen.

Für die Vorschau liest ein Dienst Titel, Beschreibung und Bildadresse der Seite. Diese Hintergrundangaben heißen Metadaten. Open Graph kennzeichnet sie so, dass andere Dienste sie erkennen können. Meist trägst du sie ohne Programmierung in den Website-Einstellungen ein. Der MDN-Leitfaden zu Metadaten erklärt den Unterschied zum sichtbaren Seiteninhalt.

Die Dienste zeigen Links unterschiedlich an. Sie können Bilder zuschneiden, Titel kürzen oder die Vorschau weglassen. Deine Website bestimmt die Karte daher nicht vollständig. Prüfe den fertigen Link in dem Dienst, in dem du ihn teilen möchtest.

Welche Größe eignet sich für das Vorschaubild?

Beginne mit 1200 × 630 Pixeln, sofern deine Website nichts anderes empfiehlt. Das Bild ist 1200 Bildpunkte breit und 630 hoch, also fast doppelt so breit wie hoch. Diese Größe ist eine praktische Empfehlung, keine Vorschrift für alle Dienste.

Zum Beispiel empfehlen die Hinweise von LinkedIn 1200 × 627 Pixel für die Vorschau eines Beitrags einer Unternehmensseite. Verzerr das Bild nicht wegen weniger Pixel Unterschied. Bereitest du eine Version für einen bestimmten Dienst vor, beachte dessen Hinweise.

Bildmaße und Dateigröße sind verschiedene Dinge: Pixel beschreiben die Abmessungen, Kilobyte (KB) oder Megabyte (MB) den Speicherbedarf. Es gibt kein allgemeines KB-Ziel. Vergleiche Kopien und nimm die kleinere, wenn Bild und Text klar bleiben. Prüfe auch die Höchstgrenze des Dienstes.

Ist deine Vorlage etwa 1600 × 1600 Pixel groß, plane zuerst einen passenden Querformat-Zuschnitt. Einfach 1200 × 630 einzugeben kann das Motiv verzerren, wenn das Werkzeug die Proportionen nicht erhält. Unser Leitfaden zum Skalieren ohne Verzerren erklärt den Unterschied zwischen Zuschneiden und Größenänderung.

Gestalte das Bild für eine kleine Vorschau

Viele sehen die Karte auf dem Smartphone zwischen anderen Inhalten. Kleine Details verschwinden dabei leicht. Entscheide, was sofort erkennbar sein soll: das Thema des Artikels, die Veranstaltung oder das Produkt hinter dem Link.

„Bessere Produktfotos“ kann auf dem Bild besser funktionieren als der vollständige Titel mit Untertitel. Oft steht der Titel zusätzlich außerhalb des Bildes. Packe nicht alles ins Motiv; wichtige Informationen sollten auch als Seitentext vorliegen.

Wähle gut unterscheidbare Text- und Hintergrundfarben. Lass Platz um das Motiv und halte Gesichter, Produkte und wichtige Wörter vom Rand fern. Es gibt keine überall gültige Sicherheitszone. Prüfe das ganze Bild und einen engeren Zuschnitt um die Mitte.

Betrachte den Entwurf ungefähr 300 Pixel breit oder klein auf dem Smartphone. Das ist eine Leseprobe, keine technische Vorgabe. Kannst du den Text ohne Zoomen lesen und das Thema erkennen? Falls nicht, kürze den Text, vergrößere die Schrift oder entferne Details.

Bei einem Onlineshop sollte das Produkt sofort erkennbar sein. Ein Veranstaltungsbild darf Stimmung vermitteln, doch Datum und Anmeldung gehören auch in den Seitentext. Ein Logo schafft Wiedererkennung; dasselbe große Logo auf jedem Artikel erklärt dessen Thema kaum.

Wähle das Format und verkleinere eine fertige Kopie

JPG eignet sich als Ausgangspunkt für Fotos. PNG ist sinnvoll, wenn Schrift oder scharfe Kanten durch JPG unsauber werden. Wähle einen festen Hintergrund bewusst: Bei Transparenz bestimmt die Oberfläche den Hintergrund, und ein helles Logo kann verschwinden.

WebP und AVIF können auf der Website gut funktionieren. Das bedeutet aber nicht, dass der Dienst für Linkvorschauen sie ebenfalls liest. Beginne hier mit JPG oder PNG. Andere Formate solltest du im gewünschten Dienst prüfen.

Gestalte das Bild in deinem Grafikprogramm. Verwende Pixilos Zuschneidewerkzeug für den Bildausschnitt und das Werkzeug zur Größenänderung für die Abmessungen. Bei einer festen Dateigrößengrenze hilft das Verkleinern auf eine Zielgröße. Prüfe die heruntergeladene Datei. Diese Werkzeuge hinterlegen das Bild nicht in deinen Website-Einstellungen.

Komprimieren senkt den Speicherbedarf. Behalte das Original und bearbeite eine Kopie. Vergleiche Schrift, Logokanten und Farbverläufe. Ist das Ergebnis schlechter, beginne erneut beim Original mit geringerer Komprimierung. Verlorene Details kommen durch erneutes Speichern nicht zurück. Unser Vergleich von JPG und PNG hilft bei der Formatwahl für Schrift und Fotos.

Das Bild in WordPress oder einem Website-Baukasten hinterlegen

Öffne den Artikel in der Website-Verwaltung. Suche nach „Social image“, „Sharing image“, „Open Graph image“ oder einem Feld für das Vorschaubild. Es kann unter Suchmaschinenoptimierung, kurz SEO, stehen. Gehe so vor:

1. Öffne die richtige Seite. Bearbeite genau den Artikel oder die Seite, deren Link du teilen willst.
2. Wähle das Bild für diese Seite. Lade die fertige Datei hoch oder wähle sie aus der Mediathek, also den bereits gespeicherten Bildern.
3. Prüfe Titel und Standardbild. Die Änderung soll diese Seite betreffen, nicht das gemeinsame Vorschaubild der ganzen Website.
4. Speichere und veröffentliche. Nur eine Datei in die Mediathek hochzuladen ändert noch keine Vorschauangaben.
5. Teste den öffentlichen Link. Nutze vor dem Teilen die folgenden Prüfschritte.

In WordPress kann dein SEO-Plugin die Einstellung anbieten. Ein Plugin ergänzt WordPress um Funktionen. Zum Beispiel zeigt die Yoast-Anleitung die Einstellungen für Social-Media-Bilder. Menüs und Vorschaufunktionen hängen von Version und Abonnement ab. Prüfe vorhandene Funktionen, bevor du ein weiteres Plugin installierst.

Das Artikelbild kann als Vorschaubild dienen, abhängig von Theme und Plugins. Die technische Beschreibung von Yoast erklärt dessen Bildauswahl. Ein Standardbild ist die gemeinsame Ersatzgrafik für Seiten ohne eigene Auswahl. Verwende für wichtige Artikel ein eigenes, thematisch passendes Bild.

Findest du das Feld nicht, gib der Website-Betreuung die Seitenadresse und das fertige Bild. Bitte darum, das Vorschaubild einzurichten und die veröffentlichten Angaben zu prüfen. Metadaten im sichtbaren Artikeltext ersetzen die richtige Einrichtung nicht.

Optional: das Bild im Seitencode einrichten

Überspringe diesen Abschnitt, wenn du das Bild über die Einstellungen gewählt hast. Er richtet sich an dich oder deine Website-Betreuung beim direkten Bearbeiten des Codes. HTML beschreibt den Seitenaufbau. Im head-Bereich stehen Hintergrundangaben, die nicht als Artikeltext erscheinen. Trage die folgenden Angaben dort ein. og:image nennt die Bildadresse; die übrigen Open-Graph-Felder beschreiben die Seite. Die Open-Graph-Spezifikation erläutert diese Felder. Das Beispiel gilt für einen Artikel. Für eine allgemeine Seite verwendest du website als Typ.

Ersetze Domain, Seitenadresse, Titel, Beschreibung und Bilddatei durch deine Angaben. Wenn du 1200 × 630 deklarierst, muss das Bild diese Abmessungen tatsächlich haben.

<meta property="og:type" content="article">
<meta property="og:title" content="Bessere Produktfotos für deinen Shop">
<meta property="og:description" content="Bereite klare Bilder vor und prüfe sie auf deiner Produktseite.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Eine blaue Tasse auf hellem Hintergrund mit dem Text Bessere Produktfotos.">

Verwende eine vollständige Bildadresse mit HTTPS, Website-Namen und Dateipfad. Die Seitenadresse gehört in og:url und die Bildadresse in og:image. Die Seitenadresse sollte der vorgesehenen Hauptadresse entsprechen. Prüfe bei Sprachversionen, dass jede ihren eigenen Titel und die richtige Adresse erhält.

Beschreibe das Motiv und wichtige Wörter im Bild unter og:image:alt. Dieser Alternativtext ersetzt nicht die Beschreibung eines sichtbaren Artikelbildes. Wird das Bild auch im Artikel angezeigt, braucht es dort einen eigenen, passenden Alt-Text.

Prüfe zuerst, ob Theme oder Plugin die Felder schon ausgeben, und aktualisiere die vorhandene Einstellung. Mehrere Bilder können beabsichtigt sein; widersprüchliche alte und neue Angaben machen die Auswahl jedoch unklar. Halte Hauptbild und Abmessungen zusammen.

Die Angaben müssen im veröffentlichten HTML vorhanden sein, wenn der Dienst die Seite abruft. Eine erst später im Browser hinzugefügte Einstellung kann übersehen werden. Gibt es separate Bildangaben für X, prüfe diese ebenfalls: Eine Open-Graph-Korrektur ändert nicht automatisch andere Einstellungen.

Teste den veröffentlichten Link vor dem Teilen

Füge die Seitenadresse in einen neuen Beitrags- oder Nachrichtenentwurf ein. Warte auf die Vorschau. Stimmen Bild und Titel, ist der Text lesbar? Teste im vorgesehenen Dienst, ohne den Entwurf zu senden. Bei einem fehlenden oder falschen Bild helfen die nächsten Schritte.

Öffne im Browser den veröffentlichten Seitenquelltext und suche nach og:image. Der entsprechende Menüpunkt heißt je nach Browser anders. Prüfe Bildadresse, Titel und Seitenadresse. Du kannst auch die Website-Betreuung darum bitten. Eine Vorschauadresse aus der Verwaltung ist kein Test des öffentlichen Links.

Für LinkedIn gibt es den Post Inspector. Für Facebook kannst du den Sharing Debugger verwenden. Füge die veröffentlichte Seitenadresse ein und starte die Prüfung; eine Anmeldung kann nötig sein. Kontrolliere danach auch einen neuen Beitragsentwurf. Zum Testen musst du nichts veröffentlichen.

Notiere Seitenadresse, Bildadresse und getesteten Dienst. Funktioniert der Link nur in einem Dienst, lässt sich der Fehler damit besser eingrenzen als durch wiederholten Bildwechsel. LinkedIns Hinweise zum Cache erklären: Die Aktualisierung mit Post Inspector betrifft neue Beiträge. Bereits veröffentlichte Vorschauen bleiben unverändert.

Warum fehlt das Bild oder erscheint eine falsche Version?

Unterscheide drei Ursachen: Die Seite nennt das falsche Bild, der Dienst kann die Datei nicht abrufen oder er zeigt eine gespeicherte alte Vorschau. Höhere Bildqualität repariert keine falsche Adresse. Das Neuladen im Browser leert auch nicht den Speicher eines anderen Dienstes.

Öffnet die Bildadresse eine Webseite statt eines Bildes, kann der Pfad falsch oder die Datei fehlen. Manche Websites zeigen dann die Startseite. Gib der Website-Betreuung beide Adressen und bitte um Prüfung, ob die Bilddatei ohne Anmeldung erreichbar ist.

Ein Cache ist eine gespeicherte Kopie einer Seite oder eines Bildes. Er beschleunigt das Laden, kann aber veraltet sein. Ein CDN verteilt Website-Dateien über mehrere Server und kann ebenfalls Kopien speichern. Bitte bei Bedarf um Aktualisierung. Prüfe erst die öffentliche Seite und Datei, dann fordere den Dienst zum erneuten Abruf auf. Deinen Browser-Cache zu leeren aktualisiert die anderen Kopien nicht.

Du kannst ein neues Bild unter einem eindeutigen Dateinamen veröffentlichen, etwa product-photos-social-v2.jpg, und den Verweis auf der Seite ändern. So unterscheidest du die Dateien. Das erzwingt aber weder einen neuen Seitenabruf noch die Aktualisierung alter Nachrichten.

Ändere nicht vorschnell die dauerhafte Artikeladresse und schalte keine Schutzfunktionen zum Testen aus. Gib der Website-Betreuung die betroffene Adresse und die Fehlermeldung. Sie kann die gezielte Freigabe der öffentlichen Seite oder Datei prüfen.

Beispiel: eine passende Vorschau für einen Produktfoto-Leitfaden

Stell dir einen Artikel über Produktfotos vor: Ein quadratisches Tassenfoto dient als Titelbild. Der lange Titel beschreibt die Vorbereitung für unterschiedliche Geräte. Der automatische Querformat-Zuschnitt schneidet den Henkel ab. Das folgende Vorgehen ist ein Beispiel, kein gemessenes Ergebnis.

1. Gestalte eine Querformatversion. Beginne mit 1200 × 630 und lass die ganze Tasse mit etwas Abstand zum Rand sichtbar.
2. Kürze den Bildtext. Versuche „Bessere Produktfotos“. Der volle Titel bleibt im Artikel und in der Titeleinstellung der Vorschau.
3. Speichere und prüfe. Vergleiche JPG und PNG hinsichtlich Dateigröße, Schrift und Produktkanten in der kleinen Vorschau.
4. Hinterlege das Bild auf der Seite. Wähle die Datei in den Social-Media-Einstellungen des Artikels. Speichere und veröffentliche.
5. Teste den Link. Prüfe Bilddatei, Seitenangaben und eine neue Vorschau im gewünschten Dienst.

Diese Version passt zum Artikel, muss aber nicht für Instagram oder ein breites Website-Titelbild geeignet sein. Behalte die ursprüngliche Gestaltungsdatei für spätere Varianten statt immer wieder das fertige JPG zu bearbeiten.

Was haben Vorschaubilder mit SEO zu tun?

Das Bild hilft Menschen, einen geteilten Link zu verstehen. Allein durch og:image sind keine besseren Suchpositionen garantiert. Bilder im Suchergebnis, auf der Seite und in Linkvorschauen werden getrennt verwendet. Eine Einstellung bestimmt nicht alle Darstellungen.

Wähle einen verständlichen Dateinamen und einen passenden Titel. Beschreibe das Bild für Menschen statt mit einer Liste von Suchbegriffen. Googles SEO-Einstiegsleitfaden behandelt hilfreiche Inhalte und verständliche Bilder. Unser Leitfaden zu Alt-Texten und Dateinamen hilft bei Beschreibungen sichtbarer Seitenbilder.

Ein kleineres Vorschaubild beschleunigt nicht automatisch das sichtbare Titelbild. Verwendet die Seite dafür eine andere Datei, optimiere deren Laden separat. Bewerte die Website anhand der Bilder, die sie wirklich lädt.

Häufige Fragen zu Link-Vorschaubildern

Sind 1200 × 630 Pixel für Open Graph vorgeschrieben?

Nein. Sie sind hier eine praktische Ausgangsgröße. Open Graph beschreibt die Angaben zur Bildadresse und zu den Maßen; der jeweilige Dienst bestimmt Darstellung und Grenzen.

Kann das Artikelbild auch das Vorschaubild sein?

Ja, wenn die Gestaltung passt und die Seite die richtige Datei angibt. Eine eigene Version hilft bei Hochformat, quadratischen Bildern oder Text, der klein nicht lesbar ist.

Braucht jede Seite ein eigenes Bild?

Nicht unbedingt. Ein Standardbild ist eine sinnvolle Reserve. Eigene Bilder lohnen sich besonders für geteilte Ratgeber, Produkte und Veranstaltungen, deren Thema das Logo allein nicht erklärt.

Warum bleibt das alte Bild in einem bestehenden Beitrag?

Der Dienst kann die ursprüngliche Vorschau beibehalten. Prüfe einen neuen Entwurf und die Aktualisierungshinweise des Dienstes. Ein Bildwechsel auf der Website ändert bereits gesendete Nachrichten oder Karten nicht zuverlässig.

Fügt eine Teilen-Schaltfläche das Vorschaubild hinzu?

Nein. Sie erleichtert das Teilen, ersetzt aber keine Seitenangaben. Der empfangende Dienst entscheidet, ob er eine Linkkarte lädt und zeigt. Eine Bilddatei separat zu teilen ist eine andere Funktion.

Zusammenfassen mitChatGPT (öffnet sich in einem neuen Tab)Grok (öffnet sich in einem neuen Tab)Google (öffnet sich in einem neuen Tab)Perplexity (öffnet sich in einem neuen Tab)Claude (öffnet sich in einem neuen Tab)