Unterschied zwischen Alt und Titel des Bildes - welches verwendet werden soll - und Auswirkung

10

Seit Jahren schreibe ich mein HTML für Bilder wie dieses:

<img src="picture.jpg" alt="my picture" >

Aber ich habe kürzlich eine Prüfung meiner Website mit Raven SEO-Tools durchgeführt und dabei viele Fehler gemeldet, mit denen ich wirklich überrascht war.

Als ich den Bericht durchging, waren 99% dieser Fehler auf fehlenden Bildtiteltext zurückzuführen.

Ich weiß, dass der Titeltext eines Bildes beim Bewegen des Mauszeigers über ein Bild ein wenig angezeigt werden kann. Aber abgesehen davon, was ist der Zweck und hat dies Auswirkungen auf die Suchmaschinenoptimierung?

Auch wenn Sie es implementieren würden, was würden Sie dort einfügen? Würden Sie einfach die gleichen Informationen in das altAttribut einfügen? dhalt="my picture" title="my picture"

seo images title-attribute alt-attribute Sam
quelle
"Welches soll verwendet werden alt? " - Ich glaube nicht, dass es eine Frage gibt, ob Sie das Attribut verwenden sollten. Dies ist obligatorisch und Ihre Seiten werden ohne dieses Attribut nicht validiert (außer vielleicht in einigen Randfällen mit HTML5?).
MrWhite
1
Meldet "Raven SEO" einen direkten "Fehler" oder eine Warnung / einen Hinweis?
MrWhite
@ w3d seine Meldung eine Warnung / Hinweis
Sam

Antworten:

12

Das ALT-Tag ist ein Barrierefreiheits-Tag, das für Personen eingeführt wurde, die auch über Google Sehschwierigkeiten haben. Verwenden Sie es, um festzustellen, worum es bei einem Bild geht. Sie sollten niemals in Betracht ziehen, Ihren Besuchern Alt-Tags für SEO-Zwecke vorzulegen.

Viele Leute und sogar Matt Cutts, der bei Google arbeitet, sprechen über Alt-Tags, als wären sie speziell für Suchmaschinen entwickelt worden, um Bots darüber zu informieren, worum es in dem Bild geht. Dies ist einfach nicht wahr.

Sie können Google jedoch darüber informieren, worum es bei dem Bild geht, während Sie sich um Ihre Zielgruppe kümmern. Geben Sie niemals nur Schlüsselwörter in das Alt-Tag ein, sondern dämpfen Sie die Nutzererfahrung und es ist sehr unnatürlich.

Ein Paradebeispiel dafür ist, dass oft gesagt wird, jemand möchte für das Schlüsselwort "Bournemouth" rangieren, er hat Bournemouth im Titel, in der H1-Meta-Beschreibung und erstellt dann ein Bild mit dem Alt-Tag "Bournemouth", während dies funktioniert SEO dämpft die Benutzererfahrung und verfehlt den ganzen Punkt des Alt-Tags. Das Alt-Tag ist für Personen gedacht, die Sehprobleme haben oder Bilder insgesamt deaktivieren. Das ALT-Tag wurde entwickelt, um den Benutzer darüber zu informieren, worum es in dem Bild geht.

Ein gutes Beispiel dafür ist unten zu sehen

<img src="i.jpg" alt="Bournemouth" />

vs.

<img src="i.jpg" alt="Birdseye view of Bournemouth" />

Das obige Beispiel enthält weiterhin Ihr Keyword und erklärt Google und Ihrer Zielgruppe, worum es in dem Bild geht.

Was ist also mit dem Titel-Tag?

Das Titel-Tag wurde entwickelt, um mehr Informationen zu geben, wenn Sie mit der Maus über ein Element fahren. Dies ist für IMG nicht sehr nützlich. Wenn Sie dieselben Informationen für ALT und TITLE verwenden möchten, können Sie das Alt-Tag mithilfe eines Skripts lesen und genau festlegen eigene Hover-Overs mit JS. Ich würde das Titel-Tag nur empfehlen, wenn Sie mehr Informationen als das ALT-Tag bereitstellen möchten, z. B. eine längere Beschreibung. Sie müssen nicht die genauen Informationen in beiden Elementen angeben, da dies nur den Code aufbläht.

Das Titel-Tag ist sehr praktisch für Links, da es beim Bewegen des Mauszeigers Ihrem Publikum mehr Informationen über den Link geben kann, auf den es klicken möchte. Es lohnt sich, hier mehr über das Titel-Tag zu lesen .

Simon Hayter
quelle
1
"Wenn kein Titel gefunden wird, wird das Alt-Tag als Hover-Over gelesen." - Das altAttribut wird in keinem modernen Browser als "Hover-Over" verwendet . Nur IE7 und frühere Versionen haben den Alternativtext als Popup-Tooltip angezeigt (wenn das titleAttribut weggelassen wird).
MrWhite
Entschuldigung, das wollte ich nicht sagen. Ich meine, für Text aus bekommst du das Alt-Tag. Für Hover-Overs verwenden Sie einfach eine Abfrage, um das Alt-Tag zu lesen und den Titel zu erstellen. Sie müssen weder Alt noch Titel schreiben, wenn sie identisch sind. Sie blähen nur Ihren Code auf.
Simon Hayter
1
@ w3d bearbeitete Antwort;)
Simon Hayter
1
Aber was den Titel in Bezug auf den SEO-Titel angeht , spricht Matt Cutts in diesem Video ein wenig über den Titel. Googlewebmastercentral.blogspot.co.uk/2007/12/… konzentriert sich jedoch mehr auf ALT-Tags. Mein persönlicher Glaube, dass es zur Benutzererfahrung beitragen kann, aber nicht in großem Umfang, wie Sie hoffen würden, rangieren Millionen von Top-Websites ohne Titel auf Bildern.
Simon Hayter
Ich dachte nur, es lohnt sich zu klären ... die altund titleAttribute selbst sollten niemals "gleich" sein, da dies Leute verwirren würde, die den altText für die Barrierefreiheit verwenden. Die jQuery-Lösung erstellt ein Mouseover-Ereignis und kopiert den altText nicht einfach in das titleAttribut.
MrWhite
3

altgibt eine alternative Beschreibung des Bildes. Dieses Attribut ist erforderlich für img.

titlegibt zusätzliche Informationen zum Bild. Dieses Attribut ist optional für img.

Verlassen Sie sich niemals auf Informationen in title. Wenn die Informationen wirklich wichtig sind, fügen Sie sie in ein eigenes Element ein.

Diese beiden Attribute sollten nicht denselben Inhalt haben.

unor
quelle
0

Ihre Verwirrung ist normal und ja, jedes Tag (Titel, ALT) stellt sein eigenes Potenzial dar, das Suchmaschinen und Benutzern hilft, zu wissen, worum es in dem Bild geht.

Manchmal reicht ALT-Text nicht aus, um das Bild zu beschreiben, daher ist es besser, so weit wie möglich mehr Informationen zuzuweisen. Verwenden Sie Variationen bei der Zuweisung von Wörtern, was auch aus SEO-Sicht effektiver ist.

Rajesh Magar
quelle