Alt-Tag & Title-Tag bei Bildern – so verbesserst du dein Ranking

Von | 5. Januar 2021

Diese HTML-Attribute helfen Google dabei, das Bild und die betreffende Homepage im Kontext besser einzuordnen.

Was bedeutet der Alt-Tag oder Alternativer Tag

Der Begriff „Tag“ bedeutet Etikett und wird innerhalb des HTLM-Quellcodes zur Strukturierung benutzt. Deshalb ist der Alt-Tag für den Benutzer deiner Homepage unsichtbar. Der Alt-Tag ist die alternative Bildbeschreibung

  1. sollte das Bild aus irgendwelchen technischen Gründen nicht angezeigt werden
  2. oder ein Screen-Reader (für Sehbehinderte oder Blinde) den Quelltext auslesen
  3. oder die Homepage durch einen Voice Recorder vorgelesen wird
  4. wenn du dich entscheidest, ein Bild als Link zu verwenden.

Bestenfalls ist es eine Beschreibung des Bildes, die durchaus auch eine kleine Suchmaschinenoptimierung enthalten kann. Da in den letzten Jahren der Alt-Tag oft zum Keyword-Stuffing genutzt wurde, hat er im Ranking ein wenig verloren – wichtig ist die Harmonie der betreffenden Seite, inhaltlich stimmig soll es sein!

Ein sinnvoller Alt-Tag bedeutet barrierefreien Zugang zu den Inhalten der Homepage, denn die Informationen können über Screenreader und die Vorlesen-Funktion (z.B. über Google-Assistent-Vorlesen-Funktion, oder mit Browser-Addon für Firefox) abgerufen werden.

WordPress: Alt-Tag zentral in der Mediathek vergeben

Alt-Tag in WordPress Mediathek vergeben

Mediathek

Grundsätzlich kann man in WordPress in der Mediathek Alt-Tags, Title-Tags und Bildbeschriftungen vergeben. Fügt man dieses Bild jetzt einer Seite oder einem Beitrag hinzu, wird automatisch der Alt-Tag und die Bildbeschriftung übernommen, nicht aber die Beschreibung oder der Title Tag.

Aus (SEO-) logischen Gründen kann man aber innerhalb der Seite jedes Bild inhaltlich genau an den jeweiligen Inhalt anpassen und hier dann noch mal die verschiedenen Attribute justieren.

Die Bildbeschreibung und -Beschriftung geben zusätzliche lesbare Informationen z.B. bei einer Galerie.

In WordPress vergibst du den Alt-Tag innerhalb der Seite, wo du dich befindest, das Bild ist schon im Beitrag oder in der Seite enthalten.

  1. du öffnest das Bild über den Stift
  2. Fügst einen entsprechenden Alt-Tag hinzu
  3. Achtest auf eine angenehme Länge, d.h. angemessen, um kurz und knackig den Inhalt zu beschreiben

In meinem Beispiel ist will ich eine Unterseite zum Thema Zoom mit einem Bild aufwerten.

<img alt=“Zoom regelmäßig updaten und so für Sicherheit sorgen“ title=“So kannst du Zoom auf Aktualisierungen prüfen!“ src=“…/aktualisierung-zoom.png“>

Die spitze Klammer öffnet den HTML-Tag Image, im Alt-Tag siehst du meinen Text, im Title-Tag ebenso, das src-Tag ist die Source, also die Bild-„Quelle“

 

Warum sind Alt-Tag & Title-Tag wichtig für die Suchmaschinenoptimierung?

Suchmaschinen lieben Struktur. Mithilfe von Crawlern, auch Bots oder Spider genannt, durchforsten sie Internet und Inhalte und sortieren diese sinnhaft. So wird diese Beitrag in das Töpfchen „Alt-Tags und Title-Tags“ sortiert und euch hoffentlich bei der nächsten Suche ganz oben angezeigt 😉

Alt-Tags, sowie auch die Title-Tags unterstützen die Suchmaschine, Bild und Inhalt einzuordnen und auch ggf. euer Bild in der Bildersuche anzuzeigen.

Google verwendet den Alt-Text zusammen mit Computer-Vision-Algorithmen und dem Inhalt der Seite, um das Thema des Bildes zu verstehen.

Was ist der Title-Tag?

Anwendung des Title-TagsDer Title-Tag erzeugt das Fähnchen innerhalb des HTML-Codes den Schnipsel title=“So kannst du Zoom auf Aktualisierungen prüfen!“ in meinem Beispiel (Bild links) kannst du den Title-Tag sehen, sobald du mit der Mouse über das Bild fährst.

Title-Tag Sichtbarkeit auf mobilen EndgerätenAuf mobilen Endgeräten gibt der Title-Tag eine Bildinformation weiter. Auf mobilen Endgeräten (hier iPhone) sieht man den Title-Tag, wenn das Bild angefasst wird, um es zu teilen oder zu Speichern.

 

Unterschied Site-Title & Title-Tag

Der Title-Tag, wird verwendet, um

  • das Fähnchen beim Mouse-Over zu erzeugen: Bei Verlinkungen und Bildern (geht bitte zum Test über den Link)
  • eine zusätzliche Information über das Bild in den mobilen Endgeräten zu geben
  • eine zusätzliche Information bei manchen Bildergalerien zu geben

Der Site-Title wird verwendet, um einmal die Suchergebnisseite zu gestalten (weiter unten erklärt) und auch die Registerkarte anzupassen, anhand der wir wissen, welche Websites wir geöffnet haben:

Site-Title - Registerkarten Browser

Der Site-Title erzeugt die Beschriftung der Registerkarten im Browser

Unsichtbar?
Weder Site-Title, noch Alt-Tag oder Title-Tag sind für den User direkt auf der Homepage sichtbar. Nur Site-Title ist in der Registerkartenbeschriftung erkennbar – und natürlich auf der Google-Ergebnissseite.

 

Was ist der Site-Title oder Meta-Title?

Aus dem Site-Title wird unter anderem die Google Suchergebnisseite gebildet, die SERP (Search Engine Result Page), die sich aus sogenannten Snippets zusammensetzt.

Snippets sind kleine Textausschnitte, die aus dem Inhalt einer Website gebildet, welche in den Suchergebnissen einer Suchmaschine angezeigt werden

Diese bestehen meist aus Titel (meta-title), Beschreibung (meta description) und einer URL (Unterseite). Sie dienen als eine Art Vorschau auf das Suchergebnis und sollen im Idealfall einen Call-to-Action/Handlungsaufforderung enthalten.

Serp-Snippet - Google Suchergebnis

Aufbau SERP Snippet

Grafik untersuchen - Firefox

Zeigt den Title-Tag an

 

Alt-Tag vorhanden?

Hat das Bild Alt-Tag oder Title-Tag?
Bedienungsanleitung: Element untersuchen im Browser oder im Firefox nur der Title-Tag, rechte Maustaste „Grafik untersuchen“ –> zugeordneter Text.

Bild-Element untersuchen im Firefox

Element untersuchen im Firefox

 

 

Gibt es Alt-Tag & Title-Tag für Bilder bei Wix oder Jimdo?

Bei Wix kann man eine Bildbeschreibung hinzufügen, die auch als Mouse-Over erscheint, jedoch ist dies technisch mit CSS / JavaScript realisiert und hat mit dem Title-Tag der oben beschrieben ist, nichts zu tun. Als Alt-Tag wird automatisch der Bildname verwendet, also so: alt="bildname.jpg" und ist nicht individuell anpassbar.

Bei Jimdo gibt es für Bilder sowohl Alt-Tag als auch den Capiton-Tag, aber keinen Title-Tag. Mehr dazu:  Meta-Description (Site-Title etc.) bei Jimdo anpassen >>

Was sagt Google zu den verschiedenen HTML-Attributen als Ranking-Faktor?

Google bewertet die jeweilige Seite als Gesamtes und kann die umliegenden Texte sinnhaft dem Bild zuordnen, d.h. in Zusammenhang bringen. Hier aber ein Auschnitt über sogenannte Best Practices bei der Verwendung von Bildern:

Füge beschreibende Titel, Beschriftungen, Dateinamen und Text für Bilder ein

Google extrahiert Informationen über das Thema des Bildes aus dem Inhalt der Seite, einschließlich Bildunterschriften und Bildtitel. Achte darauf, dass deine Bilder in der Nähe von relevantem Text und auf Seiten platziert werden, die für das Bildthema relevant sind.

Der Dateiname zeigt Google das Thema des Bildes: mein-neues-schwarzes-Kaetzchen.jpg  ist auf jeden Fall besser als IMG00023.JPG.

Verwende den Alt-Tag

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Hier im Video diskutiert Matt Cutts von Google den Alt-Tag (3 Minuten)

Welpe spielt mit Ball

Corgi Welpe spielt mit Ball

Der optimale Alt-Tag hat nützlichen Inhalt, der eine Information über das Bild enthält und angemessen Keywords verwendet. Außerdem sollte das Bild natürlich im Kontext der Seite stehen – hier bei meinem Beispiel mit dem Welpen wäre da ein Bild, dass sich unmittelbar mit SEO oder dem Alt-Tag beschäftigt, günstiger gewesen.

Bitte unbedingt vermeiden, Alt-Attribute mit Keywords zu füllen (Keyword-Stuffing)! Das kann sowohl zu einer schlechten Usability führen also auch dazu, das Google deine Seite als Spam einordnet.

Beispiele zur Verwendung des Alt-Tags

  • schlecht: (fehlender alt text): <img src="welpe.jpg"/>
  • schlecht: (keyword stuffing): <img src="welpe.jpg" alt="Welpe Hund Baby Hundewelpe Welpen Welpen Welpen Wurf Welpen Hund Retriever Labrador Wolfshund Setter Pointer Welpe Jack Russell Terrier Welpen Hundefutter billig Hundefutter Welpenfutter"/>
  • gut: <img src="welpe.jpg" alt="welpe"/>
  • sehr gut: <img src="welpe.jpg" alt="Corgi Welpe spielt mit Ball"/>

(..)

Verwendung von Bildern: als Hintergrund oder im Beitrag (auf der Seite)

Google parst* den HTML-Code deiner Seiten, um Bilder zu indexieren, indexiert jedoch keine CSS-Bilder.

  • gut: <img src="welpe.jpg" alt="Corgi Welpe spielt mit Ball" />
  • schlecht: <div style="background-image:url(welpe.jpg)">Corgi Welpe spielt mit Ball</div>

Was ist der Caption-Tag?

Die Bildunterschrift wird intern normalerweise (nicht bei Wix) als Caption gekennzeichnet. Der Caption-Tag ist vorteilhaft, weil der Text optisch passend beim jeweiligen Bild angezeigt wird. Seit HTML5 gibt es den  <figcaption>-Tag, den auch Jimdo einsetzt.

<caption>Corgi Welpe spielt mit Ball</caption>

 

*Was bedeutet parsen?
Parsen: Das HTML-Dokument wird eingelesen und dessen Elemente strukturiert. Diesen Vorgang nennt man Parsen.

 

Den vollständigen Beitrag zum richtigen Umgang mit Bildern bei Google lesen >>

 


Welpenbild Bild von Elena Rogulina auf Pixabay

3 Gedanken zu „Alt-Tag & Title-Tag bei Bildern – so verbesserst du dein Ranking

  1. Pingback: Title Tag & Meta Descriptions bei Jimdo anpassen - Jimdo SEO

  2. Pingback: Element untersuchen im Chrome - SEO & WordPress, Jimdo & Co.

  3. Pingback: Galerie in WordPress erstellen - SEO & WordPress, Jimdo & Co.

Schreibe einen Kommentar

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