Was ist ein Alt Tag?

Ein Alt Tag – korrekt eigentlich Alt-Attribut oder Alt-Text – ist ein HTML-Attribut innerhalb des Image Tags (<img>), das den Inhalt eines Bildes in Textform beschreibt. Im Quellcode sieht das so aus: <img src="bild.jpg" alt="Beschreibung des Bildes">. Neben dem src-Attribut, das die Bilddatei referenziert, und dem optionalen Title-Attribut, das einen Tooltip beim Hover erzeugt, ist das Alt-Attribut das wichtigste beschreibende Element für Bilder im Web.

Warum ist der Alt Tag so entscheidend? Ganz einfach: Suchmaschinen-Crawler wie der Googlebot können Bilder nicht so sehen wie du und ich. Sie sind auf Textinformationen angewiesen, um den Inhalt eines Bildes zu verstehen. Der Alt-Text ist dabei die primäre Informationsquelle. Ohne ihn bleibt dein Bild für die Google Bilder-Suche praktisch unsichtbar – egal wie gut es ist. Gleichzeitig nutzen Screenreader den Alt-Text, um blinden und sehbehinderten Menschen zu vermitteln, was auf dem Bild zu sehen ist. Der Alt Tag ist also die Brücke zwischen visuellem Content und textbasierter Interpretation.

Im Kontext von Alt Tag SEO bedeutet das: Jedes Bild auf deiner Website ist eine Chance, für relevante Suchbegriffe in der Bildersuche zu ranken und zusätzlichen Traffic zu generieren. Google nutzt den Alt-Text nicht nur für die Bildersuche, sondern auch als Kontextsignal für das Gesamtranking deiner Seite. Ein gut geschriebener Alt-Text stärkt also sowohl deine Bild SEO als auch deine allgemeine SEO Optimierung.

Alt-Attribut vs. Title-Attribut – der Unterschied

Viele verwechseln den Alt-Text mit dem Title-Attribut. Der Unterschied ist simpel, aber wichtig: Das Alt-Attribut beschreibt den Bildinhalt für Suchmaschinen und Screenreader. Es wird angezeigt, wenn das Bild nicht laden kann. Das Title-Attribut hingegen erzeugt nur einen Tooltip-Text, wenn jemand mit der Maus über das Bild fährt. Für Alt Text SEO ist ausschließlich das Alt-Attribut relevant. Google ignoriert das Title-Attribut bei der Bildbewertung weitgehend. Konzentriere dich also auf den Alt-Text – dort steckt der SEO-Hebel.

Verschiedene Bildtypen im Web

Nicht jedes Bild braucht den gleichen Alt-Text. Die WCAG-Richtlinien unterscheiden vier Kategorien:

  • Informative Images: Bilder, die Inhalte transportieren (Produktfotos, Infografiken). Sie brauchen einen beschreibenden Alt-Text.
  • Decorative Images: Rein dekorative Elemente (Trennlinien, Hintergrundmuster). Sie bekommen ein leeres Alt-Attribut: alt="".
  • Functional Images: Bilder mit Funktion, z.B. ein Logo als Link zur Startseite. Der Alt-Text beschreibt die Funktion, nicht das Bild: alt="Zur Startseite".
  • Complex Images: Diagramme und Schaubilder, die komplexe Informationen vermitteln. Hier brauchst du eine ausführliche Beschreibung, idealerweise ergänzt durch ein Figure/Figcaption-Element oder eine separate Bildunterschrift.

Alt Text richtig schreiben

Einen guten Alt Text schreiben ist einfacher als du denkst – wenn du ein paar Grundregeln beachtest. Das Ziel: Beschreibe präzise, was auf dem Bild zu sehen ist, und integriere dabei natürlich dein Keyword. Denk immer daran: Der Alt-Text soll sowohl für Google als auch für Menschen funktionieren, die das Bild nicht sehen können.

Die Formel für den perfekten Alt-Text

Ein wirkungsvoller Alt-Text für Image SEO folgt diesem Muster: Was ist zu sehen + Kontext + Keyword (wenn passend). Hier ein Beispiel: Statt alt="Bild" oder alt="foto-123.jpg" schreibst du alt="Webdesigner arbeitet am Laptop an einer responsiven Website". Der Text ist beschreibend, natürlich und enthält relevante Keywords, ohne sie zu erzwingen.

Die wichtigsten Regeln für gute Alt Tags:

  • Beschreibe den Bildinhalt: Was siehst du? Wer ist abgebildet? Was passiert? Sei konkret.
  • Halte dich kurz: 80 bis 125 Zeichen sind ideal. Screenreader lesen den gesamten Text vor – zu lange Beschreibungen nerven.
  • Integriere Keywords natürlich: Wenn dein Bild zum Thema passt, baue dein Fokus-Keyword ein. Aber erzwinge es nicht.
  • Vermeide „Bild von" oder „Foto von": Screenreader sagen bereits an, dass es sich um ein Bild handelt. Das wäre doppelt gemoppelt.
  • Kein Keyword-Stuffing: alt="SEO Alt Tag SEO Bild SEO Optimierung Alt Text SEO" ist Spam. Google erkennt das und straft es ab.
  • Kontext beachten: Dasselbe Bild kann je nach Kontext einen anderen Alt-Text brauchen. Ein Foto einer Kaffeetasse auf einer Produktseite beschreibt das Produkt, auf einem Blogpost über Kaffeepausen beschreibt es die Situation.

Alt-Text-Beispiele für verschiedene Szenarien

Damit du ein Gefühl dafür bekommst, wie gute Alt Texte aussehen, hier einige Beispiele aus der Praxis:

  • Produktbild: alt="Handgefertigte braune Ledertasche im Vintage-Stil mit Messingschnallen"
  • Team-Foto: alt="Unser Webdesign-Team bei der Projektbesprechung im Büro"
  • Screenshot: alt="Google Search Console zeigt Anstieg der Klicks nach Alt-Tag-Optimierung"
  • Infografik: alt="Infografik: 5 Schritte zur perfekten Alt-Text-Optimierung für SEO"
  • Dekoratives Bild: alt="" (leer lassen!)

Du merkst: Ein guter Alt Text liest sich wie ein natürlicher Satz. Er beschreibt, was zu sehen ist, gibt Kontext und enthält – wenn es passt – ein relevantes Keyword. So profitierst du gleichzeitig von besserer Barrierefreiheit und stärkerer Sichtbarkeit in der Bildersuche.

Bilder für SEO optimieren

Der Alt-Text ist nur ein Teil der Geschichte. Wenn du Bilder SEO optimieren willst, musst du das Gesamtbild betrachten – im wahrsten Sinne des Wortes. Von der Dateibenennung über die Bildkomprimierung bis hin zu Responsive Images gibt es zahlreiche Stellschrauben, die in Summe einen enormen Unterschied machen.

Dateibenennung: Der erste SEO-Faktor

Bevor ein Bild überhaupt auf deine Website kommt, beginnt Bild SEO bei der Datei selbst. Google wertet den Dateinamen als Ranking-Signal. IMG_20250315_182456.jpg sagt nichts aus. alt-tag-seo-optimierung-beispiel.jpg hingegen schon. Benenne jede Bilddatei sprechend, mit Bindestrichen als Trennzeichen und relevanten Keywords. Die Exif-Daten spielen übrigens für SEO keine direkte Rolle – Google nutzt sie nicht fürs Ranking. Trotzdem schadet es nicht, sie zu bereinigen, um die Dateigröße zu reduzieren.

Bildformat: Next-Gen Formate: WebP, AVIF oder doch JPEG?

Die Wahl des richtigen Bildformats hat direkten Einfluss auf deine Core Web Vitals, insbesondere den LCP (Largest Contentful Paint). Hier ein Überblick:

  • WebP: Der aktuelle Standard für Webbilder. Bis zu 30% kleiner als JPEG bei gleicher Qualität. Wird von allen modernen Browsern unterstützt.
  • AVIF: Noch effizienter als WebP, aber weniger Browser-Support. Ideal als Progressive Enhancement.
  • JPEG: Der Klassiker für Fotos. Gute Komprimierung, universelle Kompatibilität. Nutze Qualität 75-85% für das beste Verhältnis von Größe zu Qualität.
  • PNG: Für Grafiken mit Transparenz oder scharfen Kanten (Logos, Icons). Deutlich größer als JPEG/WebP für Fotos.
  • SVG: Für Vektorgrafiken, Icons und Illustrationen. Skaliert verlustfrei und ist extrem klein. Ideal für funktionale Grafiken.

Die Bildkomprimierung ist entscheidend für die Ladezeit – ein CDN (Content Delivery Network) kann die Bildauslieferung zusätzlich beschleunigen. Große, unkomprimierte Bilder sind einer der häufigsten Gründe für schlechte Performance Analyse-Ergebnisse. Nutze Tools wie Squoosh, TinyPNG oder ShortPixel, um Bilder vor dem Upload zu komprimieren. Dein Ziel: So klein wie möglich, so gut wie nötig.

Bildgröße und Responsive Images

Lade nie ein 4000 Pixel breites Bild hoch, wenn es nur in 800 Pixel Breite angezeigt wird. Die Bildgröße sollte immer zum tatsächlichen Darstellungsbereich passen. Für Responsive Webdesign nutzt du idealerweise das srcset-Attribut. Damit lieferst du dem Browser verschiedene Bildgrößen, und er wählt automatisch die passende aus:

<img src="bild-800.webp" srcset="bild-400.webp 400w, bild-800.webp 800w, bild-1200.webp 1200w" sizes="(max-width: 600px) 400px, 800px" alt="Beschreibender Alt-Text">

Das verbessert nicht nur die Ladezeit auf mobilen Geräten, sondern ist auch ein positives Signal für Google. Zusammen mit Lazy Loading – dem verzögerten Laden von Bildern, die nicht sofort sichtbar sind – ergibt sich ein deutlicher Performance-Gewinn. Lazy Loading aktivierst du mit dem Attribut loading="lazy". Wichtig: Das Hero-Bild (above the fold) sollte nie lazy geladen werden, da es den LCP direkt beeinflusst.

Figure, Figcaption und Bildunterschriften

Neben dem Alt-Text kannst du Bildern über das Figure/Figcaption-Element zusätzlichen Kontext geben. Die Bildunterschrift (Caption) wird für den Nutzer sichtbar angezeigt und bietet eine weitere Möglichkeit, relevante Keywords natürlich einzubauen. Google wertet auch den umgebenden Text als Kontext für Bilder – die Caption ist also ein echter SEO-Bonus. Nutze sie, um den Bildinhalt zu ergänzen oder Quellen anzugeben.

Schema Markup (schema.org) und Open Graph für Bilder

Für fortgeschrittene Image SEO kannst du strukturierte Daten nutzen. Mit dem Schema Markup ImageObject teilst du Google detaillierte Informationen über dein Bild mit – Name, Beschreibung, Lizenz, Autor. Das erhöht die Chance auf Rich Snippets in den SERPs (Suchergebnisseiten) – etwa Bildkarusselle oder erweiterte Bild-Ergebnisse in der Google-Suche. Das Open Graph Image (og:image) ist hingegen relevant für Social-Media-Vorschauen: Wenn jemand deinen Blogpost auf Facebook oder LinkedIn teilt, bestimmt das OG-Image, welches Bild angezeigt wird. Ein gutes OG-Image erhöht die Klickrate auf geteilte Links enorm.

Alle diese Maßnahmen greifen ineinander. Die technische Basis dafür legst du am besten mit einer sauberen Webentwicklung und einem durchdachten CMS-Setup.

Alt Tag und Barrierefreiheit

Der Alt Tag ist nicht nur ein SEO-Tool – er ist ein Grundpfeiler der digitalen Accessibility. Für Menschen, die einen Screenreader nutzen, ist der Alt-Text die einzige Möglichkeit, den Inhalt von Bildern zu erfassen. Ohne Alt-Text bleiben Bilder stumm. Der Screenreader überspringt sie entweder komplett oder liest den Dateinamen vor – und "IMG_20250315_182456.jpg" hilft niemandem.

WCAG-Anforderungen für Bilder

Die WCAG (Web Content Accessibility Guidelines) definieren klare Anforderungen für Bilder im Web. Konkret fordert das Erfolgskriterium 1.1.1 „Non-text Content", dass alle nicht-textuellen Inhalte eine Textalternative haben. Das ist keine Empfehlung, sondern eine Anforderung auf Level A – dem Minimum für Barrierefreiheit. In vielen Ländern, auch in Deutschland, ist digitale Barrierefreiheit mittlerweile gesetzlich vorgeschrieben.

Was bedeutet das konkret für dich?

  • Informative Bilder brauchen einen beschreibenden Alt-Text, der den Bildinhalt und -zweck vermittelt.
  • Decorative Images bekommen ein leeres Alt-Attribut (alt=""), damit Screenreader sie überspringen.
  • Functional Images (z.B. verlinkte Icons) brauchen einen Alt-Text, der die Funktion beschreibt, nicht das Aussehen.
  • Complex Images wie Diagramme brauchen eine ausführliche Textalternative, entweder im Alt-Text oder in einer verlinkten Beschreibung.

Warum Barrierefreiheit auch SEO ist

Hier kommt der Clou: Was gut für Barrierefreiheit ist, ist fast immer auch gut für SEO. Google will seinen Nutzern die bestmögliche Erfahrung bieten – und barrierefreie Websites bieten genau das. Seiten mit guten Alt-Texten, sauberer Struktur und semantischem HTML ranken tendentiell besser. Nicht weil Google „Barrierefreiheit belohnt", sondern weil die gleichen technischen Grundlagen beide Ziele bedienen. Wenn du deine Suchmaschinenoptimierung ernst nimmst, ist Barrierefreiheit kein Extra – sie ist Teil der Strategie.

Alt Tags in WordPress und Elementor

In der Praxis setzt du Alt-Tags meistens nicht direkt im HTML, sondern über dein CMS. In WordPress geht das besonders einfach – sowohl in der WordPress Media Library als auch im Elementor Image Widget.

Alt-Text in der WordPress Media Library

Jedes Bild, das du in WordPress hochlädst, bekommt automatisch ein Feld für den Alt-Text. Du findest es unter Medien → Bibliothek → Bild anklicken → „Alternativtext". Trage hier deinen optimierten Alt-Text ein. WordPress setzt ihn dann automatisch als Alt-Attribut ein, wenn du das Bild einfügst. Der Vorteil: Einmal gesetzt, wird der Alt-Text überall verwendet, wo das Bild auftaucht.

Alt-Text im Elementor Image Widget

Wenn du Elementor nutzt, hast du eine zusätzliche Option: Im Elementor Image Widget kannst du den Alt-Text direkt im Widget überschreiben – unabhängig von dem, was in der Media Library hinterlegt ist. Das ist praktisch, wenn du dasselbe Bild in verschiedenen Kontexten mit unterschiedlichen Alt-Texten verwenden willst. Unter „Image" → „Custom Attributes" kannst du zudem das Title-Attribut setzen.

SEO-Plugins: Yoast und Rank Math

Beliebte SEO-Plugins wie Yoast und Rank Math prüfen, ob deine Bilder Alt-Texte haben und ob dein Fokus-Keyword darin vorkommt. Das ist ein guter Reminder, reicht aber nicht als alleinige Optimierung. Die Plugins warnen dich auch, wenn du zu viele Bilder ohne Alt-Text hast oder wenn dein Alt-Text zu lang ist. Nutze diese Hinweise als Checkliste, aber verlasse dich nicht blind darauf – die Plugins bewerten nur ob ein Keyword vorhanden ist, nicht ob der Alt-Text gut geschrieben ist.

Eine professionelle Einrichtung lohnt sich – schau dir an, was eine professionelle Website an Mehrwert bringt, wenn technische Details wie Alt-Tags von Anfang an richtig umgesetzt werden.

Häufige Alt-Text Fehler

Auch wenn die Grundregeln einfach sind – in der Praxis schleichen sich immer wieder die gleichen Fehler ein. Hier sind die häufigsten Alt-Text Fehler, die du unbedingt vermeiden solltest:

Fehler 1: Fehlende Alt-Tags

Der offensichtlichste und häufigste Fehler: Bilder komplett ohne Alt-Attribut. Nicht alt="" (das ist für dekorative Bilder korrekt), sondern gar kein Alt-Attribut. Das ist sowohl für SEO als auch für Barrierefreiheit fatal. Jedes inhaltlich relevante Bild braucht einen Alt-Text. Prüfe deine Website mit der Web Analytics und der Google Search Console auf fehlende Alt-Tags.

Fehler 2: Keyword-Stuffing

Der Versuch, möglichst viele Keywords in den Alt-Text zu packen, ist kontraproduktiv. alt="SEO Optimierung Alt Tag SEO Bilder SEO optimieren Alt Text Bild SEO Keywords" sieht nicht nur für Google nach Spam aus – es klingt auch für Screenreader-Nutzer furchtbar. Ein natürlicher Satz mit einem relevanten Keyword reicht völlig aus.

Fehler 3: Generische Beschreibungen

alt="Bild", alt="Foto", alt="Bild 1" – solche Alt-Texte sind wertlos. Sie beschreiben nichts, sie enthalten keine Keywords, sie helfen niemandem. Investiere die 30 Sekunden für eine echte Beschreibung. Das Gleiche gilt für automatisch generierte Alt-Texte wie den Dateinamen: alt="IMG_4582" ist genauso nutzlos.

Fehler 4: Alt-Text bei dekorativen Bildern

Nicht jedes Bild braucht einen Alt-Text. Rein dekorative Elemente – Hintergrundmuster, Trennlinien, Stimmungsbilder ohne informativen Wert – sollten alt="" bekommen. Ein leeres Alt-Attribut signalisiert Screenreadern: „Dieses Bild ist unwichtig, überspringe es." Ohne diese Kennzeichnung liest der Screenreader den Dateinamen vor, was die Nutzererfahrung verschlechtert.

Fehler 5: Zu lange Alt-Texte

Manche übertreiben es mit der Beschreibung und schreiben ganze Absätze als Alt-Text. Das Problem: Die meisten Screenreader lesen den kompletten Alt-Text am Stück vor, ohne Pause. Bei 300 Zeichen wird das zur Qual. Halte dich an die Faustregel: maximal 125 Zeichen. Wenn das Bild eine komplexere Beschreibung braucht, nutze Figure/Figcaption oder einen separaten Beschreibungstext.

Fehler 6: Gleiche Alt-Texte für verschiedene Bilder

Jedes Bild zeigt etwas anderes – also braucht jedes Bild einen individuellen Alt-Text. Wenn du zehn Produktbilder hast und alle den Alt-Text alt="Produktbild" bekommen, verschenkst du zehn Chancen auf individuelle Keyword-Rankings. Beschreibe jedes Bild individuell mit seiner Besonderheit.

Alt Tag SEO in der Praxis: Deine Checkliste

Damit du sofort loslegen kannst, hier deine Checkliste für Bilder SEO optimieren – von der Dateivorbereitung bis zur Erfolgskontrolle:

Vor dem Upload

  • Dateibenennung mit sprechenden Keywords (Bindestriche als Trennzeichen)
  • Bildformat wählen: WebP für Fotos, SVG für Icons, PNG nur bei Transparenz
  • Bildkomprimierung durchführen (Ziel: unter 200 KB für reguläre Bilder)
  • Bildgröße an den Darstellungsbereich anpassen (keine 4000px für ein Thumbnail)
  • Exif-Daten entfernen, um Dateigröße zu reduzieren

Beim Einfügen

  • Alt-Text schreiben: Beschreibend, 80–125 Zeichen, Keyword natürlich einbauen
  • Bildunterschrift ergänzen, wenn sinnvoll
  • Lazy Loading aktivieren (außer für Above-the-fold-Bilder)
  • Responsive Images mit srcset einrichten
  • Figure/Figcaption nutzen für Bilder mit erweitertem Kontext

Nach dem Upload

  • Alt-Texte mit SEO-Plugin prüfen (Yoast oder Rank Math)
  • Google Search Console auf Bild-Indexierung checken
  • Core Web Vitals prüfen – hat sich der LCP verbessert?
  • Barrierefreiheit testen mit Screenreader oder WAVE-Tool
  • Open Graph Image setzen für Social-Media-Vorschauen
  • Richte eine Bildsitemap (Image Sitemap) ein, damit Google alle Bilder deiner Website finden und indexieren kann

Google Lens und die Zukunft der Bildersuche

Google Lens verändert die Art, wie Menschen nach Bildern suchen. Statt Keywords einzutippen, fotografieren Nutzer ein Objekt und lassen Google suchen. Was bedeutet das für Alt Tag SEO? Beschreibende Alt-Texte helfen Google, deine Bilder dem richtigen Kontext zuzuordnen – auch bei visuellen Suchen. Je besser dein Alt-Text den tatsächlichen Bildinhalt beschreibt, desto wahrscheinlicher taucht dein Bild bei Lens-Suchanfragen auf. Kombiniere das mit einem guten Schema Markup ImageObject und du bist bestens aufgestellt.

Alt Tag SEO – dein unsichtbarer Ranking-Vorteil

Der Alt Tag ist einer der am meisten unterschätzten Rankingfaktoren im SEO. Die meisten Websites ignorieren ihn oder setzen ihn halbherzig um. Genau darin liegt deine Chance: Wenn du Alt Texte strategisch einsetzt – beschreibend, keyword-optimiert, barrierefrei – gewinnst du einen Vorteil, den deine Konkurrenz verschläft.

Fassen wir zusammen: Alt Tag SEO bedeutet, jedes Bild als Ranking-Chance zu begreifen. Von der Dateibenennung über den Alt-Text bis hin zur Bildkomprimierung und Responsive Images – jeder Schritt zählt. Vergiss dabei nie die Barrierefreiheit: Gute Alt-Texte machen deine Website für alle zugänglich und verbessern gleichzeitig dein Ranking.

Du willst mehr aus deiner Website herausholen? Dann ist eine ganzheitliche Suchmaschinenoptimierung der nächste logische Schritt – Alt-Tags sind dabei nur ein Baustein von vielen.