Was ist ein Alt-Tag und wie sollten Sie es verwenden?

Bilder helfen dabei, Ihre Website ansprechend und optisch ansprechend zu gestalten. Wenn Sie Bilder jedoch nicht mit alternativem Text (auch als „Alt-Text“ oder „Alt-Tags“ bezeichnet) optimieren, verpassen Sie eine wichtige Gelegenheit, die Benutzerfreundlichkeit und Zugänglichkeit Ihrer Website zu verbessern.

Um sie richtig zu verwenden, ist es wichtig, zuerst zu verstehen, was Alt-Tags sind. In diesem Beitrag besprechen wir, was Alt-Tags sind und warum sie verwendet werden. Wir erklären auch, wie man Bildern in WordPress Alt-Tags hinzufügt, und stellen einige Best Practices dafür vor.

Lass uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Was ist ein Alt-Tag?

Alt-Tags werden Bildern in HTML hinzugefügt, um ihren Inhalt und Kontext auf der Webseite zu beschreiben. Das Alt-Tag wird auch im Bildcontainer angezeigt, wenn die Mediendatei nicht richtig geladen oder angezeigt werden kann:

Alt-Tags helfen Nutzern, die Screenreader verwenden, z. B. mit Sehbehinderungen, den Inhalt Ihrer Website zu verstehen. Darüber hinaus verwenden Suchmaschinen-Bots sie, um Ihre Bilder beim Crawlen, Indexieren und Ranking Ihrer Website zu interpretieren.

Ein hochwertiges Alt-Tag, das innerhalb des Image-Tags hinzugefügt wird, ist eine kurze Beschreibung, die nicht nur erklärt, was das Bild darstellt, sondern auch seinen Zweck auf der Seite. Bei Verwendung in HTML-Code sieht das vollständige Image-Tag etwa so aus:

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

Bild-Alt-Tags werden manchmal mit Bildtiteln oder Bildunterschriften verwechselt. Bildtitel sind jedoch eine andere Art von Attribut. Sie werden als Popup-Text angezeigt, wenn eine Person mit der Maus über ein Bild fährt. Auf der anderen Seite werden Bildunterschriften mit einem Bild angezeigt, normalerweise darunter, und bieten zusätzliche Informationen oder Details dazu. Unter normalen Umständen werden Besucher niemals die Alt-Tags Ihrer Bilder sehen.

Warum Alt-Tags für Bilder verwenden?

Alt-Tags dienen mehreren Zwecken. Obwohl Sie nicht verpflichtet sind, sie zu verwenden, bietet dies einige große Vorteile. Da sie sowohl von Suchmaschinen-Crawlern als auch von Screenreading-Tools verwendet werden, sind sie ein wichtiger Bestandteil der Web-Barrierefreiheit und der Suchmaschinenoptimierung (SEO).

Sie verbessern die Web-Zugänglichkeit

Alt-Tags tragen dazu bei, dass Besucher auf den Inhalt Ihrer Website zugreifen und ihn genießen können, selbst wenn Sie Hilfstechnologien oder Nur-Text-Browser verwenden. Wenn jemand mit einer Sehbehinderung Ihre Website besucht, liest ihr Screenreader den Text auf der Seite vor. Wenn es zu einem Bild gelangt, verwendet es das Alt-Tag, um zu beschreiben, was dieses Bild ist.

Wenn das Alt-Tag fehlt, liest der Screenreader möglicherweise stattdessen den Bilddateinamen. Dies ist nicht nur in der Regel ineffektiv, um das Bild richtig zu erklären, sondern kann auch verwirrend und störend sein, insbesondere wenn der Dateiname nicht SEO-optimiert wurde.

In einigen Fällen, beispielsweise wenn Sie das Alt-Tag-Feld eines Bildes in WordPress leer lassen, überspringt der Screenreader dieses Bild vollständig. Angenommen, die Bilder, die Sie auf Ihren Webseiten verwenden, dienen einem bestimmten Zweck. Dieses Fehlen bedeutet, dass der Besucher beim Konsumieren Ihrer Inhalte nicht den vollen Wert oder die beabsichtigte Erfahrung erhält.

Sie können Ihre Suchmaschinen-Rankings verbessern

Image-Alt-Tags können es Ihnen erleichtern, für die Keywords zu ranken, auf die Sie abzielen. Suchmaschinen-Bots sind intelligent, aber sie können die visuellen Aspekte eines Bildes nicht auf die gleiche Weise interpretieren und verstehen wie Menschen.

Alt-Attribute bieten eine textbasierte Alternative zum Übersetzen von Bildern und insbesondere zum Einbinden relevanter Schlüsselwörter. Textbeschreibungen, die Ziel-Keywords enthalten, können Ihre Chancen auf ein hohes Ranking bei der Bildsuche erhöhen.

Um die wichtige Rolle zu betonen, die Bilder (und wiederum Alt-Tags) bei der SEO spielen, betrachten Sie die Search Engine Results Page (SERP) für „Kingsize-Bettwäsche“:

Die erste Seite liefert nicht nur textbasierte Ergebnisse; Es gibt auch viele Bildergebnisse. Wenn sie optimiert und richtig verwendet werden, können Alt-Tags dazu beitragen, Ihre SEO zu verbessern und mit Hyperlinks versehene, anklickbare Bilder zu generieren, die in Suchen wie diesen erscheinen. Dies ist insbesondere für E-Commerce-Sites und Landingpages von Vorteil.

So fügen Sie ein Bild-Alt-Tag in WordPress hinzu

Sobald Sie die Vorteile der Verwendung von Image-Alt-Attributen auf Ihrer Website verstanden haben, ist es an der Zeit zu lernen, wie Sie dies tatsächlich tun können. Glücklicherweise macht WordPress diese Aufgabe unglaublich unkompliziert und einfach.

Um ein Bild-Alt-Tag in WordPress hinzuzufügen, melden Sie sich bei Ihrem Admin-Dashboard an und navigieren Sie zu der Seite oder dem Beitrag, zu dem Sie Ihr Bild hinzufügen möchten. Innerhalb des Wordpress - Editor, klicken Sie auf das Plus - Symbol und wählen Sie den Bildblock:

Laden Sie als Nächstes Ihr Bild hoch oder wählen Sie eines aus Ihrer Medienbibliothek aus. Sobald Sie das Bild in den Block einfügen, wird das Bildeinstellungen- Bedienfeld in der Seitenleiste rechts geöffnet. Sie können Ihre Beschreibung in das Alt-Textfeld eingeben:

Wenn Sie fertig sind, speichern Sie Ihre Änderungen. Sie können dies auch für vorhandene Bilder tun. Wenn Sie beispielsweise ein Bild in einem bereits auf Ihrer Website veröffentlichten Beitrag aktualisieren möchten, klicken Sie einfach auf das Bild und geben Sie Ihr neues Alt-Tag in die Seitenleiste ein.

So fügen Sie ein Bild-Alt-Tag in HTML hinzu

Wenn Sie WordPress oder ein anderes CMS verwenden, das ein Modul zum Hinzufügen und Bearbeiten von Alt-Tags enthält, wird der HTML-Code automatisch für Sie hinzugefügt. Wenn Sie den Code jedoch selbst hinzufügen möchten, können Sie dies problemlos tun.

Um Alt - Tag HTML in Wordpress hinzuzufügen, klicken Sie auf dem entsprechenden Bildblock. Wählen Sie in der Blocksymbolleiste die Schaltfläche mit den drei vertikalen Punkten aus und wählen Sie Als HTML bearbeiten :

Der HTML-Code zeigt das Image-Tag an. Sie werden feststellen, dass das alt-Attribut leer ist. Platzieren Sie Ihren Text innerhalb der Anführungszeichen:

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Vorschau , um zum visuellen Editor zurückzukehren, und speichern Sie Ihre Änderungen. Sie können dieselbe Syntax und dasselbe Format zum Bearbeiten des HTML-Image-Tags jeder Datei verwenden.

Tipps und bewährte Vorgehensweisen zum Schreiben von Bild-Alt-Tags

Wenn Sie Ihre Alt-Tags erstellen, müssen Sie einige wichtige Punkte beachten. Wenn Sie sich an diese Best Practices halten, werden Ihre Alt-Tags effektiver:

• Seien Sie konkret und beschreibend. Der Zweck von Alt-Tags besteht darin, das Bild zu beschreiben, daher möchten Sie so genau wie möglich sein. Wenn Sie sich nicht sicher sind, ob Ihre Beschreibung ausreichend ist, überlegen Sie, welches Bild Sie visualisieren würden, wenn Sie nur diese Textzeile sehen würden.
• Halt dich kurz. Obwohl Sie detailliert sein möchten, müssen Sie Ihr Alt-Tag nicht zu einem langen Absatz (oder sogar zu einem ganzen Satz) machen. Zielen Sie auf maximal 100 bis 125 Zeichen ab.
• Seien Sie nicht überflüssig. Um das Beste aus Ihrem Alt-Tag herauszuholen, sollten Sie keine unnötigen Wörter einfügen. Dazu gehört das Hinzufügen von „Bild von“ oder „Bild von“ vor der Beschreibung. Diese Elemente sind unnötig, da sie bereits impliziert sind.
• Integrieren Sie relevante Keywords auf natürliche Weise . Berücksichtigen Sie Ihre Ziel-Keywords und binden Sie sie nach Möglichkeit organisch in den Kontext der Seite ein. Dies ist einfacher, wenn Sie hochrelevante Bilder verwenden, die mit dem Text korrespondieren.
• Vermeiden Sie Keyword-Stuffing. Die Verwendung von Schlüsselwörtern in Ihren Alt-Tags kann zwar die SEO verbessern, aber achten Sie darauf, es nicht zu übertreiben. Keyword-Stuffing kann Ihrem SEO tatsächlich schaden und zu einer schlechten Benutzererfahrung führen.
• Verwenden Sie keine Bilder anstelle von Text. Der Hauptzweck eines Alt-Tags besteht darin, Textkontext für Maschinen bereitzustellen, die die visuellen Elemente auf einer Seite nicht verarbeiten und interpretieren können. Daher ist es nicht sinnvoll, Text in Bildern zu verwenden, insbesondere für Ihre Überschriften und Seitentitel.

Denken Sie beim Erstellen von Alt-Tags für Ihre Bilder immer daran, dass das Ziel darin besteht, das Bild für diejenigen zu beschreiben, die es möglicherweise nicht sehen können. Während die Berücksichtigung von SEO und Keywords definitiv eine kluge Idee ist, kann das Schreiben Ihrer Alt-Tags mit Blick auf echte Benutzer dazu beitragen, positivere Ergebnisse zu erzielen.

Abschluss

Bilder können dazu beitragen, das Erscheinungsbild Ihrer Webseiten zu verbessern und sie interessanter, informativer und ansprechender zu machen. Um ihren Wert jedoch zu maximieren, ist es am besten, sie mit Alt-Tags zu ergänzen. Diese kurzen, aber anschaulichen Erläuterungen bieten Kontext sowohl für Benutzer als auch für Suchmaschinen. Image-Alt-Tags tragen dazu bei, die Benutzererfahrung zu verbessern, die Zugänglichkeit zu verbessern und das Ranking für relevante Keywords zu erleichtern.

Haben Sie weitere Fragen dazu, was ein Alt-Tag ist oder wie man einen in WordPress hinzufügt? Lass es uns im Kommentarbereich unten wissen!

Ausgewähltes Bild von Honza Hruby / shutterstock.com