Gravatar ALT Tag hinzufügen

ALT Tag zu WordPress Gravatar Bilder hinzufügen

OnPage SEO Tools wie SEMrush, Website Auditor oder Morningscore bemängeln ständig die fehlenden ALT-Tags für die Gravatar Bilder in den WordPress Kommentaren.

So einfach fügst du den ALT-Text für deine WordPress-Website hinzu!

Was ist ein ALT Tag?

Der ALT Tag (Abk. für alternative) ist Bestandteil des HTML-Bilder-Elements img. Dieser Teil des Codes ist für die Barrierefreiheit wichtig und für Suchmaschinen.

  • Suchmaschinen benötigen eine Beschreibung der Bilder, damit sie den Inhalt besser verstehen können.
  • Für Menschen mit Sehschwäche wird der ALT-Tag beim Überfahren mit der Maus angezeigt, oder mit Sprachausgabe wiedergegeben.

Darum ist der alt-Tag auch so wichtig!

<img src="/bilder/bild.jpg" alt="Beschreibung zum Bild">

Das HTML-Code-Beispiel zeigt einen img-Tag.

Was ist Gravatar?

WordPress nutzt für die Kommentar-Avatar-Bilder standardmäßig den eigenen Dienst namens Gravatar. Bei diesem Online-Tool kannst du deine E-Mail-Adressen hinterlegen und für jede einen eigenen Avatar speichern. Egal ob es ein Foto von dir ist, oder eine Karikatur.

Bei mir sieht das so aus:

Gravatar Dashboard mit meinen eingetragenen E-Mail-Adressen
Das Gravatar Dashboard mit meinen eingetragenen E-Mail-Adressen.

Für jeden, der einen Kommentar auf deinem Blog schreibt und dabei seine E-Mail-Adresse angibt, versucht WordPress, das passende Bild von Garvatar zu holen und in den Kommentaren anzuzeigen. Auch für das Autor-Profil nutzt WordPress dieses Bild.

Leider vergibt WordPress keinen ALT-Tag für die Bilder, was wieder von jedem SEO-Tool beanstandet wird.

Fehlender ALT Tag bei Gravatar Bildern

Hier auf BloggerPilot war im Source-Code zu sehen, dass nur der nackte alt Tag vorhanden war. Der Inhalt fehlte leider. Klick auf den nächsten Screenshot, um genau zu sehen, was ich meine.

WordPress Kommentare: Der Gravatar ALT Tag ist leer.
WordPress Kommentare: Der Gravatar ALT Tag ist leer.

Die folgenden drei Screenshots zeigen dir, wie SEO-Tools diesen Fehler anzeigen:

Morningscore bemängelt fehlende ALT-Tags
Morningscore bemängelt fehlende ALT-Tags
Auch Website Auditor findet den Fehler
Auch Website Auditor findet den Fehler
Auch SEMrush mag keine Bilder ohne Beschreibung.
Auch SEMrush mag keine Bilder ohne Beschreibung.

Gravatar ALT Tag in WordPress hinzufügen

Dieser Fix funktioniert für die Kommentar-Bilder und das Autoren-Bild. Es braucht lediglich einige Zeilen PHP-Code, damit in Zukunft wirklich alle Bilder deines Blogs mit ALT-Tag ausgestattet werden.

Füge folgendes Snippet in die functions.php deines Child-Themes ein, oder nutze ein Plugin wie Advanced Scripts oder Code Snippets.

// Add alt tag to WordPress Gravatar images

function bloggerpilot_gravatar_alt($bloggerpilotGravatar) {
	if (have_comments()) {
		$alt = get_comment_author();
	}
	else {
		$alt = get_the_author_meta('display_name');
	}
	$bloggerpilotGravatar = str_replace('alt=\'\'', 'alt=\'Avatar f&uuml;r ' . $alt . '\'', $bloggerpilotGravatar);
	return $bloggerpilotGravatar;
}
add_filter('get_avatar', 'bloggerpilot_gravatar_alt');

Der passende Github Gist.

Ich habe bewusst den title-Tag weggelassen, da er kaum mehr eine Bedeutung hat. Auch WordPress bietet keine Möglichkeit mehr, diesen Tag bei Bildern hinzuzufügen.

ALT-Tag überprüfen

Falls du ein Caching-Plugin wie WP Rocket oder Swift Performance nutzt, musst du vielleicht erst deinen Cache leeren. Genauso, wenn du ein CDN wie Cloudflare nutzt.

Chrome > Untersuchen
Chrome > Untersuchen

Anschließend öffnest du die Entwicklertools deines Browsers und überprüfst, ob der Gravatar ALT-Tag nun gefüllt ist. Ich klicke dazu direkt mit der linken Maustaste auf den Avatar und wähle „Untersuchen„.

Google Chrome öffnet dann rechts oder unten die Console mit den HTML-Elementen, wo du direkt sehen kannst, ob die Bild-Beschreibung nun vorhanden ist.

Für alle anderen Browser funktioniert das sehr ähnlich.

Hast du alles richtig gemacht, siehst du jetzt nach dem alt den Text „Avatar für [Name]“.

Nun brauchst du nur mehr in deinem SEO-Tool einen neuen Crawl anwerfen und dich anschließend über eine viel geringere Zahl an Onpage-Fehlern erfreuen.

Fazit Gravatar ALT-Text hinzufügen

Ich finde es schade, dass die Entwickler von WordPress nicht selbst dieses Problem beheben. Bekannt ist es ja schon lange und viele Benutzer fragen nach einer Lösung.

Die Lösung für die fehlenden ALT-Texte hast du nun.

Happy Blogging!

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.