Der Alt tag

Alles was du wissen musst!

Share on facebook
Share on linkedin
Share on twitter

Das Hinzufügen von Bildern zu deinen Artikeln ermutigt die Leute, sie zu lesen, und gut ausgewählte Bilder können auch deine Botschaft untermauern und dir eine gute Platzierung in den Bildsuchergebnissen verschaffen. Aber du solltest immer daran denken, deinen Bildern gute Alt-Attribute zu geben: Alt-Text verstärkt die Botschaft deiner Artikel mit Suchmaschinenspinnen und verbessert die Zugänglichkeit deiner Website. Dieser Artikel erklärt alles über Alt- und Titel-Tags und warum du sie optimieren solltest.

Was sind Alt Tags?

Dies ist ein vollständiger HTML-Bild-Tag:

<img src=“bild.jpg“ alt=“bildbeschreibung“ title=“bild-tooltip“>

Die Alt- und Titel-Attribute eines Bildes werden allgemein als Alt-Tag oder Alt-Text und Titel-Tag bezeichnet. Aber technisch gesehen sind sie keine Tags, sondern Attribute. Der Alt-Text beschreibt, was sich auf dem Bild befindet und die Funktion des Bildes auf der Seite. Wenn du also ein Bild als Button benutzt, um Produkt X zu kaufen, sollte der Alt-Text besagen „Taste zum Kauf von Produkt X“.

Der alt-tag oder Alt Text wird von Screenreadern verwendet, das sind Browser, die von blinden und sehbehinderten Menschen benutzt werden. Diese Screenreader sagen ihnen, was auf dem Bild ist, indem sie den alt-Tag lesen. Das title-Attribut wird als Tooltip angezeigt, wenn du mit der Maus über das Element fährst. Im Falle eines Bild-Buttons könnte der Bildtitel also einen zusätzlichen Handlungsaufruf enthalten. Dies ist jedoch nicht die beste Vorgehensweise.

Jedes Bild sollte einen Alt-Text haben. Nicht nur für SEO-Zwecke, sondern auch, weil blinde und sehbehinderte Menschen sonst nicht wissen, worum es auf dem Bild geht. Ein Titelattribut ist nicht erforderlich. Außerdem macht es meistens keinen Sinn, es hinzuzufügen. Sie sind nur für Benutzer mit der Maus (oder anderen Zeigegeräten) verfügbar, und der einzige Fall, in dem das title-Attribut für die Zugänglichkeit erforderlich ist, ist bei den Tags <iframe> und <frame>.

Wenn die Informationen, die durch das title-Attribut übermittelt werden, relevant sind, ziehen Sie in Betracht, sie an anderer Stelle im Klartext verfügbar zu machen, und wenn sie nicht relevant sind, ziehen Sie in Betracht, das title-Attribut ganz zu entfernen.

Aber was, wenn ein Bild keinen Zweck hat?

Wenn du Bilder in deinem Design hast, die rein aus Designgründen vorhanden sind, machst du es falsch. Diese Bilder sollten in deinem CSS sein und nicht in deinem HTML. Wenn du diese Bilder wirklich nicht ändern kannst, gib ihnen ein leeres alt-Attribut, etwa so:

<img src=“bild.png“ alt=““>

Das leere alt-Attribut sorgt dafür, dass Screenreader das Bild überspringen. In WordPress kannst du das Feld für „Alt-Text“ in den Bildeinstellungen leer lassen.

Anwendungen des Alt Tags

1. Das Hinzufügen von Alternativtext zu Fotos ist in erster Linie ein Prinzip der Webzugänglichkeit. Sehbehinderte Benutzer, die Screenreader verwenden, erhalten ein Alt-Attribut, um ein Bild auf der Seite besser zu verstehen.

2. Alt-Tags werden an Stelle eines Bildes angezeigt, wenn eine Bilddatei nicht geladen werden kann.

3. Alt-Tags bieten den Suchmaschinen-Crawlern einen besseren Bildkontext/-beschreibungen und helfen ihnen, ein Bild richtig zu indizieren.

Optimales Alt-Text-Format

Das beste Format für Alt-Text ist ausreichend beschreibend, enthält aber keine Spam-Versuche mit Keyword-Füllung. Wenn du deine Augen schließen kannst, dir den Alt-Text von jemandem vorlesen lässt und dir eine einigermaßen genaue Version des Bildes vorstellst, bist du auf dem richtigen Weg.

Sehen wir uns ein paar Beispiele für den Alt-Text für dieses Bild eines lecker aussehenden Stapels Blaubeerpfannkuchen an:

Pfannkuchen alt tag beispiel

Okay: <img src=“pancakes.png“ alt=“pancakes“>

Dieser Alt-Text ist nur „okay“, weil er nicht sehr beschreibend ist. Ja, dies ist ein Bild von einem Stapel Pfannkuchen. Aber zu diesem Bild gibt es noch mehr zu sagen.

Gut: <img src=“pancakes.png“ alt=“Stapel Blaubeerpfannkuchen mit Puderzucker“>

Dieser Alt-Text ist eine bessere Alternative, weil er viel beschreibender für das ist, was auf dem Bild ist. Dies ist nicht einfach nur ein Stapel „Pfannkuchen“ (wie das erste Alt-Text-Beispiel gezeigt hat); es ist ein Stapel Blaubeerpfannkuchen mit Puderzucker bestäubt!

Nicht empfehlenswert:

<img src=“pancakes.png“ alt=““>

oder

<img src=“pancakes.png“ alt=“pancake pfannkuchen pfannkuchen pfannkuchenpfannkuchen pfannkuchenkuchen hotcakes hotcake frühstück nahrung bestes frühstück top frühstücke frühstücksrezepte pfannkuchen rezepte pfannkuchen rezept“>

Keines dieser Beispiele ist empfehlenswert. Die erste Codezeile enthält eigentlich gar keinen Alt-Text (beachten Sie, dass die Anführungszeichen leer sind), während das zweite Beispiel die Füllung von Schlüsselwörtern in Alt-Text demonstriert.

Warum ist Alt-Text wichtig?

1. Barrierefreiheit

Alt-Text ist ein Grundsatz des barrierefreien Webdesigns. Sein ursprünglicher (und immer noch primärer) Zweck ist es, Besuchern, die sie nicht sehen können, Bilder zu beschreiben. Dazu gehören Bildschirmleseprogramme und Browser, die Bilder blockieren, aber auch Benutzer, die sehbehindert oder anderweitig nicht in der Lage sind, ein Bild visuell zu identifizieren. Das Einfügen von Alt-Text zu deinen Bildern stellt sicher, dass alle Benutzer, unabhängig von ihren visuellen Fähigkeiten, den Inhalt deiner Seite schätzen können.

2. Bild-SEO

Die Verwendung von Alt-Text auf deinen Bildern kann zu einem besseren Benutzererlebnis führen, aber es kann auch dazu beitragen, dir sowohl explizite als auch implizite SEO-Vorteile zu verschaffen. Neben der Implementierung von Best Practices für Bildtitel und Dateinamen können auch Alt-Texten zur Bild-SEO beitragen.

Obwohl sich die Bildererkennungstechnologie der Suchmaschinen im Laufe der Jahre erheblich verbessert hat, können die Suchmaschinen-Crawler die Bilder auf einer Website-Seite immer noch nicht so „sehen“ wie wir, daher ist es nicht klug, die Interpretation allein in ihren Händen zu lassen. Wenn sie es nicht verstehen oder falsch verstehen, ist es möglich, dass du entweder nach unbeabsichtigten Schlüsselwörtern rankst oder das Ranking gänzlich verpasst.

In diesem Sinne bietet dir alt text eine weitere Möglichkeit, dein Zielstichwort einzufügen. Da die Verwendung von Schlüsselwörtern auf der Seite als Ranking-Faktor der Suchmaschine immer noch an Bedeutung gewinnt, ist es in deinem besten Interesse, einen Alt-Text zu erstellen, der sowohl das Bild beschreibt als auch, wenn möglich, ein Schlüsselwort oder eine Schlüsselwortphrase enthält, auf das du abzielst.

Wie schreibe ich gute Alt-Tags?

Beschreibe das Bild so genau wie möglich. Alt-Text ist in erster Linie dazu da, Texterklärungen zu Bildern für Benutzer zu liefern, die sie nicht sehen können. Wenn ein Bild wirklich keine Bedeutung/Wert vermittelt und nur zu Designzwecken da ist, sollte es innerhalb des CSS leben, nicht in HTML.

Halte es (relativ) kurz. Die beliebtesten Screenreader schneiden Alt-Text bei ca. 125 Zeichen ab, daher ist es ratsam, die Anzahl der Zeichen oder weniger beizubehalten.

Benutze deine Schlüsselwörter Alt-Text bietet dir eine weitere Möglichkeit, dein Ziel-Schlüsselwort auf einer Seite einzufügen, und damit eine weitere Möglichkeit, den Suchmaschinen zu signalisieren, dass deine Seite für eine bestimmte Suchanfrage sehr relevant ist. Während deine erste Priorität die Beschreibung und der Kontext des Bildes sein sollte, solltest du, wenn es Sinn macht, dein Schlüsselwort in den Alt-Text von mindestens einem Bild auf der Seite einfügen.

Vermeide das Ausstopfen mit Schlüsselwörtern. Google wird dir keine Punkte für schlecht geschriebenen Alt-Text gutschreiben, aber du wirst Probleme bekommen, wenn du deinen Alt-Text zum Anlass nimmst, so viele relevante Schlüsselwörter wie du dir vorstellen kannst in den Text zu stopfen. Konzentriere dich darauf, beschreibenden Alt-Text zu schreiben, der einen Kontext zum Bild liefert und wenn möglich dein Zielschlüsselwort enthält, und belasse es dabei.

Verwende keine Bilder als Text. Dies ist weniger eine alttext-spezifische Best Practice als vielmehr eine allgemeine SEO-freundliche Web-Entwicklung. Da Suchmaschinen den Text in deinen Bildern nicht lesen können, solltest du es vermeiden, Bilder anstelle von Worten zu verwenden. Wenn du das tun musst, erkläre, was dein Foto in deinem Alt-Text sagt.

Schreibe nicht „Bild von“, „Bild von“ usw. in deinen Alt-Text. Es wird bereits angenommen, dass sich dein Alt-Text auf ein Bild bezieht, also brauchst du es nicht anzugeben.

Vergiss nicht longdesc=““. Benutze den longdesc=“““ Tag für komplexere Bilder, die eine längere Beschreibung benötigen.

Vernachlässige die Formular-Buttons nicht. Wenn ein Formular auf deiner Webseite ein Bild als „Absenden“-Button verwendet, gib ihm ein alt-Attribut. Bild-Buttons sollten ein alt-Attribut haben, das die Funktion des Buttons beschreibt, wie z.B. „Suchen“, „Jetzt bewerben“, „Anmelden“, etc.

Share on facebook
Share on linkedin
Share on twitter

Kommentar verfassen

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

×

Inhaltsverzeichnis

Office Hamburg
Gertigstraße 12-14,
22303 Hamburg