Bild-Alt-Text vs. Titel in WordPress: Der vollständige technische Leitfaden

Das Verständnis des Unterschieds zwischen Alt-Text und Title-Attributen bei Bildern in WordPress ist sowohl für die Suchmaschinenoptimierung als auch für die Einhaltung der Web-Barrierefreiheit unerlässlich. Alt-Text ist ein HTML-Attribut, das den Bildinhalt für Screenreader und Suchmaschinen-Crawler beschreibt und die Indexierung sowie Rankings direkt beeinflusst. Das Title-Attribut hingegen ist eine optionale Bezeichnung, die einige Browser als Tooltip beim Hover-Effekt anzeigen und kein messbares SEO-Gewicht hat.

Diese beiden Felder werden häufig verwechselt, falsch verwendet oder gänzlich leer gelassen – eine Kombination, die die organische Sichtbarkeit still untergräbt, WCAG-Barrierefreiheitsstandards verletzt und strukturierte Daten unvollständig lässt. Dieser Leitfaden behandelt die technische Unterscheidung, die korrekte Implementierung, reale Sonderfälle und den serverseitigen Kontext, der beeinflusst, wie schnell Ihre optimierten Bilder tatsächlich die Nutzer erreichen.

Was ist Image Alt-Text in WordPress?

Alt-Text (das alt-Attribut in HTML) wurde in der HTML-2.0-Spezifikation eingeführt und ist seitdem ein erforderliches Attribut bei <img>-Elementen. Seine primäre Funktion besteht darin, einen textuellen Ersatz für ein Bild bereitzustellen, wenn der visuelle Inhalt nicht wahrgenommen werden kann – sei es, weil das Bild nicht geladen werden konnte, der Nutzer einen Screenreader verwendet oder der Client ein Suchmaschinen-Crawler ohne visuelle Darstellungsfähigkeit ist.

Das gerenderte HTML sieht folgendermaßen aus:

<img src="golden-retriever-ball.jpg" alt="Golden retriever playing with a red ball on a grass lawn" title="Playful Golden Retriever">

Warum Alt-Text für SEO wichtig ist

Googles Bild-Indexierungs-Pipeline stützt sich stark auf das alt-Attribut. Laut Googles eigener Search Central-Dokumentation ist Alt-Text eines der stärksten On-Page-Signale für das Ranking in der Bildsuche. Wenn Googlebot eine Seite crawlt, kann er Bilder nicht so „sehen” wie ein Mensch – er liest das alt-Attribut, um zu verstehen, was das Bild zeigt, und gleicht diese Beschreibung dann mit dem umgebenden Text, dem Seitentitel und den strukturierten Daten ab.

Praktische SEO-Auswirkungen umfassen:

• Sichtbarkeit in der Google-Bildsuche: Seiten mit beschreibendem, keyword-relevantem Alt-Text ranken in der Bildsuche konsistent höher, was erheblichen Referral-Traffic generieren kann.
• Indirekter Einfluss auf Core Web Vitals: Korrekt attributierte Bilder mit expliziten width– und height-Attributen verhindern Layout-Verschiebungen (CLS), ein direktes Ranking-Signal.
• Berechtigung für Rich Results: Produktbilder mit präzisem Alt-Text erscheinen mit höherer Wahrscheinlichkeit in Google Shopping-Panels und visuellen Suchfunktionen.
• Aufnahme in AI Overviews: Googles generative KI-Zusammenfassungen beziehen zunehmend Bilder neben Textausschnitten ein. Beschreibender Alt-Text erhöht die Wahrscheinlichkeit, dass Ihr Bild ausgewählt wird.

Warum Alt-Text für Barrierefreiheit wichtig ist

Die Web Content Accessibility Guidelines (WCAG) 2.1 schreiben aussagekräftigen Alt-Text für alle informativen Bilder gemäß Erfolgskriterium 1.1.1 (Nicht-Text-Inhalt) vor. Die Nichteinhaltung ist nicht nur ein UX-Problem – in vielen Rechtsordnungen, darunter die EU im Rahmen des European Accessibility Act und die USA gemäß ADA Title III, sind unzugängliche Websites rechtlich haftbar.

Screenreader wie JAWS, NVDA und VoiceOver lesen das alt-Attribut sehbehinderten Nutzern laut vor. Fehlt das Attribut, liest der Screenreader typischerweise stattdessen den Dateinamen vor – was zu einer Ausgabe wie „image underscore 2024 underscore final dash copy dot jpeg” führt, die bedeutungslos und desorientierend ist.

Technische Best Practices für Alt-Text

• Präzise und kontextbezogen sein: Beschreiben Sie, was visuell vorhanden ist und warum es für den umgebenden Inhalt relevant ist. „Hund” ist unzureichend. „Golden Retriever fängt eine Frisbee beim Agility-Training” ist korrekt.
• Keywords natürlich integrieren: Fügen Sie Ihre Ziel-Keyword-Phrase ein, wenn sie das Bild tatsächlich beschreibt. Erzwingen Sie keine Keywords, die den Bildinhalt falsch darstellen – Googles Bildqualitäts-Algorithmen erkennen dies.
• Die 125-Zeichen-Richtlinie beachten: Die meisten Screenreader kürzen Alt-Text bei etwa 125 Zeichen ab. Halten Sie Beschreibungen innerhalb dieses Limits.
• Dekorative Bilder sollten leeren Alt-Text haben: Wenn ein Bild rein dekorativ ist (eine Hintergrundtextur, eine Trennlinie), setzen Sie alt="" explizit. Dies weist Screenreader an, es zu überspringen. Lassen Sie das Attribut bei dekorativen Bildern niemals ganz weg, da der Screenreader sonst auf den Dateinamen zurückgreift.
• Nicht mit „Bild von” oder „Foto von” beginnen: Screenreader kündigen den Elementtyp bereits an. Mit diesen Phrasen zu beginnen, verschwendet das Zeichenbudget.

So fügen Sie Alt-Text in WordPress hinzu

WordPress stellt das Alt-Text-Feld an zwei Stellen bereit:

Über die Mediathek:

1. Navigieren Sie im WordPress-Admin-Dashboard zu Medien > Mediathek.
2. Klicken Sie auf ein beliebiges Bild, um das Anhang-Detailpanel zu öffnen.
3. Suchen Sie das Feld Alternativtext in der rechten Seitenleiste.
4. Geben Sie Ihren beschreibenden Text ein und klicken Sie auf Aktualisieren.

Über den Block-Editor (Gutenberg):

1. Fügen Sie einen Bild-Block ein oder wählen Sie einen aus.
2. Suchen Sie im rechten Block-Panel das Feld Alternativtext unter Bildeinstellungen.
3. Geben Sie den Alt-Text direkt ein. Dies überschreibt jeden in der Mediathek festgelegten Wert für diese spezifische Block-Instanz.

Über den Classic Editor:

1. Klicken Sie auf ein Bild im Editor.
2. Wählen Sie Bearbeiten (Bleistift-Symbol).
3. Geben Sie den Alt-Text in das Feld Alternativtext ein.

Was ist das Image Title-Attribut in WordPress?

Das Title-Attribut eines Bildelements stellt eine ergänzende Bezeichnung bereit. In unterstützenden Browsern – hauptsächlich Desktop-Versionen von Chrome, Firefox und Edge – zeigt das Hovern des Cursors über das Bild den Title-Wert als Tooltip an. Mobile Browser ignorieren es nahezu universell, da es auf Touchscreens keine Hover-Interaktion gibt.

<img src="server-rack.jpg" alt="1U rack-mounted server with NVMe drives installed" title="NVMe Server Rack">

Was das Title-Attribut nicht leistet

Hier entwickeln die meisten WordPress-Nutzer Missverständnisse:

• Es beeinflusst Google-Rankings nicht. Google hat ausdrücklich bestätigt, dass das title-Attribut bei Bildern nicht als Ranking-Signal verwendet wird. Das Befüllen mit Keywords bringt keinerlei SEO-Vorteil.
• Es wird von den meisten Screenreadern standardmäßig nicht vorgelesen. NVDA und JAWS können so konfiguriert werden, dass sie Title-Attribute ankündigen, aber dies ist nicht das Standardverhalten. WCAG akzeptiert das Title-Attribut nicht als Ersatz für Alt-Text.
• Es wird auf Mobilgeräten nicht angezeigt. Da mobile Geräte über 60 % des globalen Web-Traffics ausmachen, erreicht ein Tooltip, der nur beim Desktop-Hover erscheint, eine Minderheit Ihrer Zielgruppe.

Legitime Verwendungszwecke für das Title-Attribut

Trotz seines begrenzten Anwendungsbereichs hat das Title-Attribut gültige Anwendungsfälle:

• Mediathek-Organisation: WordPress befüllt das Title-Feld beim Upload automatisch aus dem Dateinamen. Saubere und beschreibende Titel erleichtern die Massenverwaltung von Medien erheblich, insbesondere auf Websites mit Tausenden von Assets.
• Ergänzender Kontext für Desktop-Nutzer: Bei komplexen Diagrammen oder Grafiken kann ein Title-Tooltip eine kurze Bezeichnung liefern, ohne das sichtbare Seitenlayout zu überladen.
• CMS-Workflow-Metadaten: Einige redaktionelle Workflows verwenden das Title-Feld als interne Referenzkennung, getrennt vom öffentlich sichtbaren Alt-Text.

So fügen Sie den Title in WordPress hinzu oder bearbeiten ihn

Über die Mediathek:

1. Gehen Sie zu Medien > Mediathek.
2. Klicken Sie auf das Bild, um seine Anhang-Details zu öffnen.
3. Das Feld Titel erscheint oben im rechten Panel (es wird automatisch aus dem Dateinamen befüllt).
4. Bearbeiten Sie es nach Bedarf und klicken Sie auf Aktualisieren.

Über den Block-Editor:

Der Gutenberg-Block-Editor stellt das Title-Attribut nicht in der Standard-Benutzeroberfläche bereit. Um es festzulegen, müssen Sie entweder den zugrunde liegenden HTML-Code direkt über die Option Als HTML bearbeiten in der Block-Toolbar bearbeiten oder ein Plugin wie Image Attributes Pro oder benutzerdefinierte Block-Filter verwenden.

Alt-Text vs. Title: Direkter Vergleich

Häufige Fehler und Sonderfälle

Fehler 1: Denselben Text für beide Felder verwenden

Den Alt-Text in das Title-Feld zu duplizieren ist redundant und kann dazu führen, dass Screenreader, die für das Lesen beider Attribute konfiguriert sind, dieselbe Beschreibung zweimal ankündigen, was das Nutzererlebnis für sehbehinderte Besucher verschlechtert.

Fehler 2: Alt-Text bei funktionalen Bildern leer lassen

Als Bilder gerenderte Schaltflächen (z. B. eine „Absenden”-Schaltfläche mit einer benutzerdefinierten Grafik), verlinkte Bilder und Infografiken sind funktionale oder informative Bilder – sie müssen beschreibenden Alt-Text haben. Diese leer zu lassen ist ein WCAG-Verstoß und eine Crawlability-Lücke.

Fehler 3: Keyword-Stuffing im Alt-Text

Ein Alt-Attribut wie alt="VPS hosting cheap VPS server VPS Moldova best VPS" ist ein klares Spam-Signal. Googles Bildqualitäts-Bewertungsrichtlinien kennzeichnen dieses Muster ausdrücklich. Verwenden Sie eine natürliche Keyword-Phrase, die das Bild präzise beschreibt.

Fehler 4: Einfache Bilder übermäßig beschreiben

Ein einfaches Symbol oder Logo benötigt keine 120-Zeichen-Beschreibung. Für ein Unternehmenslogo ist alt="AlexHost logo" ausreichend und korrekt.

Fehler 5: Alt-Text bei Lazy-Loaded-Bildern ignorieren

WordPress 5.5 führte natives Lazy Loading über das loading="lazy"-Attribut ein. Einige schlecht konfigurierte Themes oder Plugins entfernen das alt-Attribut während der Lazy-Load-Verarbeitung. Überprüfen Sie immer Ihr gerendertes HTML – nicht nur den WordPress-Editor – mit den Browser-DevTools oder einem Crawler wie Screaming Frog, um zu bestätigen, dass Alt-Text im finalen DOM vorhanden ist.

Der serverseitige Kontext: Warum Ihre Hosting-Umgebung das Bild-SEO beeinflusst

Korrekt geschriebener Alt-Text und Titles sind notwendig, aber nicht ausreichend für die Bild-SEO-Performance. Die Geschwindigkeit, mit der Ihre Bilder an Browser ausgeliefert werden, beeinflusst direkt die Core Web Vitals-Scores, die ein bestätigter Google-Ranking-Faktor sind.

Mehrere serverseitige Faktoren bestimmen die Bild-Auslieferungsperformance:

• Speicher-I/O: NVMe-basierter Speicher reduziert die Time-to-First-Byte für Bilddateien im Vergleich zu SATA SSDs oder rotierenden HDDs. Auf einer stark frequentierten WordPress-Website verstärkt sich dieser Unterschied bei gleichzeitigen Anfragen.
• HTTP/2- und HTTP/3-Unterstützung: Moderne Protokolle ermöglichen multiplexte Bildauslieferung und eliminieren den verbindungsbezogenen Overhead von HTTP/1.1.
• Serverseitige WebP-Konvertierung: Tools wie cwebp oder Module wie mod_pagespeed können JPEG- und PNG-Bilder auf Serverebene in das WebP-Format konvertieren und die Dateigrößen ohne Qualitätsverlust um 25–35 % reduzieren.
• Caching-Header: Korrekte Cache-Control– und ETag-Header stellen sicher, dass Browser und CDN-Edge-Nodes Bilder aggressiv cachen und die Last des Ursprungsservers reduzieren.

Der Betrieb von WordPress auf einer ordnungsgemäß konfigurierten VPS Hosting-Umgebung gibt Ihnen die volle Kontrolle über diese Parameter – etwas, das Shared-Umgebungen nicht bieten können. Sie können nginx mit ngx_http_image_filter_module installieren und konfigurieren, granulare Cache-TTLs festlegen und Brotli-Komprimierung für SVG-Assets aktivieren.

Für Teams, die mehrere WordPress-Projekte oder hochauflösende Medienbibliotheken verwalten, eliminieren Dedicated Servers die Ressourcenkonflikte, die bei Traffic-Spitzen zu inkonsistenten Bildauslieferungszeiten führen.

Wenn Sie eine kleinere Website betreiben und eine verwaltete Umgebung mit einem vertrauten Control Panel wünschen, bietet VPS mit cPanel eine unkomplizierte Oberfläche zum Konfigurieren von PHP-Speicherlimits, Aktivieren von OPcache und Verwalten von bildintensiven WordPress-Installationen ohne direkten Kommandozeilen-Zugriff.

Alt-Text im großen Maßstab implementieren: Automatisierung und Auditing

Bei Websites mit großen Medienbibliotheken ist das manuelle Prüfen und Aktualisieren von Alt-Text unpraktisch. Die folgenden Ansätze adressieren dies systematisch:

WP-CLI Massen-Audit

Verwenden Sie WP-CLI, um alle Bilder ohne Alt-Text zu identifizieren:

wp post list --post_type=attachment --post_mime_type=image --fields=ID,post_title --format=csv | while IFS=',' read id title; do
  alt=$(wp post meta get "$id" _wp_attachment_image_alt 2>/dev/null)
  if [ -z "$alt" ]; then
    echo "Missing alt text: ID=$id Title=$title"
  fi
done

Alt-Text über WP-CLI setzen

wp post meta update 1234 _wp_attachment_image_alt "Golden retriever playing with a red ball on a grass lawn"

Ersetzen Sie 1234 durch die tatsächliche Anhang-ID.

Screaming Frog SEO Spider

Konfigurieren Sie Screaming Frog, um Ihre Website zu crawlen, und filtern Sie den Tab Images nach Missing Alt Text. Exportieren Sie den Bericht als CSV und verwenden Sie ihn als Behebungs-Checkliste. Dieser Ansatz erkennt Alt-Text, der im gerenderten HTML fehlt, auch wenn er im WordPress-Editor gesetzt zu sein scheint – eine Diskrepanz, die bei Page Buildern oder Lazy-Load-Plugins auftreten kann.

Google Search Console Bild-Indexierungsbericht

Der Bericht Search Console > Suchergebnisse, gefiltert nach Suchtyp: Bild, zeigt, welche Bilder Impressionen und Klicks generieren. Bilder mit hohen Impressionen, aber niedrigen Klickraten haben oft generischen oder fehlenden Alt-Text. Gleichen Sie diese Daten mit Ihrem Screaming Frog-Export für eine priorisierte Behebungsliste ab.

Strukturierte Daten und Bilder: Die nächste Ebene

Über Alt-Text hinaus liefert die Implementierung von strukturierten Daten-Markup (schema.org) für Bilder zusätzlichen Kontext für Suchmaschinen und erhöht die Berechtigung für Rich Results. Für WordPress fügen die Plugins Yoast SEO oder Rank Math bei korrekter Konfiguration automatisch ImageObject-Schema zu Beitragsbildern hinzu.

Ein korrekt implementiertes ImageObject-Schema umfasst:

{
  "@type": "ImageObject",
  "url": "https://example.com/images/golden-retriever-ball.jpg",
  "width": 1200,
  "height": 800,
  "caption": "Golden retriever playing with a red ball on a grass lawn",
  "name": "Playful Golden Retriever"
}

Beachten Sie, dass die caption-Eigenschaft im Schema funktional dem Alt-Text entspricht, während name dem Title-Attribut entspricht. Beide sollten mit den HTML-Attributen des Bildelements übereinstimmen.

Entscheidungs-Checkliste: Alt-Text und Title-Implementierung

Verwenden Sie diese Checkliste vor der Veröffentlichung einer WordPress-Seite oder eines Beitrags mit Bildern:

• Jedes informative Bild hat ein beschreibendes alt-Attribut unter 125 Zeichen
• Dekorative Bilder haben alt="" (leer, nicht fehlend)
• Kein Alt-Text beginnt mit „Bild von”, „Foto von” oder ähnlichen redundanten Phrasen
• Alt-Text enthält die Ziel-Keyword-Phrase nur dort, wo sie das Bild präzise beschreibt
• Alt-Text und Title-Text sind nicht identisch
• Funktionale Bilder (verlinkte Bilder, Bild-Schaltflächen) haben Alt-Text, der ihre Aktion beschreibt, nicht ihr Aussehen
• Bilddateinamen sind vor dem Upload beschreibend (z. B. golden-retriever-ball.jpg, nicht IMG_4821.jpg)
• Bildabmessungen (width und height) sind explizit in HTML gesetzt, um CLS zu verhindern
• Das gerenderte HTML wird über DevTools oder einen Crawler verifiziert – nicht nur die WordPress-Editor-Ansicht
• Strukturierte Daten (ImageObject) sind für primäre Inhaltsbilder auf hochwertigen Seiten implementiert

FAQ

Beeinflusst das Image Title-Attribut die Google-Bildsuche-Rankings?

Nein. Google hat bestätigt, dass das title-Attribut bei <img>-Elementen nicht als Ranking-Signal verwendet wird. Nur das alt-Attribut, der umgebende Text, der Seitentitel und strukturierte Daten beeinflussen die Bildsuche-Rankings.

Was sollte der Alt-Text für ein rein dekoratives Bild in WordPress sein?

Setzen Sie alt="" – ein explizit leeres Alt-Attribut. Dies weist Screenreader an, das Bild vollständig zu überspringen. Lassen Sie das Attribut nicht weg, da der Screenreader sonst den Dateinamen vorliest, der für den Nutzer bedeutungslos ist.

Kann ich denselben Alt-Text für mehrere Bilder auf meiner WordPress-Website verwenden?

Nur wenn die Bilder tatsächlich identisch sind. Duplizierter Alt-Text bei verschiedenen Bildern wird von Googles Bild-Indexierungssystem als Qualitätssignal behandelt und kann eines oder beide Bilder in den Bildsuchergebnissen unterdrücken. Jedes einzigartige Bild sollte einen einzigartigen, beschreibenden Alt-Text haben.

Warum wird mein Alt-Text in WordPress korrekt angezeigt, fehlt aber im gerenderten HTML?

Dies wird typischerweise durch einen Page Builder (Elementor, Divi, WPBakery), ein Lazy-Load-Plugin oder ein Caching-Plugin verursacht, das das alt-Attribut während der HTML-Generierung entfernt oder überschreibt. Überprüfen Sie den live gerenderten Quellcode mit den Browser-DevTools (Ctrl+U oder Rechtsklick > Seitenquelltext anzeigen) und vergleichen Sie ihn mit dem WordPress-Editor. Wenn Diskrepanzen bestehen, deaktivieren Sie Plugins einzeln, um den Konflikt zu isolieren.

Wie hängt die Server-Performance mit Bild-SEO zusammen?

Core Web Vitals-Metriken – insbesondere Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) – sind direkte Google-Ranking-Faktoren. LCP wird häufig durch ein Hero-Bild ausgelöst. Wenn Ihr Server dieses Bild aufgrund hoher I/O-Latenz oder unzureichendem Arbeitsspeicher für PHP-FPM-Worker langsam ausliefert, verschlechtert sich Ihr LCP-Score unabhängig davon, wie gut Ihr Alt-Text geschrieben ist. Das Hosting von WordPress auf einer leistungsfähigen VPS Hosting-Umgebung mit NVMe-Speicher und ausreichend RAM unterstützt direkt starke Core Web Vitals-Scores neben korrekter Alt-Text-Implementierung.