Alt-Tag & Title-Tag: Diese HTML-Attribute helfen Google dabei, das Bild und die betreffende Homepage im Kontext besser einzuordnen. 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 für den Fall, dass das Bild nicht angezeigt wird und gibt auch dem Screen Reader relevante Informationen.
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
sollte das Bild aus irgendwelchen technischen Gründen nicht angezeigt werden
oder ein Screen-Reader (für Sehbehinderte oder Blinde) den Quelltext auslesen
oder die Homepage durch einen Voice Recorder vorgelesen wird
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
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.
du öffnest das Bild über den Stift
Fügst einen entsprechenden Alt-Tag hinzu
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”
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 Unterschied zwischen Alt-Tag und Alt-Attribut?
Analyse Bilder-SEO über Screaming Frog
Manchmal wirst du ein Feedback eines Tools erhalten, dass du z.B. fehlende Alt-Tags als auch fehlende Alt-Attribute hast. Wenn du dich fragst, was der Unterschied ist: das Attribut ist hier die Eigenschaft oder Anweisung innerhalb der HTML-Eigenschaften für ein Bild. Mehr zu SEO mit Screaming Frog erfahren →
Quelltext mit Alt-Attribut und Alt-Tag inklusive Inhalt:
<img src="bild.jpg" alt="Beschreibung des Bildes">
Quelltext mit leerem Alt-Tag:
<img src="bild.jpg" alt="">
Quelltext ohne Alt-Attribut:
<img src="bild.jpg">
Was ist der Title-Tag?
Title-tag: <img … title=”ein schönes Bild”>
Der 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.
Auf 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.
⇒ Nicht verwechseln: Site-Title & Title-Tag
Der Title-Tag ist ein HTML Attribut, das Elementen zugewiesen werden kann und 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:
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?
Site-title: <title>Seitentitel</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.
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.
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
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube. Mehr erfahren
Hier im Video diskutiert Matt Cutts von Google den Alt-Tag (3 Minuten)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"/>
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 bedeutet parsen? Parsen: Das HTML-Dokument wird eingelesen und dessen Elemente strukturiert. Diesen Vorgang nennt man Parsen.
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.
9 Gedanken zu „Alt-Tag & Title-Tag bei Bildern einfach erklärt“