Référencement des images et attributs alt et title

I. Référencement des images, pourquoi ?

Parce qu'un dessin vaut souvent mieux qu'un long discours, d'autant plus par écrit, le référencement des images sur un site web est un élément à prendre en compte lorsqu'on l'on pense à sa stratégie de référencement. Nous allons ici voir comment correctement référencer ses images et quelles balises utiliser.

Il arrive parfois que certaines requêtes Google affichent en première ligne de proposition des images, un bon référencement d'image sur votre site permettra par exemple à vos images d'apparaitre à cet endroit :

referencement-images-seo-01-600x491
Affichage des images dans une page de résultat Google.

Cela touche bien sûr également les images que l'on trouvera dans la section "Images" des moteurs de recherche tel que Google ou Bing. En plus d'être potentiellement directement trouvé dans les moteurs de recherche, ce qui amènera in fine à votre page et votre site web, le bon référencement des images au sein d'une page pourra également être profitable à la page elle-même où sont situées ces images. En effet, les images d'une page sont une composante comme une autre et doivent donc être prises en compte dans le référencement de cette page ou du site.

Il faut savoir que les formats d'images les plus courants sur le net sont les formats .png (Portable Network Graphics), .jpeg (Joint Photographic Experts Group) et .gif (Graphics Interchange Format) bien que d'autres formats existent et soit également présents sur le net. Les principaux moteurs de recherche comme Google, Bing et Yahoo! font l'effort de référencer également les autres images, mais les autres moteurs de recherches privilégies pour la plupart ces trois formats qui sont donc les plus répandus.

II. Les balises alt et title

La question la plus courante à propos du référencement des images par les moteurs de recherche est le rôle des attributs "ALT" et "TITLE" que l'on ne sait pas toujours comment remplir. Nous allons ici voir leur rôle dans l'expérience utilisateur et pour les crawlers des moteurs de recherche.

La balise ALT

La balise ALT possède deux utilités principalement. La première est pour les utilisateurs qui sont dans l'impossibilité de télécharger ou d'afficher l'image en question. En effet lorsque la vitesse de connexion ne le permet pas ou lorsque des systèmes de protection sont en place interdisant l'affichage des images (ce qui est rare de nos jours), c'est le contenu de la balise ALT qui va s'afficher plutôt que l'image elle-même. Le rôle le plus important de la balise alt en ce qui nous concerne, c'est le fait que son contenu soit utilisé par les robots des moteurs de recherche pour indexer l'image en question

La balise TITLE

La balise Title a plus vocation a satisfaire l'expérience utilisateur, mais est très peut prise en compte lors du référencement. En effet, le contenu de la balise "TITLE" sera affiché lors du passage du curseur du visiteur sur l'image en question, comme l'exemple suivant :

balises-title
Vue de la balise TITLE par un utilisateur lors du passage du curseur

La balise "TITLE" a donc plus pour vocation de guider l'utilisateur sur ce qu'il voit plutôt que d'aider les robots des moteurs de recherche.

Dans WordPress, ces deux balises peuvent être gérées très simplement en cliquant sur l'icône de modification d'une image :

referencement-images-seo-011-600x398
Vue de la configuration des balises ALT et TITLE dans l’édition d’image WordPress

On retrouve dans le cadre vert pomme la balise "ALT" qui correspond donc au texte alternatif et dans le cadre vert foncé la balise "TITLE". Lorsque l'on regarde  du côté du code HTML cette fois-ci (pour la même image qui est celle que vous trouverez tout en haut de cet article), voici ce que l'on peut voir :

balises-alt-title-html-600x75
Vue du code HTML lors de la présence de balises TITLE et ALT correctement remplies

À nouveau, on peut remarquer la présence de la balise "TITLE" en vert foncé avec son contenu qui sera vu par l'utilisateur passant son curseur sur l'image ainsi que la balise "ALT" qui sera utilisée par les moteurs de recherche et les utilisateurs ne pouvant par télécharger l'image.

III. Autres éléments importants

D'autres éléments sont également à prendre en compte lorsque l'on souhaite mettre en place un bon référencement de ses images.

Le nom de l'image

Le nom que l'on donne à nos images est l'élément le plus important parmi ceux pris en compte par les moteurs de recherche. En effet, il semblerait que ce soit l'élément le plus déterminant dans le référencement de celles-ci. Il faut donc y prêter une attention certaine et éviter à tout prix les "IMAGE_tuto_3_01","IMAGE_tuto_3_02",etc. Il faut en effet plutôt privilégier une nomenclature basée sur les mots clés (qui se rapproche du contenu de la balise ALT).

De plus, il est préférable d'aller au plus simple et d'utiliser uniquement des minuscules sans accents pour ne pas gêner le travail des robots des moteurs de recherche. Pour séparer les mots, on préférera également un tiret " - " plutôt qu'un underscore " _ " qui n'est pas considéré comme un élément de séparation de mot par les crawlers. Pour avoir des exemples d'images correctement nommées :

casque-beats.png
fenetre-windows-copier-coller.jpeg
configurer-wordpress-url.png

On évitera également d'y placer des "stop words", aussi appelées "mots vides"

La légende ou le texte associé

 La légende de l'image, ou plutôt le texte environnant l'image au niveau du code HTML peut également avoir une importance dans le référencement des images dans le sens ou les robots des moteurs peuvent associer ce texte à l'image. En effet, il arrive souvent que l'on mette une image dans article puis que l'on explique ce que cette image montre : "Nous voyons par exemple dans cette image ....". Dans WordPress, un espace "Légende" permet de fixer cette zone et la lier plus directement à l'image en question  :

legende-referencement-image-600x131
Vue de la modification et de l’application de la Légende sous WordPress

La légende ou le texte associé a donc un rôle dans le référencement des images, mais également dans l'expérience de l'utilisateur, car cela permet d'expliquer une image plus facilement avec une mise en forme déjà faite (sous WordPress du moins !).

Le poids de l'image

Le dernier élément que je présenterais ici est le poids de l'image qui a une importance cruciale pour son référencement, mais également pour le référencement global de la page dans laquelle elle se situe. En effet, une page ou une image longue a chargé (car trop lourd en poids) sera dévaluée par les moteurs de  recherche, car allant à l'encontre de l'expérience utilisateur qui sera d'ailleurs elle aussi moins bonne qu'avec des images optimisées. Ainsi il faut savoir faire un compromis entre la taille d'une image et sa qualité visuelle pour ne pas diminuer l'expérience utilisateur. Notamment pour les articles et les pages contenant des dizaines d'images comme les pages d'accueil.

Le référencement des images est un travail fastidieux, car il nécessite une attention supplémentaire sur la rédaction et la structure des pages et des articles. Néanmoins, il est nécessaire de bien remplir les champs nécessaires et de correctement formater ces images pour rester cohérents lorsque l'on met en place une stratégie de référencement. Pour finir, il est à noter que les images ayant une présence purement décorative comme les puces et les bannières peuvent tout à fait contenir une bannière ALT vide, car leur référencement n'a pas d'importance et pourrait fausser le référencement des pages dans lesquelles elles se trouvent.

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Mickael Dorigny

Co-fondateur d'IT-Connect.fr. Auditeur/Pentester chez Orange Cyberdéfense.

Nombre de posts de cet auteur : 521.Voir tous les posts

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.