Différence entre alt et titre d'img - lequel utiliser - et impact

Depuis des années, j'écris mon HTML pour des images comme celle-ci:

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

Mais j'ai récemment effectué un audit de mon site à l'aide des outils SEO Raven et il a fait état de nombreuses erreurs qui m'ont vraiment surpris.

Lorsque j'ai parcouru le rapport, 99% de ces erreurs étaient dues au texte manquant du titre de l'image.

Je sais que le texte du titre d'une image peut afficher un peu de pop lorsque vous survolez une image, mais à part cela, quel est le but et cela a-t-il un effet sur le référencement?

De plus, si vous le mettiez en œuvre, que mettriez-vous dedans? Souhaitez-vous simplement mettre les mêmes informations que dans l' altattribut? c'est à direalt="my picture" title="my picture"

— sam
source

"Lequel utiliser" - je ne pense pas qu'il soit question de savoir si vous devez utiliser l' altattribut - c'est obligatoire et vos pages échoueront à la validation sans cela (sauf peut-être dans certains cas marginaux avec HTML5?).

— MrWhite

Est-ce que "Raven SEO" signale une "erreur" pure ou simple, ou un avertissement / un avis?

— MrWhite

@ w3d a signalé un avertissement / avis

— sam

Réponses:

La balise ALT est une balise d'accessibilité qui a été introduite pour les personnes ayant des problèmes de vue, même via Google, afin de déterminer ce qu'est une image.Vous ne devriez jamais envisager de mettre des balises alt à des fins de référencement avant vos visiteurs.

Beaucoup de gens et même Matt Cutts qui travaille chez Google parlent de balises alt comme si elles étaient spécifiquement conçues pour les moteurs de recherche pour informer les bots de l'image, ce n'est tout simplement pas vrai.

Cependant, vous pouvez informer Google de la nature de l'image tout en prenant soin de votre public, ne vous contentez pas de mettre des mots-clés dans la balise alt, cela amortit l'expérience utilisateur et sa très artificielle.

Un bon exemple de cela est que souvent, quelqu'un dit vouloir classer pour le mot-clé 'Bournemouth', il aura Bournemouth dans le titre, dans la méta description H1, puis faire une image avec la balise alt 'Bournemouth'. SEO son amortit l'expérience utilisateur et manque tout le point de la balise alt. La balise alt est destinée aux personnes ayant des problèmes de vue ou désactivant toutes les images. La balise ALT a donc été conçue pour informer l'utilisateur de la nature de l'image.

Un bon exemple de cela peut être vu ci-dessous

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

contre

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

L'exemple ci-dessus inclut toujours votre mot clé tout en expliquant à Google et à votre public en quoi consiste l'image.

Et la balise Title?

La balise de titre a été conçue pour donner plus d'informations lorsque vous survolez un élément, ce n'est pas très utile pour IMG car si vous avez l'intention d'utiliser les mêmes informations pour ALT et TITLE, vous pouvez utiliser un script pour lire la balise alt et faire votre très propres survols en utilisant JS. Je ne recommanderais la balise de titre que si vous allez fournir plus d'informations que celle de la balise ALT, comme une description plus longue - pas besoin de fournir les informations exactes dans les deux éléments, car cela gonfle simplement le code.

La balise de titre est très pratique pour les liens, car en survolant, elle peut donner à votre public plus d'informations sur le lien sur le point de cliquer. Cela vaudra la peine de lire plus sur la balise de titre ici .

— Simon Hayter
source

"si aucun titre n'est trouvé, il lira la balise alt en survol" - L' altattribut n'est utilisé comme "survol" dans aucun navigateur moderne. Seul IE7 et les versions antérieures affichaient le texte alternatif sous la forme d'une info-bulle contextuelle (lorsque l' titleattribut est omis).

— MrWhite

Désolé ce n'est pas ce que je voulais dire. Je veux dire que pour le texte, vous obtenez la balise alt. Pour les survols, il vous suffit d'utiliser un jquery pour lire la balise alt et créer le titre. Pas besoin d'écrire à la fois alt et title s'ils sont les mêmes, ils gonflent simplement votre code.

— Simon Hayter

@ réponse éditée w3d;)

— Simon Hayter

Mais dans la mesure où le titre en termes de titre SEO offre peu de classement, matt cutts parle un peu de titre dans cette vidéo googlewebmastercentral.blogspot.co.uk/2007/12/… mais se concentre davantage sur le tag ALT. Personnellement, je pense que cela peut contribuer à l'expérience utilisateur, mais pas de manière énorme, comme vous l'espérez, des millions de meilleurs sites se classent sans titres sur les images.

— Simon Hayter

Je pensais juste que cela valait la peine d'être clarifié ... les attributs altet titleeux-mêmes ne devraient jamais être "les mêmes", car cela dérouterait les personnes qui utilisent le alttexte pour l'accessibilité. La solution jQuery crée un événement survolé, elle ne copie pas simplement le alttexte dans l' titleattribut.

— MrWhite

altdonne une description alternative de l'image. Cet attribut est requis pour img.

titledonne des informations supplémentaires sur l'image. Cet attribut est facultatif pour img.

Ne vous fiez jamais aux informations title. Si l'information est vraiment importante, incluez-la dans son propre élément.

Ces deux attributs ne doivent pas avoir le même contenu.

— unor
source

Votre confusion est normale et oui, chaque balise (Titre, ALT) représente son propre potentiel qui aide le moteur de recherche et l'utilisateur à savoir de quoi parle l'image.

Un certain temps, le texte ALT ne suffit pas pour décrire l'image, il est donc préférable d'attribuer plus d'informations dans la mesure du possible, utilisez également une variation dans les mots d'attribution, ce qui est plus efficace du point de vue du référencement également.

— Rajesh Magar
source