Wichtigste Erkenntnisse
- Verwenden Sie das img-Element für bedeutungstragende Inhalte und verfassen Sie einen Alternativtext für die Rolle des Bildes im jeweiligen Kontext.
- Legen Sie intrinsische Abmessungen fest, um Layout-Verschiebungen zu reduzieren.
- Liefern Sie mithilfe responsiver Quellenauswahl Abmessungen, die nahe an der gerenderten Fläche liegen.
Suchmaschinen entdecken Bilder über Seiten und Feeds, während Nutzer sie über Layout, Kontext, Barrierefreiheit und Geschwindigkeit erleben. Die wirkungsvollste Bild-SEO verbessert die Seite für beide Gruppen.
Worauf es besonders ankommt
- Wählen Sie anhand visueller Tests und der erforderlichen Unterstützung effiziente Formate und eine geeignete Qualität.
- Verwenden Sie stabile, aussagekräftige URLs, ohne Dateinamen als Ersatz für den Seitenkontext zu betrachten.
- Halten Sie wichtige Bilder für Crawler zugänglich und nehmen Sie geeignete Assets bei Bedarf in Bilder-Sitemaps auf.
- Platzieren Sie Bilder in der Nähe relevanter Überschriften und erklärender Texte.
- Messen Sie Impressionen und Klicks in Suchdaten zusammen mit Seitenleistung und Conversion.
Bilder zugleich für Nutzer und Auffindbarkeitssysteme optimieren
Bild-SEO bezeichnet die Praxis, nützliche visuelle Inhalte auf einer von Crawlern erfassbaren Seite verständlich, auffindbar und effizient zu machen. Suchsysteme bewerten die Seite, den umgebenden Text, Links, strukturierte Informationen und die Bildressource gemeinsam. Eine komprimierte Datei mit einem schlüsselwortreichen Namen kann weder eine inhaltsarme Seite noch eine blockierte Ressource oder ein Bild ausgleichen, das keinen Mehrwert bietet.
Beginnen Sie mit der Aufgabe des Nutzers. Ein Original-Produktfoto kann eine Kaufentscheidung erleichtern, ein Diagramm eine technische Frage beantworten und eine Grafik eine Analyse stützen. Dekorative Stockbilder können die Gestaltung verbessern, rechtfertigen aber weniger Aufwand für die Indexierung. Entscheiden Sie vor dem Festlegen von Markup und Laderichtlinie, welche Bilder Inhalte und welche Dekoration sind und welches wahrscheinlich das wichtigste visuelle Element der Seite ist.
Bedeutung
Das Bild sollte Informationen vermitteln, die zur Seite und zur Absicht des Nutzers passen.
Zugriff
Crawler und Nutzer müssen die Ressource mit den vorgesehenen Berechtigungen abrufen und decodieren können.
Kontext
Überschriften, Bildunterschriften, Texte in der Nähe und das Seitenthema sollten erklären, warum das Bild vorhanden ist.
Leistung
Abmessungen, codierte Bytes, Zeitpunkt der Auffindbarkeit und Decodierung sollten zur gerenderten Funktion passen.
Semantisches Markup und relevanten umgebenden Text verwenden
Platzieren Sie aussagekräftige Bilder in img- oder picture-Elementen statt in CSS-Hintergründen. Verwenden Sie Abbildungen und Bildunterschriften, wenn eine Bildunterschrift den Lesern nützt, aber versehen Sie nicht jedes dekorative visuelle Element mit zusätzlicher Semantik. Das Bild sollte nahe der Überschrift und dem Absatz erscheinen, die es unterstützt. Eine klare Seitenstruktur bietet Lesern und Indexierungssystemen eine bessere Erklärung als vom Inhalt losgelöste Metadaten.
Belassen Sie wichtige Inhalte im HTML. In ein Bild eingebetteter Text lässt sich schwerer vergrößern, übersetzen, kopieren und aktualisieren sowie mit assistiven Technologien schwerer interpretieren. Wenn ein Diagramm Beschriftungen enthält, fassen Sie seine Schlussfolgerung im Text zusammen und erläutern Sie komplexe Zusammenhänge ausführlicher in Textform. Links zu größeren Versionen sollten klare barrierefreie Bezeichnungen haben. Das Ziel darf Nutzer nicht ohne Kontext in einer übergroßen Datei festhalten.
Alternativtext aus der Funktion des Bildes ableiten
Alternativtext ersetzt das Bild, wenn es nicht wahrgenommen werden kann. Beschreiben Sie die Informationen, die im konkreten Seitenkontext benötigt werden, nicht jedes sichtbare Detail. Bei einem Produktbild können Modell und Ansicht genügen, eine Grafik sollte ihre wichtigste Schlussfolgerung vermitteln und bei einem Porträt neben einer namentlichen Autorenangabe kann allein der Name der Person ausreichen. Verwenden Sie für ein rein dekoratives Bild alt="", damit assistive Technologien es überspringen können.
Vermeiden Sie Schlüsselwortlisten, Formulierungen wie „Bild von“ und Wiederholungen einer angrenzenden Bildunterschrift. Das Attribut title enthält optionale Zusatzinformationen und ersetzt alt nicht. Viele Nutzer können nicht zuverlässig auf Hover-Text zugreifen. Wenn ein Bild der einzige Inhalt eines Links ist, sollte sein Alternativtext das Ziel oder die Aktion des Links beschreiben. Prüfen Sie diese Entscheidungen manuell, da automatisierte Prüfungen auf Vorhandensein den Nutzen nicht beurteilen können.
Informatives Bild
Beschreiben Sie das relevante Motiv oder die relevante Information prägnant.
Funktionales Bild
Beschreiben Sie die Aktion oder das Ziel, für die beziehungsweise das das Bild steht.
Komplexes Bild
Verwenden Sie einen kurzen Alternativtext sowie eine ausführliche Erklärung oder Datentabelle in der Nähe.
Dekoratives Bild
Verwenden Sie einen leeren Alternativtext und halten Sie das Bild aus dem Informationsfluss der Seite heraus.
Stabile, verständliche Bild-URLs erstellen
Verwenden Sie Dateinamen und Pfade, die das Asset für die zuständigen Personen identifizieren und einen gewissen Kontexthinweis liefern, beispielsweise ceramic-filter-installation.webp statt einer fortlaufenden Kameranummer. Halten Sie Namen prägnant, schreiben Sie sie gemäß den Projektkonventionen gegebenenfalls klein und verwenden Sie einheitliche Trennzeichen. Dateinamen erleichtern die Organisation, doch Seiteninhalt und Alternativtext liefern die eigentliche Erklärung.
Ändern Sie eine öffentliche URL möglichst nicht, wenn sich Metadaten oder Komprimierungseinstellungen ändern. Stabile URLs erhalten Verweise und reduzieren unnötige Cache-Aktualisierungen. Unveränderliche URLs mit Inhalts-Hash ermöglichen dagegen ein aggressives Caching, erfordern jedoch, dass das Seiten-Markup auf jede neue Version verweist. Entscheiden Sie sich bewusst für eine einzige Strategie. Platzieren Sie keine geheimen Daten, E-Mail-Adressen von Nutzern oder instabilen signierten Abfragezeichenfolgen in crawlbaren Bild-URLs.
Abmessungen reservieren und responsive Quellen auswählen
Legen Sie intrinsische Werte für width und height fest, damit der Browser das richtige Seitenverhältnis reservieren kann, bevor die Datei geladen wird. CSS kann das Bild weiterhin flexibel skalieren. Reservierter Platz reduziert Layout-Bewegungen, verhindert, dass sich Links in der Nähe unter dem Zeiger verschieben, und sorgt für ein vorhersehbareres Ladeerlebnis. Wenn Art Direction das Seitenverhältnis ändert, benötigt jede picture-Quelle kompatible Abmessungen oder einen anderen expliziten Layoutplan.
Verwenden Sie srcset mit Breitenangaben und einem genauen Wert für sizes, wenn sich die gerenderte Fläche je nach Layout ändert. Der Browser kann dann anhand der Fläche, der Gerätedichte und der aktuellen Bedingungen einen Kandidaten auswählen. Eine einzelne riesige Quelldatei, die per CSS verkleinert wird, muss dennoch vollständig übertragen und decodiert werden. Leiten Sie die Breiten der Kandidaten aus gemessenen Komponenten ab, statt willkürliche Abstufungen zu erzeugen, die zusätzlichen Speicher- und Invalidierungsaufwand verursachen.
Thumbnail-Ansicht
Verwenden Sie ein kleines, für die Kartengestaltung zugeschnittenes Derivat und nicht das lediglich per CSS verkleinerte Original.
Artikelinhalt
Stellen Sie Kandidaten bereit, deren Breiten sich an den tatsächlichen Inhaltsspalten orientieren, und bewahren Sie wichtige Details.
Hero-Bild
Verwenden Sie einen per Art Direction festgelegten Ausschnitt, wenn das Motiv bei einem breiten Viewport andernfalls verloren ginge.
Zoomansicht
Laden Sie das große Asset erst, nachdem der Nutzer die Detailansicht angefordert hat, und stellen Sie klare Abmessungen und Bedienelemente bereit.
Formate und Qualität durch visuellen Vergleich auswählen
JPEG bleibt für Fotos eine praktische Wahl, PNG für verlustfreie Grafiken oder Transparenz, SVG für vertrauenswürdige Vektorgrafiken und neuere Formate für effizient codierte fotografische oder gemischte Inhalte, sofern die Zielclients sie decodieren können. Die Formatwahl allein bestimmt nicht die Performance. Abmessungen, Encoder-Einstellungen, Transparenz, Metadaten und die visuellen Eigenschaften jedes Bildes beeinflussen das Ergebnis.
Vergleichen Sie repräsentative Bilder in ihren gerenderten Abmessungen. Feine Schrift, Verläufe, Hauttöne, Produktfarben und Strichgrafiken weisen unterschiedliche Qualitätsprobleme auf, daher genügt ein einzelner Qualitätswert nicht als vollständige Richtlinie. Behalten Sie bei Bedarf aufgrund der Formatunterstützung ein Fallback bei und stellen Sie sicher, dass alle Quellen gleichwertige Inhalte zeigen. Entfernen Sie nicht benötigte Metadaten, sofern die Richtlinie dies zulässt, bewahren Sie jedoch Lizenz- und Urheberrechtsinformationen auf, zu deren Erhalt die Organisation verpflichtet ist.
Wichtige Bilder ohne Verzögerung auffindbar machen
Das wichtigste Bild im ohne Scrollen sichtbaren Bereich sollte im initialen HTML enthalten, mit Abmessungen versehen und cachefähig sein sowie mit angemessener Priorität angefordert werden. Laden Sie ein Bild, das voraussichtlich zum Largest Contentful Paint wird, nicht per Lazy Loading. Natives Lazy Loading ist für viele Bilder unterhalb des sichtbaren Bereichs sinnvoll. Werden jedoch alle Galerieelemente sofort geladen, verschwendet dies Bandbreite und kann mit den primären Ressourcen der Seite konkurrieren.
Verbergen Sie wesentliche Bilder nicht hinter einer Nutzerinteraktion oder clientseitigem Rendering, wenn sie zusammen mit der Landingpage auffindbar sein sollten. Stellen Sie sicher, dass Robots-Richtlinien, Authentifizierung, Hotlink-Schutz und Antwort-Header den vorgesehenen Crawler-Zugriff erlauben. Geben Sie unter einer Bild-URL einen echten Bildinhaltstyp und einen erfolgreichen Status zurück, nicht eine HTML-Fehlerseite. Weiterleitungsketten und ablaufende Signaturen schaffen zusätzliche Fehlerquellen.
Auffindbarkeit mit kanonischen Seiten und Feeds unterstützen
Eine Bilder-Sitemap kann dabei helfen, wichtige Ressourcen auffindbar zu machen, insbesondere in komplexen Galerien oder stark skriptbasierten Anwendungen. Sie behebt jedoch keine unzugängliche Seite. Nehmen Sie nur Bilder auf, die von der Website indexiert werden dürfen, und halten Sie ihre Speicherorte mit den kanonischen Seiten-URLs synchron. Entfernen Sie gelöschte oder private Assets unverzüglich, statt in generierten Feeds dauerhaft Fehler zu hinterlassen.
Verwenden Sie strukturierte Daten nur, wenn Seite und Inhalt die Anforderungen des ausgewählten Schemas erfüllen, und stellen Sie sicher, dass jede Eigenschaft korrekt und dort sichtbar ist, wo die Richtlinien dies verlangen. Strukturierte Daten sind kein Ort für themenfremde Suchbegriffe. Bilder für Produkte, Rezepte, Artikel und Organisationen können unterschiedliche Anforderungen an Seitenverhältnis und Inhalt haben. Validieren Sie daher die vollständige Seite, statt eine Bild-URL isoliert zu testen.
Eine kontrollierte Derivat-Pipeline aufbauen
Der /image/resize-Robot von Transloadit kann die ausdrücklich festgelegten Breiten und Zuschneidestrategien erstellen, die für bekannte Seitenbereiche erforderlich sind, während /image/optimize die Dateigröße unterstützter Bildausgaben reduzieren kann. Exportieren Sie geprüfte Varianten in anwendungseigenen Speicher und bewahren Sie einen dauerhaften Datensatz mit Quellrevision, Objektschlüssel, Format, Breite, Höhe, Dateigröße in Byte und Rolle auf. Anhand dieses Datensatzes können Vorlagen konsistente intrinsische Abmessungen und responsives Markup erzeugen.
Erstellen Sie Transformations-URLs nicht ad hoc in jeder Vorlage. Eine gemeinsame Derivatrichtlinie verhindert, dass Seiten nahezu identische Größen anfordern, und macht die erneute Verarbeitung nachvollziehbar. Transloadit bereitet Dateien auf und exportiert sie. Smart CDN kann transformierte Dateien aus anwendungseigenem Speicher ausliefern. Die Anwendung bleibt für die URL-Richtlinie, die HTML-Semantik, Cache- und Zugriffsanforderungen, Sitemaps sowie die Entscheidung verantwortlich, Smart CDN oder eine andere Auslieferungsebene zu verwenden. Medienverarbeitung und Auslieferung ersetzen weder ein Inhaltssystem noch eine Suchstrategie.
Quellmasterdatei
Bewahren Sie eine autorisierte hochwertige Quelldatei auf, aus der sich künftige Derivate erneut erzeugen lassen.
Variantenmanifest
Ordnen Sie jeder semantischen Rolle Abmessungen, Format, Speicherschlüssel und Quellrevision zu.
Vorlagenausgabe
Rendern Sie src, srcset, sizes, intrinsische Abmessungen und Alternativtext anhand validierter Datensätze.
Lebenszyklus
Löschen oder verarbeiten Sie zugehörige Varianten auf vorhersehbare Weise neu, wenn sich eine Quelle ändert oder eine Einwilligung widerrufen wird.
Such- und Seitenergebnisse nach der Veröffentlichung messen
Prüfen Sie wichtige Landingpages auf fehlende Alternativtexte, falsche Abmessungen, übergroße Downloads, blockierte URLs, fehlerhafte Antworten, doppelte Assets und per Lazy Loading geladene Hauptbilder. Untersuchen Sie die Auswahl der Anfragen und das Rendering mit Browserwerkzeugen und synthetischen Tests. Nutzen Sie anschließend Felddaten zur Performance, um reale Geräte und Caches zu verstehen. Testen Sie die visuelle Qualität, statt die Reduzierung der Dateigröße als einziges Erfolgskriterium zu betrachten.
Erfassen Sie Bildimpressionen und Klicks zusammen mit Seitenimpressionen, Nutzerinteraktion, Conversion und Leistungsmetriken. Segmentieren Sie nach Seitentyp und Bereitstellungsdatum, damit sich eine Vorlagenänderung kohärent evaluieren lässt. Suchergebnisse schwanken aus vielen Gründen. Führen Sie daher nicht jede Veränderung auf eine einzelne Bildbearbeitung zurück. Bewahren Sie einen Ausgangszustand auf, führen Sie Änderungen kontrolliert ein und überwachen Sie neben dem Traffic auch Crawling-Fehler und Speicherkosten.
Technische Validierung
Prüfen Sie Status, Inhaltstyp, Crawling-Richtlinie, kanonische Seite, Abmessungen, responsive Auswahl und die Gültigkeit strukturierter Daten.
Nutzererlebnis
Prüfen Sie Layoutstabilität, Ladepriorität, Barrierefreiheit, visuelle Qualität, Zoomverhalten und Fehlerzustände.
Suchbeobachtung
Vergleichen Sie Impressionen und Klicks nach Seitengruppe über einen aussagekräftigen Zeitraum, ohne voreilig einen kausalen Zusammenhang zu behaupten.
Betrieb
Überwachen Sie die Verzweigung von Derivaten, Cache-Misses, verwaiste Objekte, Verarbeitungsfehler und den Speicherlebenszyklus.
Wissenswerte technische Details
- Mit responsiven srcset-Kandidaten kann der Browser Layoutbreite, Gerätedichte und aktuelle Bedingungen berücksichtigen. Die Auslieferung einer einzigen übergroßen Datei verschwendet Bytes, bevor CSS sie verkleinern kann.
- Ein beschreibender Alternativtext fördert die Barrierefreiheit und liefert Kontext. Keyword-Stuffing und die Wiederholung einer sichtbaren Bildunterschrift verschlechtern jedoch die Nutzererfahrung, ohne einen sinnvollen Mehrwert zu bieten.
- Das LCP-Bild sollte im initialen HTML auffindbar, korrekt priorisiert, mit Abmessungen versehen und cachefähig sein. Wahlloses Lazy Loading kann die wichtigste visuelle Darstellung verzögern.
- Moderne Formate können die Übertragungsgröße reduzieren. Browseraushandlung und Fallback müssen jedoch sicherstellen, dass Crawler und Nutzer weiterhin ein decodierbares Bild mit dem vorgesehenen Inhalt erhalten.
- Eine Bilder-Sitemap kann die Auffindbarkeit von Bildern verbessern, die über Skripte oder komplexe Galerien geladen werden. Eine kanonische Seitenstruktur und Crawlbarkeit bleiben jedoch grundlegend.
- Die Performance sollte auf Seitenebene gemessen werden, da Decodierungsaufwand, Anfragepriorität, Layout, Caching und JavaScript einen kleinen Unterschied bei den codierten Bytes überwiegen können.
Ein praxisnaher Ansatz
- 1
Prüfen Sie wichtige Landingpages auf fehlende Abmessungen, schwachen Alternativtext, übergroße Assets und blockierte URLs.
- 2
Definieren Sie anhand tatsächlich gerenderter Bereiche und unterstützter Browser eine Derivatrichtlinie.
- 3
Aktualisieren Sie Markup, Sitemaps und strukturierte Daten, sofern der Inhalt dafür geeignet ist.
- 4
Überwachen Sie nach der Bereitstellung Such- und Nutzermetriken nach Landingpage-Cluster.
Wann Transloadit hilfreich ist
Erstellen Sie mit /image/resize und /image/optimize korrekt dimensionierte Derivate in effizienten Formaten. Bewahren Sie stabile Ergebnismetadaten auf, damit Vorlagen intrinsische Abmessungen und aussagekräftige URLs aus Anwendungsdatensätzen rendern können.
Architekturgrenze
Bildoptimierung unterstützt Suchleistung und Barrierefreiheit, ersetzt jedoch weder nützliche Inhalte noch crawlbares HTML, beschreibenden Kontext, strukturierte Daten oder Richtlinien von Suchmaschinen.
Häufig gestellte Fragen
Welches Bildformat eignet sich am besten für SEO?
Es gibt kein universell bestes Format. Wählen Sie die kleinste visuell akzeptable Darstellung, die Zielbrowser und Crawler decodieren können, und bieten Sie bei Bedarf einen Fallback an. Korrekte Abmessungen, responsive Auswahl, Seitenkontext und Ladeverhalten sind oft wichtiger als die Formatbezeichnung.
Verbessern beschreibende Dateinamen allein das Ranking von Bildern?
Nein. Ein eindeutiger Dateiname erleichtert die Verwaltung von Assets und kann einen kleinen kontextuellen Hinweis liefern, ersetzt aber weder nützliche Seiteninhalte noch aussagekräftigen Alternativtext, crawlbares Markup oder ein relevantes Bild. Vermeiden Sie Keyword-Stuffing und halten Sie öffentliche URLs stabil.
Sollte jedes Bild einen beschreibenden Alternativtext haben?
Für jedes img ist eine bewusste Entscheidung zum Alternativtext erforderlich, dekorative Bilder sollten jedoch normalerweise alt="" verwenden. Informative und funktionale Bilder benötigen einen prägnanten Text, der ihrer jeweiligen Rolle entspricht. Komplexe Diagramme benötigen außerdem eine Erklärung oder Datendarstellung in unmittelbarer Nähe.
Sollte das größte Bild einer Seite per Lazy Loading geladen werden?
Nicht, wenn es sofort sichtbar ist und wahrscheinlich das Largest-Contentful-Paint-Element darstellt. Nehmen Sie dieses Bild in das initiale HTML auf und priorisieren Sie es angemessen. Verwenden Sie Lazy Loading für weiter unten auf der Seite platzierte Bilder, die für die erste Ansicht nicht benötigt werden.
Ist eine Bilder-Sitemap erforderlich?
Nein. Sie kann die Auffindbarkeit wichtiger Assets in komplexen Galerien oder skriptgesteuerten Seiten verbessern, doch klares, crawlbares HTML und eine kanonische Seitenstruktur haben Vorrang. Halten Sie Sitemap-Einträge aktuell und öffentlich und beschränken Sie sie auf Bilder, zu deren Bereitstellung die Website berechtigt ist.