Vorlage für Bild-SEO und Alt-Text

Beschreibende Dateinamen

Benennen Sie Bilddateien vor dem Upload um, damit sie das Motiv beschreiben und die Bildersuche unterstützen.

Benennen Sie Dateien vor dem Upload

Suchmaschinen lesen den Dateinamen als ein Signal dafür, was ein Bild zeigt, und ein klarer Name lässt sich in Ihrer Mediathek leichter verwalten. Ersetzen Sie Kamera-Standards wie [IMG_4827.jpg] durch eine kurze, menschenlesbare Beschreibung.

• Beschreiben Sie das Motiv: [roter-leder-buerostuhl.jpg], keine zufällige Zeichenfolge.
• Verwenden Sie Bindestriche zwischen Wörtern; vermeiden Sie Leerzeichen, Unterstriche und Sonderzeichen.
• Bleiben Sie bei Kleinschreibung für Konsistenz über Server hinweg.
• Fassen Sie sich kurz: ein paar aussagekräftige Wörter schlagen eine lange Keyword-Kette.

Stopfen Sie keine Keywords hinein und wiederholen Sie nicht dieselbe Phrase in jeder Datei. Benennen Sie jedes Bild nach dem, was es tatsächlich zeigt, damit der Name genau und nützlich bleibt.

Schnelltest: Könnte jemand das Bild allein anhand des Dateinamens erraten? Wenn ja, sind Sie fertig. Fügen Sie bei einer Reihe ähnlicher Aufnahmen ein unterscheidendes Detail hinzu, etwa Farbe, Blickwinkel oder Modell: [produktname-vorderansicht.jpg] und [produktname-seitenansicht.jpg].

Alt-Text (Barrierefreiheit zuerst)

Schreiben Sie Alt-Attribute, die Bilder für Screenreader-Nutzer und Suchmaschinen beschreiben.

Schreiben Sie Alt-Text zuerst für Menschen

Alt-Text existiert in erster Linie für die Barrierefreiheit: Er wird von Screenreadern vorgelesen und angezeigt, wenn ein Bild nicht lädt. Beschreiben Sie in einfacher Sprache, was das Bild vermittelt, als würden Sie es jemandem erklären, der es nicht sehen kann.

• Seien Sie konkret und knapp: [eine Barista gießt Latte Art in eine weiße Tasse], etwa ein kurzer Satz.
• Vermitteln Sie den Zweck: beschreiben Sie, warum das Bild da ist, nicht nur seine visuellen Details.
• Lassen Sie Füllwörter weg: beginnen Sie nicht mit [Bild von] oder [Foto von]; die Technik kündigt es bereits als Bild an.
• Kein Keyword-Stuffing: eine natürliche Erwähnung eines relevanten Begriffs ist in Ordnung; eine Liste von Keywords schadet der Barrierefreiheit.

Verwenden Sie bei rein dekorativen Bildern ohne Informationsgehalt einen leeren Alt-Text ([alt=""]), damit Screenreader sie überspringen. Ist das Bild zugleich ein Link, sollte der Alt-Text das Ziel oder die Aktion des Links beschreiben.

Tipp: Wenn eine Bildunterschrift das Bild bereits vollständig beschreibt, halten Sie den Alt-Text kurz, um dieselben Worte nicht doppelt zu wiederholen.

Komprimierung und moderne Formate (WebP/AVIF)

Verkleinern Sie die Dateigröße und wechseln Sie zu modernen Formaten, um Ladezeit und LCP zu verbessern.

Komprimieren und modernisieren Sie jedes Bild

Große Bilder verlangsamen Seiten und können Ihren Largest Contentful Paint beeinträchtigen. Verkleinern Sie die Dateigröße vor dem Upload und liefern Sie moderne Formate aus, die bei vergleichbarer Qualität weit besser komprimieren als ältere.

• Wählen Sie das richtige Format: AVIF oder WebP für Fotos und die meisten Grafiken; SVG für Logos und einfache Icons; behalten Sie PNG nur, wenn Sie Transparenz oder scharfen Text brauchen.
• Skalieren Sie auf die Anzeigegröße: liefern Sie keine [4000px]-Datei in einen [800px]-Slot.
• Komprimieren Sie mit Augenmaß: streben Sie die kleinste Datei an, die noch sauber aussieht; testen Sie ein paar Qualitätsstufen und vergleichen Sie.
• Bieten Sie Fallbacks: nutzen Sie das picture-Element, um AVIF oder WebP mit einem JPEG-Fallback für ältere Browser anzubieten.

Arbeitsablauf: exportieren Sie in den korrekten Abmessungen, schicken Sie die Datei durch ein Komprimierungstool und prüfen Sie dann, ob sie auf einem hochauflösenden Bildschirm scharf aussieht. Priorisieren Sie beim Hero- oder Hauptbild ein schnelles Laden, da es oft das LCP-Element der Seite ist.

Responsive Bilder und Lazy Loading

Liefern Sie die richtige Größe pro Gerät aus und verzögern Sie Bilder außerhalb des Sichtbereichs, um das Laden zu beschleunigen.

Bilder richtig dimensionieren und verzögern

Responsives Markup lässt den Browser die beste Datei für jeden Bildschirm wählen, während Lazy Loading Bilder verzögert, zu denen der Besucher noch nicht gescrollt hat. Zusammen sparen sie verschwendete Bytes und beschleunigen das erste Rendering.

• Nutzen Sie srcset und sizes: bieten Sie mehrere Breiten an, damit Handys kleine Dateien laden und große Bildschirme scharfe erhalten.
• Setzen Sie width und height: fügen Sie explizite Abmessungen (oder aspect-ratio) hinzu, um Platz zu reservieren und Layoutverschiebungen zu verhindern.
• Lazy-Loading unterhalb des Falzes: fügen Sie [loading="lazy"] zu Bildern hinzu, die außerhalb des Sichtbereichs beginnen.
• Lazy-Loaden Sie NICHT das LCP-Bild: das Hero- oder Hauptbild oberhalb des Falzes sollte sofort laden; markieren Sie es stattdessen als hoch priorisiert.

Warum es zählt: das Verzögern von Bildern außerhalb des Sichtbereichs macht Bandbreite für das frei, was zuerst sichtbar ist. Das Reservieren von Platz mit festen Abmessungen verhindert, dass Inhalte springen, während Bilder eintreffen, was Ihren Cumulative Layout Shift und das Leseerlebnis schützt.

Bildunterschriften, Kontext und Bild-Sitemaps

Stärken Sie die Bildrelevanz durch Kontext auf der Seite und helfen Sie Crawlern, Bilder zu finden.

Kontext hinzufügen und Auffinden erleichtern

Suchmaschinen lesen den Text rund um ein Bild, die Bildunterschrift und den Seitentitel, um es zu verstehen. Starker Kontext plus eine Bild-Sitemap machen Ihre Visuals leichter interpretierbar und auffindbar.

• Fügen Sie hilfreiche Bildunterschriften hinzu: Bildunterschriften werden häufiger gelesen als Fließtext, nutzen Sie sie also für Abbildungen, Diagramme und Produktaufnahmen.
• Platzieren Sie Bilder nahe am relevanten Text: stellen Sie jedes Bild neben den Absatz, den es illustriert.
• Nutzen Sie das figure-Element: fassen Sie ein Bild und seine figcaption für eine klare, semantische Struktur zusammen.
• Führen Sie Bilder in einer Sitemap auf: nehmen Sie Bildeinträge (oder eine eigene Bild-Sitemap) auf, damit Crawler per Skript oder Galerie geladene Grafiken entdecken können.

So wenden Sie es an: schreiben Sie für das Bild unter [Seiten-URL] eine Bildunterschrift, die Information hinzufügt, statt den Alt-Text zu wiederholen, und sorgen Sie dafür, dass die nahe Überschrift und der Text dasselbe Motiv erwähnen. Bestätigen Sie dann, dass die Datei in Ihrer XML-Sitemap erscheint.

Strukturierte Daten für Bilder und Lizenzierung

Zeichnen Sie Bilder aus, damit sie mit Rich Results und klarer Lizenzierung erscheinen können.

Bilder auszeichnen und lizenzieren

Strukturierte Daten teilen Suchmaschinen die Rolle und den Eigentümer eines Bildes mit, was reichhaltigere Bildergebnisse und ein Lizenzierbar-Badge freischalten kann. Fügen Sie sie dort hinzu, wo Bildrechte oder Kontext zählen, etwa auf Produkt-, Rezept- oder Artikelseiten.

• Nutzen Sie das richtige Schema: verweisen Sie auf hochauflösende Bild-URLs in Ihrem Product-, Recipe-, Article- oder ImageObject-Markup.
• Stellen Sie große, crawlbare Bilder bereit: strukturierte Daten sollten auf Bilder verweisen, die nicht blockiert sind und die Mindestgrößenvorgaben erfüllen.
• Fügen Sie Lizenz-Metadaten hinzu: nehmen Sie [license] und [acquireLicensePage] in ImageObject auf, damit die Nutzungsbedingungen klar sind.
• Halten Sie Metadaten ehrlich: die Felder für Urheber ([creator]) und Copyright sollten zur Seite und den tatsächlichen Rechten am Bild passen.

Vor dem Start validieren: testen Sie Ihr Markup mit einem Validator für strukturierte Daten, beheben Sie Fehler und bestätigen Sie, dass das referenzierte Bild lädt. Korrekte Lizenzfelder helfen, dass Ihre Arbeit richtig erscheint, und schützen, wie sie weiterverwendet wird.

Was macht guten Alt-Text aus?

Guter Alt-Text beschreibt knapp, was das Bild zeigt und warum es auf der Seite ist, in einfacher Sprache, die ein Screenreader ansagen kann. Halten Sie ihn bei etwa einem Satz, lassen Sie Formulierungen wie „Bild von“ weg und erwähnen Sie einen relevanten Begriff nur, wenn er natürlich passt. Das Ziel ist Barrierefreiheit, nicht Keyword-Dichte.

Wann sollte ich leeren Alt-Text (alt="") verwenden?

Verwenden Sie ein leeres Alt-Attribut für rein dekorative Bilder ohne Informationsgehalt, etwa Hintergrundverzierungen, Abstandhalter oder Icons neben Text, der bereits dasselbe aussagt. Das leere Alt weist Screenreader an, das Bild zu überspringen. Reservieren Sie beschreibenden Alt-Text für Bilder, die Bedeutung tragen.

Welches Bildformat sollte ich für Geschwindigkeit verwenden?

Für die meisten Fotos und Grafiken liefern AVIF oder WebP die kleinsten Dateien bei guter Qualität und sind daher am besten für die Seitengeschwindigkeit. Nutzen Sie SVG für Logos und einfache Icons und behalten Sie PNG vor allem für Transparenz oder scharfen Text. Liefern Sie über das picture-Element einen JPEG-Fallback für ältere Browser aus.

Sollte ich alle meine Bilder lazy-loaden?

Nein. Lazy-Loaden Sie Bilder, die unterhalb des Falzes beginnen, damit der Browser sie erst bei Bedarf lädt. Lazy-Loaden Sie nicht das Hero- oder Hauptbild oberhalb des Falzes, denn es ist meist Ihr LCP-Element, und eine Verzögerung verlangsamt die gefühlte Ladezeit. Laden Sie dieses sofort und hoch priorisiert.

Helfen beschreibende Dateinamen wirklich beim SEO?

Sie helfen Suchmaschinen und der Bildersuche zu verstehen, was eine Datei zeigt, und machen Ihre Mediathek leichter verwaltbar. Verwenden Sie kurze, mit Bindestrichen getrennte, kleingeschriebene Namen, die das Motiv beschreiben. Sie sind ein unterstützendes Signal unter vielen, kombinieren Sie sie also mit starkem Alt-Text und umgebendem Kontext, statt sich allein auf Dateinamen zu verlassen.

Wie finden Suchmaschinen meine Bilder?

Crawler entdecken Bilder, indem sie Ihrem HTML folgen, den umgebenden Text und die Bildunterschriften lesen und Ihre Sitemap parsen. Bilder in einer XML-Sitemap (oder einer eigenen Bild-Sitemap) aufzuführen, hilft, per Skript oder Galerie geladene Visuals sichtbar zu machen. Stellen Sie sicher, dass Bilder nicht durch robots-Regeln blockiert sind und nahe an relevanten Inhalten auf der Seite platziert werden.