Ein leeres Alt-Attribut oder NULL-Alt-Attribut (alt=““) verwendet man für Bilder, die nur zur Gestaltung dienen und nichts aussagen.
Es sieht so aus:
<img src=”bild.png” alt=””> In WordPress kannst du das Textfeld für das Alt-Attribut leer lassen.
Leere Alt-Attribute sorgen dafür, dass Screenreader das Bild überspringen. Auf diese Art stellen sie eine bessere Usability für sehbehinderte Menschen sicher.
Grundsätzlich ist ein leeres Alt-Attribut allerdings eine verpasste Gelegenheit, dein Ranking positiv zu beeinflussen. Versuche deshalb, auf deiner Seite nur aussagekräftige Bilder mit aussagekräftigen Alt-Tags zu verwenden.
Deine Seite muss öffentlich zugänglich sein und von Google indiziert werden, damit die Suchmaschine Bilder darauf findet. Beachte auch, dass Google (noch) keine Bilder „verstehen“ kann. Füge deshalb jedem Bild auf deiner Seite einen beschreibenden Text hinzu. Am besten dafür geeignet sind aussagekräftige Alt-Tags.
Sie tragen zu einem guten Ranking bei, bieten sehbehinderten Menschen eine bessere User Experience und sorgen dafür, dass Bilder selbst dann „verstanden“ werden, wenn sie aus technischen Gründen nicht angezeigt werden. Verwende zusätzlich aussagekräftige Dateinamen, Bildbeschriftungen und Titel. Aber vermeide unbedingt Keyword-Stuffing, auch im Alt-Tag.
Um Bilder in HTML einzufügen, verwendest du das src-Attribut. src steht für das englische Wort „source“ (Quelle) und verweist auf die Bildquelle.
Der HTML-Code sieht beispielsweise so aus:
<img src="Tiere/Affe.gif">In diesem Beispiel fügst du die Bilddatei „Affe“ aus dem Ordner „Tiere“ ein. Wenn du ein Bild einer externen Quelle in HTML einfügen willst, gibst du statt des Pfades die Grafikadresse ein. Diese findest du heraus, indem du einen Rechtsklick auf das Bild ausführst und „Bildadresse kopieren“ auswählst:
<img src="https://www.sistrix.de/wp-content/uploads/sites/20/2021/09/sichtbarkeit-startseite-feature-slider_re.png.webp">Zusätzlich kannst du mit den Befehlen height=“…“ und width=“…“ Bildhöhe und -breite festlegen, zum Beispiel:
<img src="Tiere/Affe.gif" height="150" width="300">Füge zusätzlich einen Alt-Text ein und richte dein Bild mit align=“…“ so aus, wie du es möchtest. Um dem Bild einen Rahmen zu geben, nutze den Befehl border= mit der entsprechenden Pixelzahl.
Vollständig sieht der Code so aus:
<img src="Tiere/Auffe.jpg" height="150" width="300" alt="Affe auf Baum." border="3" align="left">Wie groß ein Bild angezeigt wird, lässt sich mit dem src-Attribut und den Befehlen height=“…“ und width=“…“ bestimmen. Dabei ist es wichtig, das ursprüngliche Verhältnis beizubehalten, damit das Ergebnis nicht verzerrt wird.
Allerdings ändert sich auf diese Art nicht die Dateigröße, sondern nur die visuelle Darstellung. Um die Dateigröße zu reduzieren, musst du das Bild vor dem Einbinden in eine Webseite mit einem Grafikprogramm verkleinern. Dafür genügen in der Regel kostenlose Tools.
Idealerweise reduzierst du die Dateigröße von Bildern auf rund 150 kB, um die Ladezeit deiner Seite zu beschleunigen und zu verhindern, dass Besucher abspringen. Beides verbessert das Ranking der Seite.
Bei einem Relaunch oder der Neustrukturierung einer Webseite werden Weiterleitungen von Bildern gerne vergessen. Dadurch gehen die Rankings dieser Bilder verloren und es kann passieren, dass deine Domain wertvolle Links verliert.
John Mueller von Google betont deshalb die Notwendigkeit, Redirects für Bilder einzurichten. Richte jeweils einen 301-Redirect auf die neue Adresse ein.
Wichtig ist: Das gilt ausschließlich für Bilder, die selbst unverändert bleiben und bei denen sich nur die URL ändert. Verzichte darauf, ein altes Bild auf ein neues umzuleiten. Außerdem können bereits kleine Änderungen des Dateinamens dazu führen, dass ein Redirect bei einem Bild nicht funktioniert.
Werden von externen Domains eingebundene Bilder nicht geladen, liegt das entweder daran, dass sie unter der eingegebenen Adresse nicht mehr erreichbar sind oder dass der externe Server die Integration auf anderen Domains unterbindet. Die Folge ist zum Beispiel eine 404-Fehlermeldung. Vermeiden lässt sich das, indem du das betreffende Bild auf einem eigenen Server hostest.
