Formations référencement & webmarketing
17/05/2011

Attributs d'images, SEO et accessibilité

 
1 commentaire

 

 

Le sujet de l'optimisation des images pour le référencement est généralement bien connu, mais quand on se penche sur les détails, certains doutes peuvent surgir :

  • Comment exploiter l'attribut alt ?
  • Faut-il utiliser l'attribut title ?
  • Qu'en est-il de name et longdesc ?

A quoi servent les différents attributs ?


Alt : cet attribut permet de renseigner un texte alternatif à l'image. Ce texte s'affiche à la place de l'image pendant le chargement de la page web, tant que l'image n'est pas encore affichée ou si le navigateur est paramétré pour ne pas afficher les images.

 

<img src="mon-image.jpg" alt="Chutes du Niagara sous la neige" />

 

Title : tout comme l'attribut alt, title sert à compléter l'image au moyen d'un texte ou titre descriptif. Cependant, dans certains navigateurs, le contenu de title ne s'affiche pas à la place de l'image lorsque celle-ci n'est pas visible. Par contre, son contenu s'affiche dans une bulle lors du survol de l'image par la souris.

 

<img src="mon-image.jpg" title="Chutes du Niagara sous la neige" />

 

Name : il s'agit d'un attribut destiné à la programmation. Il sert à donner un nom à l'image, pas un texte long, afin de trouver et "manipuler" l'image dans le code HTML, au moyen d'un script en Javascript par exemple.

 

<img src="mon-image.jpg" name="img1" />

 

<script language="javascript">
document.getElementByName("img1").style.display = "none";
</script>

 

Longdesc : l'attribut longdesc sert à définir l'url d'une page HTML contenant une description longue de l'image. Il était destiné à l'origine à founir un contenu devant être lu par les synthétiseurs vocaux utilisés par les malvoyants. Dans les faits, il est très peu ou mal utilisé par les webmasters, et très peu de navigateurs web l'interprètent (ci-dessous, une copie d'écran dans le navigateur Opera montre l'accès vers l'url de description longue).

 

<img src="mon-image.jpg" longdesc="/description-image.html" />

 

 

Les attributs d'images et le SEO


D'après les explications ci-dessus, on comprend que le rôle de l'attribut name n'a aucun rapport avec le contenu de la page ni avec l'optimisation pour les moteurs de recherche. Inutile donc, dans une démarche SEO, de l'utiliser.

 

Que dire de l'usage de longdesc ? L'url renseignée dans l'attribut longdesc n'est pas lue ni traversée par les moteurs de recherche. Même si elle peut servir dans un contexte d'accessibilité, il existe toutefois une meilleure solution pour associer une image à une longue description : un lien hypertexte placé dans le contexte immédiat de l'image (par exemple sous l'image). Le texte d'ancre du lien hypertexte, qui doit être optimisé avec des mots-clés, fournit un contenu auquel l'image est associée, et l'url de destination est visitée par les moteurs de recherche ET les synthétiseurs vocaux.

 

Restent les attributs alt et title. Une chose est sûre : l'attribut alt est celui qu'il ne faut surtout pas omettre. Celui-ci est bien lu et compris des moteurs de recherche, et est même considéré comme un élément important pour le référencement des images (voir l'article de Google Using ALT attributes smartly). Ceci est assez logique car les moteurs de recherche ne voient pas les images ; ils lisent donc le texte alternatif.

Un bon usage est de rédiger contenu de l'attribut alt par une phrase descriptive d'une dizaine de mots, comprenant bien sûr des mots-clés en lien direct avec le contenu de l'image. Pas question de faire une liste de mots-clés. Etant donné que le contenu de l'attribut alt n'est généralement pas affiché à l'écran (sauf si l'affichage des images est désactivé), il peut être intéressant d'utiliser des variantes d'écritures, par exemple en exploitant des mots-clés sans leurs accents ; ce faisant, c'est un moyen de cibler un variété plus large de requêtes d'internautes (longue traîne).

Toutes les images du site doivent-elles fournir un texte alternatif ? Non. Certaines images, en effet, n'ont qu'un rôle graphique et ne participent pas au contenu. C'est le cas, par exemple, des petites images d'angles arrondis, des icônes de navigation, des éventuels dégradés de fond de page ou de boutons, ... autant d'images qui ne méritent pas d'être trouvées dans une recherche d'images. Dans leur cas, le mieux est de renseigner un attribut alt vide (alt="") ; l'attribut n'est donc pas manquant, mais il n'interfère pas avec l'optimisation de la page.

 

En ce qui concerne l'attribut title, rien ne prouve qu'il soit exploité par les moteurs de recherche pour le référencement. Il n'est d'ailleurs pas réservé aux images, mais aussi aux liens href, au listes ul, aux tables, ... bref, à presque tous les éléments de marquage HTML. Il n'est toutefois pas complètement inintéressant car, comme expliqué plus haut, son contenu est affiché à l'écran au survol de l'image par la souris. S'il est exploité, il doit donc être rédigé soigneusement pour fournir aux internautes des renseignements instructifs associés à l'image.

 

 

Nous aidons des entreprises, associations et freelances à améliorer leur visiblité sur le web, au moyen de prestations de conseil, d'audits et de formations.

Contactez-nous pour voir comment nous pouvons vous aider aussi !

 

 


1 commentaire


Eloise Achat
vendredi 17 février 2012

pour l'attribut title, il est aussi pris en compte par les moteurs de recherche, meme si a la base il sert aux programmeurs. Nous avons fait des tests sur des mots clefs que nous inventions, et dont la presence n'etait que sur cette balise... et donc nous sommes sur que google en tiens compte. Je n'ai pas d'idee sur le niveau d'importance de ce critere, mais autant l'optimiser quand on en a l'occasion.





Déposer un commentaire


Recommandations pour les commentaires :
  • Si vous renseignez l'adresse de votre site web, le lien vers le site est en DoFollow. C'est un avantage pour vous, mais tout abus entraînera la suppression du lien ou du commentaire.
  • Tout commentaire injurieux, obscène, agressif, grossier ou contenant des attaques personnelles sera supprimé sans notification préalable.
  • Le code HTML n'est pas autorisé.
  • N'utilisez pas les commentaires pour faire votre publicité. Ne commentez que pour alimenter et enrichir la discussion.

Nom *


Email (non publié) *


Site web


Commentaire *