Der volle Guide der Bildoptimierung auf der Website

Insgesamt laufen die Anforderungen an die Entwicklung von Bildern auf folgende Daten hinaus: Format, Qualität, Dateigröße.

Google indexiert Bilder in den Formaten BMP, GIF, JPEG, PNG, WebP und SVG.

JPEG: Benutze dieses Dateiformat für Fotos.
PNG: Das Format ist für die Grafik oder einfach gesagt für Elemente geeignet, die Gestalter zeichneten.
SVG: Das ist das Format für die Darstellung der Vektorgrafik.

Es gibt auch andere Formate, wie WebP und JPEG-XR. Obwohl sie einige Vorteile haben, werden sie nicht von allen Browsern unterstützt. Zum Beispiel passt JPEG-XR zu IE, WebP ist das geeignete Format für Chrome, Opera, Android. In diesem Zusammenhang werde ich sie nicht betrachten. Trotzdem steht dir die Wahl offen :)

Zur Optimierung der Bilder für Google solltest du eine ideale Lösung zwischen Dateigröße und Qualität finden. Der Content ist in erster Linie für Besucher vorgesehen, deshalb sollten Fotos und Grafiken scharf und visuell ansprechend sein.

Die Bildgröße wirkt sich auf die Ladezeit der Seite aus, was ihrerseits das Ranking der Website beeinflusst. Wenn du zu viele hochauflösende Fotos verwendest, kann dies erheblich die Seitenladezeit verzögern. Es gibt eine Vielzahl von Tools, die grafische Darstellungen ohne Qualitätsverlust verkleinern (davon werde ich später erzählen). Wenn du sie anwendest, vergleich unbedingt das originale Bild mit dem Endergebnis, um ein optimales Verhältnis von Qualität und Quantität zu erreichen.

Erstelle Bilder in der Größe, in der sie auf der Webseite dargestellt werden.

Suchmaschinen verstehen deinen Seitencontent richtig, wenn du in CSS Breite und Höhe angibst. Für Retina-Displays füge Bilder in der Größe 2x hinzu und stelle die Darstellung der verschiedenen Größen entsprechend den Eigenschaften der Bildschirme ein. Sonst haben Benutzer von Retina-Displays das Risiko, Grafiken von schlechter Qualität anzuschauen.

Wenn du das Internet schneller machen wirst, wäre dir Google sehr dankbar. Hier sind ein paar Cloud Tools, die du zur Bildkompression verwenden kannst.

Die Services TinyPNG und JPEGMini funktionieren auf ähnliche Weise, obwohl sie verlustbehaftete Kompression beherrschen.

Um den Bildinhalt Suchmaschinen weiterzuleiten, gib entsprechende kurze Beschreibung im Bilddateinamen.

Als Trennzeichen benutze einen Bindestrich und vermeide generische Dateinamen wie „jzbdfjklJ_KSD5667.jpg". Der Name „go-pro.jpg" ist für Suchmaschinen verständlicher. Schlüsselwörter sollten maximal relevant sein und den Bildinhalt ausführlich beschreiben.

Beispiel: Wenn du mit einem Online-Shop arbeitest, der eine Seite mit GoPro 5 hat, wäre es besser, im Dateinamen das Modell zu nennen. In diesem Fall wird das Bild als „go-pro-hero-5-black-front.jpg" bezeichnet.

Speicher ähnliche Grafiken in einem Ordner, der einen entsprechenden Namen hat. Falls es auf der Website mehrere Bilder in einer Gruppe gibt (zum Beispiel Fotos von Handys des bestimmten Herstellers), sollten solche Files auf dem Server in einem Ordner gespeichert werden.

Beispiel: Beispiel.com/images/clothes/blue-jeans.jpg

Beim Ranking wird die Tatsache berücksichtigt, ob das Bild der Suchanfrage entspricht. Suchmaschinen analysieren den Text, der sich neben dem Bild befindet. Deswegen vermeide Diskrepanz zwischen Texten und Bildern.

Dieses Bild wurde in den Suchergebnissen für die Anfrage „weiße Hunde" angezeigt, was dem Inhalt wegen falscher Beschreibung nicht entspricht. Eine detaillierte Anleitung, wie du richtig die Bildbeschreibung erstellst, findest du weiter hinten.

Füge keine wichtigen Informationen auf dem Bild hinzu, denn Browser verstehen sie nicht.

Außer dem Text beachten Suchmaschinen den Ankertext von Links, die zu Grafiken auf externen Webseiten führen. Erstelle externe Ankerlinks auf Basis von Bildern. Der Arkehrtext sollte mit dem Bildinhalt übereinstimmen.

Beispiel: Der Link zur Seite mit Innenraumfotos kann so aussehen:

<a href=https://beispiel.com/ interior/office-design.jpg>Fotos der Innenraumgestaltung</a>

Der Alt-Tag ist ein alternativer Text, der das Bild kennzeichnet. Er spielt eine wichtige Rolle in der Suchmaschinenoptimierung von Bildern:

• Falls das Bild aus irgendeinem Grund nicht geladen wird, zeigt der Browser den alternativen Text.
• Bildschirmleser benutzen das Alt-Attribut, um den Bildinhalt sehbehinderten Menschen zu erklären.
• Webcrawler verwenden den Alt-Text, damit sie das Bild richtig indexieren können. Mithilfe des Meta-Tags werden relevante Ergebnisse auf Suchanfrage vom Benutzer bestimmt

Ich empfehle Keywords in die Beschreibung hinzufügen, ohne darüber das Informative zu vergessen. Normalerweise besteht das Alt-Attribut aus 125 Zeichen. Erstelle eine inhaltsreiche Beschreibung.

Wie würdest du dieses Foto beschreiben (ich hoffe, dass du keinen großen Hunger hast? ↓

Was denkst du, welche Variante besser ist?

"width="947" height="591">
oder
"width="947" height="591">
Natürlich ist die zweite Variante besser, weil sie das Bild maximal charakterisiert :)

Vergiss nicht, dass überflüssige Keywords die Optimierung schlecht beeinflussen. Deswegen ist der Text falsch: „Schokoladentorte Schokoladen Desserts mit Schokolade Sahnen Belegfrüchte Rezept".

In Ergänzung zur Basis-Sitemap erstelle die Bilder-Sitemap sitemap-image.xml. Sie erhöht die Wahrscheinlichkeit, dass deine Website in der Google Bildersuche angezeigt wird.

Beispiel:

User-agent: Googlebot
Sitemap: https://beispiel.com/sitemap.xml

Mikrodaten des ImageObject helfen Suchmaschinen, den Content zu unterscheiden und als ein passendes Suchergebnis darzustellen.

Hier ist ein Beispiel der Mikrodaten-Verwendung: http://schema.org/ImageObject

Um gute Ergebnisse bei der Bildoptimierung zu erreichen, veröffentliche nicht nur hochwertige, sondern auch einzigartige Bilder. Suchmaschinen schätzen qualitative und originelle Inhalte, um vielfältige und interessante Ergebnisse auszuwählen.

Wenn du nicht sicher bist, dass der Content auf deiner Website einzigartig ist, kannst du es leicht mit dem Service Tineye prüfen.

Oder prüfe, ob das Bild früher schon indexiert wurde.

Wenn in Ergebnissen keine ähnlichen Bilder gefunden werden, hast du einzigartigen Inhalt. Bildkopien befinden sich in der Liste rechts. Um die gefundene Liste anzuschauen, klicke auf den Link mit passender Größe.

Der einfachste Weg ist, die Google-Bildersuche zu verwenden. Achte darauf, dass Google die Bilder zeigt, die nicht nach Lizenz gefiltert werden. Filtere die Ergebnisse:

Wie erstellst du noch einzigartige Bilder? Finde das passende Foto in kostenlosen Datenbanken (zum Beispiel in Unsplash) und verbessere es mit der Fotosoftware (Canva ist gut dazu geeignet). Canva hat Unmengen von Elementen und einige von ihnen sind gratis. Kombiniere sie einfach und kreiere den einzigartigen Inhalt.

Reddit-Nutzer stimmen dem offenen Zugang auf den Content zu, den sie auf der Plattform veröffentlichen. Außerdem besteht eine sehr geringe Wahrscheinlichkeit, auf diese Grafiken in ähnlichen Blogs oder sozialen Netzwerken zu stoßen.

• Installiere Reddit Enhancement Suite im Browser.
• Öffne die Seite und wähle den entsprechenden Abschnitt aus.

Wenn du beispielsweise das Bild mit einer Torte brauchst, öffne den Abschnitt DessertPorn.

• Wähle das Bild aus.

Wenn du die Erweiterung Reddit Enhancement Suite verwendest, kannst du Bilder in voller Größe direkt auf der Seite anzeigen lassen. Wie das funktioniert?

Zur erfolgreichen Bildoptimierung solltest du alle oben beschriebene Methoden praktisch anwenden:

Beim Kreieren und der Optimierung von Bildern folge dem Prinzip: Qualität und Nützlichkeit des Contents sind die wichtigsten Kriterien, nach denen Suchmaschinen deine Webseite einschätzen. Viel Erfolg bei der Optimierung!