Utilisez au mieux l'attribut ALT de vos images

Utilisez au mieux l'attribut ALT de vos images

Google se nourrit de mots et surtout de mots-clés, comme tous les moteurs de recherche. Pourtant, il ne faut pas négliger, dans une perspective de référencement naturel optimisé (Search Engine Optimisation ou SEO), l'importance des images.

En plus du texte qui est autour de vos photos, Google tente de « lire » toutes les images de votre site. Pour l'instant, l'algorithme d'analyse d'images sur le web reste un peu aléatoire mais progresse à grande vitesse, notamment grâce aux balises HTML « alternative text » associées à des techniques de deep learning.

Intégrer cette balise, ou plutôt, pour être précis, cet attribut ALT text, permet non seulement de proposer un texte alternatif lorsque la photo ne s'affiche pas mais aussi, et c'est ce qui nous intéresse ici, de booster sa stratégie de référencement naturel. Penchons-nous sur ce fameux « alt text » ou texte alternatif.

Les intérêts d'un texte alternatif

La balise HTML img d'une image doit être enrichie par ce fameux « alt text ».

L'opération est assez aisée, il suffit de glisser une ligne de code toute simple qui fait apparaître l'attribut ALT. Pas besoin d'être un spécialiste en langage HTML : la plupart des CMS (1) comme Wordpress permettent, dans le menu qui s'ouvre lorsqu'on importe une photo, de compléter facilement l'attribut ALT.

Exemple : votre photo s'appelle

canard.jpg
, sa balise HTML est :
<img src="canard.jpg">
Pour l'affichage d'un texte alternatif, il suffit de rajouter l'attribut ALT : <img src= « canard. jpg » alt= « canard super joli » >

Si l'internaute a des soucis de connexion, qu'il a configuré son navigateur pour ne pas afficher les images ou que son téléphone a du mal à gérer leur affichage, le texte « canard super joli » pourra être lu à la place de l'image, dans un cadre blanc avec une petite croix rouge en haut à gauche. Le texte apparaît aussi lors du téléchargement de l'image si celui-ci est long.

Si cette balise peut sembler anodine au premier abord, il n'est rien en réalité.

Imaginez une icône « Téléchargez le fichier » qui ne s'affiche pas... Personne ne saura qu'il faut cliquer à cet endroit pour télécharger votre... catalogue de superbes photos de canards. Et quand on dit personne, il faut bien sûr inclure les moteurs de recherche. Google et ses concurrents ne lisent pas une page internet comme vous, mais ils analysent leurs codes sources : HTML, XML, etc. Si l'image n'a pas d'attribut ALT, c'est comme si elle n'existait tout simplement pas.

Autre intérêt et non des moindres : dans un souci d'accessibilité optimale, cette balise sert avant tout aux malvoyants, dyspraxiques ou dyslexiques. Le logiciel de lecture d'écran retranscrit à l'oral, ou sur un afficheur en braille, ce qui est écrit dans cette balise HTML.

Vos attributs ALT doivent donc être présents sur toutes vos images, sur toutes vos pages, c'est une obligation autant en profiter pour les optimiser dans une perspective SEO.

La petite robe vert (canard) de J-LO

Voici une histoire dont le web est friand, quasiment une légende. Google Images serait né de l'avalanche de requêtes autour de la robe portée par Jennifer Lopez lors des Grammy Awards en 2000. Ou plutôt de la photo de la star portant cette robe.

Il faut dire que cette jolie robe verte est disons... bien portée et qu'elle a fait couler beaucoup d'encre. Le lendemain, les recherches autour de « J-Lo dress » font exploser les compteurs de Google.

Or le moteur de recherche à l'époque ne permet pas de répondre à une requête aussi précise sur une image.

Devant l'avalanche de recherche de J-Lo en photo, Eric Schmidt, ancien PDG de Google, et ses équipes prennent conscience que les utilisateurs de Google veulent plus que du texte dans les SERP (pages de résultats) qui leur sont proposés. (2)

Ainsi est né Google Images qui se nourrit, tout d'abord, des attributs ALT TEXT, pris dans les filets de ses robots de recherche. Du coup, les webmasters férus de référencement naturel en profitent pour optimiser le contenu sémantique de ces balises et truster ainsi les premières places des pages de résultats du moteur de recherche.

Vous le savez, pratiquer le référencement naturel, ou SEO, sur son site ou blog, a pour but d'acquérir une meilleure visibilité sur Google, une plus grande notoriété sur les moteurs de recherche. Avec pour objectif final, si vous vous occupez d'une entreprise commerciale ou de marketing, vous amener plus de clients.

Si on trouve souvent des start-up ou entreprises spécialisées SEO proposant du contenu optimisé - comprenez des textes - peu d'entre elles s'occupent des images.

C'est une erreur, car Google analyse l'ensemble de la page avant de lui donner une note. En plus des balises TITLE ou META, de tous les textes, des URL, les fameux attributs ALT sont bien sûr eux aussi « scannés ». Voyons donc comment optimiser vos attributs ALT.

Le Seo « spécial photo »

Première étape : le nom de la photo

Avant tout, surtout ne pas oublier de renommer toutes vos images.

Le nom de l'image doit déjà être optimisé pour faciliter votre référencement sur internet. Souvent le fichier de l'image « brute » n'a pas sa place sur un site web. Vous avez un peu renforcé sa netteté, l'avez recadrée, etc. Et surtout vous l'avez réduite pour accélérer son chargement, un fichier trop lourd à charger va non seulement pénaliser les internautes ayant une faible connexion mais aussi faire baisser le pagerank de la page.

Vous allez bien sûr ensuite l'enregistrer dans un format d'image conçu pour le web : jpg, png ou gif. Profitez-en donc pour changer systématiquement son nom et enlever la suite de chiffres et de lettres issus de l'appareil photo. Cette étape est indispensable, c'est pourquoi notre photo de canard, dans notre exemple, s'appelle « canard ». Cela peut paraître anodin, mais c'est la base sur laquelle votre réflexion sur le référencement naturel va se faire.

Rappelons quelques règles pour nommer une image : pas de majuscules ou autre caractère bizarre (accents, espace, ponctuation, etc), et un tiret haut entre les mots « - ». On pourrait, dans notre exemple, appeler notre image « joli-canard. jpg ».

Il est inutile, voire contre-productif, de donner un nom très long et très précis « photo-d-un-joli-canard-que-je-vends-pas-cher. jpg » car l'attribut alt sert justement à fournir la description de la photo.

Donc, en reprenant l'exemple d'un site marchand proposant des photos de canards, il faut d'abord optimiser le titre en précisant le contenu de l'image. Le nom « canard-pomeranie. jpg » indiquera déjà l'espèce présente sur la photo.

Où mettre l'image ?

Pour plus de commodité, il faut enregistrer votre image dans le même répertoire que le fichier HTML. Dans ce cas, l'attribut src sera simplement le nom du fichier. Si le nombre d'images est important, vous pouvez créer un fichier spécial. Dans ce cas-là, il peut être primordial de créer un sitemap spécial « images ». Ce qui facilitera notamment une meilleure prise en compte par Google Images de celles-ci. (3)

Autour de l'image

L'attribut TITLE de la photo (à ne pas confondre avec la balise Title de la page) permettra à un petit texte d'apparaître lorsque la souris de l'internaute survolera l'image. Cette balise peut être renseignée lors de l'importation de la photo dans le cadre de l'utilisation d'un CMS comme Wordpress. Si cette balise « title » n'a aucun impact sur le référencement, elle peut être bien pratique pour l'internaute.

La légende, en revanche, est bien un texte, donc, comme tous les textes de votre page, elle pourra être analysée par les moteurs de recherche. Il faut d'ailleurs, avant de se pencher sur l'attribut ALT, bien gérer tout ce qu'il y a autour de l'image : textes, légendes, etc. Car il va falloir penser en termes de SEO et donc trouver un certain équilibre entre les informations et les mots-clés.

Passons maintenant à la balise alt text.

Pour les images décoratives qui n'apportent rien au contenu (fond de page par exemple), la plupart sont gérées en CSS (4). Elles n'ont aucun intérêt, ni dans l'accessibilité, ni pour le côté SEO. Elles n'auront pas besoin de texte alternatif ni d'optimisation pour le référencement sur le web.

Pour les autres images, la base du référencement naturel est surtout d'éviter le keyworld stuffing, c'est-à-dire de multiplier les mots-clés, une pratique pénalisée par Google. On évitera par conséquent les balises à rallonge : « vente photo canard images canard joli belle photo de canard achat image, etc. » Inutile de dire que Google et ses robots malins ne se laisseront pas avoir.

Comme dans toute recherche de mots-clés, il faudra comme on l'a dit plus haut trouver le juste équilibre non seulement dans le nombre de mots introduits dans la balise mais aussi dans leur intérêt sémantique. Les mots-clés généralistes style « joli canard » n'apporteront rien ou seront en compétition avec des centaines de sites ayant un plus fort impact que le vôtre ou une démarche marketing plus efficace.

Au contraire, être précis sur la description de l'image du canard s'avère payant. <img src= « canard-pomeranie. jpg » alt= « photo de canard de Poméranie nageant sur l'eau d'un lac au soleil couchant » > On intègre dans cette balise ci le mot « photo » car le site vend des photos, il est inutile de le mettre autrement : Google sait que c'est une image ou une photo, l'internaute aussi.

Les moteurs de recherche analysent l'ensemble des éléments de la page comme un tout. On peut alors profiter de cet espace d'information pour y introduire d'autres mots-clés que ceux du texte principal comme des mots de longue traîne... Ou l'inverse.

La longue traîne comprend des mots très spécialisés, très précis, des synonymes peu usités. S'ils rapportent moins de vues, ils seront moins concurrentiels. La personne cherchant une photo de canard de Poméranie trouvera plus facilement son bonheur sur votre site.

Sur la page vendant des photos d'un canard de Pékin, on peut introduire dans l'attribut ALT le nom savant de celui-ci : Anas Platyrhynchos domestica ou celui moins usité de pékin-américain.

Cela donnera tout simplement : <img src= « canard-pekin. png » alt= « photo de canard pékin américain » >

Ou si on veut aller plus loin : <img src= « canard-pekin. png » alt= « photo de canard de Pékin américain nageant sur l'eau d'un lac au soleil couchant » > Ne vous inquiétez pas pour la longueur de cet attribut ALT, en règle générale on peut aller jusqu'à plus de 125 signes. Au-dessus de cette limite les logiciels liseurs d'écran arrêtent la lecture. Et tant qu'à mettre autant de mots-clés dans le fichier ALT autant les intégrer dans un article à part.

Le nombre d'internautes faisant cette demande sur les moteurs de recherche sera infime... mais ils viendront tous sur votre page ! En marketing, cette technique de niche s'avère payante : les surfeurs pointilleux savent ce qu'ils cherchent et ça tombe bien, ça correspond à vos produits ! Votre position dans les SERP sur ces mots là sera ainsi excellente.

On peut bien sûr jouer sur les deux tableaux : équilibrer entre mots-clés principaux et de longue traîne sur les textes de la page et les balises alt de l'image.

En premier : mots-clés ou photos... ou alt text ?

Attention toutefois, notre exemple a ses limites : il fonctionnera très bien... pour un site vendant des photos de canards et des images en général. Les textes autour seront courts et les balises alt truffées de mots-clés de longue traîne. Votre site parlera certainement d'autres choses et, là, se pose la question du choix des images.

Ce triptyque : images/mots-clés/attribut ALT doit être réfléchit pour être le plus percutant possible en intégrant dans vos réflexions le contexte, les textes autour. En premier, il faut comme toujours mettre en forme vos listes de mots-clés généralistes ou de longue traîne. Ensuite viendra le choix des images ou photos. Elles devront être toujours en relation avec le contexte, le but de votre page, et intégrer les mots-clés choisis dans la balise ALT.

Vous aurez donc une cohérence entre toutes les parties de votre page web. Une cohérence qui ravira les internautes mais aussi les moteurs de recherche.

Certains webmasters laissent souvent les attributs alt vides : alt= « » (attention à ne pas mettre d'espace entre les guillemets) lorsque l'image n'apporte rien de plus au texte. C'est surtout dans un souci d'accessibilité : ne pas trop polluer la lecture des informations par les logiciels de lecture d'écran. En termes de SEO, c'est un manque à gagner certain.

N'oubliez pas : il faut gérer en amont l'ensemble de la page. Si l'attribut ALT d'une image n'apporte rien de plus aux textes autour, autant changer d'image... ou de texte. Dans tous les cas, remplir au minimum l'attribut ALT paraît une bonne idée, même si les mots choisis sont un peu redondants.

Quand l'image pointe vers un lien.

Inutile bien sûr d'encombrer la balise alt avec des mots comme : « lien vers », « cliquez ici » ou autre. Préciser juste l'information : <... alt= » article Wikipédia sur le canard de Poméranie » >.

Ne pas oublier les images fonctionnelles

Comme on l'a vu plus haut, un bouton « télécharger le fichier » ou « contact » a son importance dans un site web, encore plus pour un site marketing ou de e-commerce.

Ces boutons, logos et autres images illustrant vos pages ou des liens doivent aussi avoir leur balise alt, même si celle-ci reste simple : « télécharger catalogue photos canard », « email de contact ». On peut reproduire aussi dans le ALT, le TITLE du lien pour garder une cohérence.

Un header (haut de page) totalement pris par votre logo ou slogan n'est pas efficace en termes de SEO. Cette partie supérieure de la page est primordiale car analysée en profondeur par les moteurs de recherche : elle doit donc contenir vos mots-clés principaux.

Si vous optez pour un menu de navigation graphique sur votre site, sachez que Google ne va pas l'analyser finement, il faut alors bien introduire les balises ALT sur toutes les images du menu en précisant la cible du lien.

Dans tous les cas, évitez comme la peste le texte inséré dans une image, qui n'a aucun intérêt, et peut être géré (polices, taille, décorations, etc) autrement dans un CMS.

Si vous êtes férus d'animations en gif, il est quasi obligatoire d'inscrire dans la balise ALT l'ensemble du contenu du texte, dans un pur souci d'accessibilité. Si celui-ci est un peu long, il faudra introduire un attribut longdesc (description longue) pointant vers un lien reprenant l'ensemble du texte.

Pour les images décoratives comme les bordures, un attribut ALT vide est recommandé, plus dans un souci d'accessibilité. L'attribut alt= « », toujours sans espace entre les guillemets, ne viendra pas polluer le surf d'une personne malvoyante.

Un pari gagnant

En conclusion, le référencement naturel de votre site web peut être affiné et boosté grâce aux attributs ALT de vos images. Mais, comme pour toutes les techniques SEO, il ne faut pas se précipiter et tout prévoir en amont, en cherchant un équilibre efficace sur l'ensemble du site et de chaque page.

Cela peut paraître fastidieux, surtout si vous avez beaucoup d'images, mais l'impact SEO de l'ensemble du contenu fait partie d'une stratégie gagnante sur le long terme. Affiner le combo gagnant : article-image-balise ALT vous permettra aussi d'avoir un vision globale et précise de votre page, de votre site. Une fois ce travail fait en amont toute modification sur votre site sera facilitée, vous aurez déjà fait le plus gros du travail.

Et vous pourrez toujours ajuster les attributs ALT une fois votre site en ligne après analyse de votre trafic. C'est souvent plus facile que de ré-écrire un article.

(1) https://www.project-syndicate.org/commentary/google-european-commission-and-disruptive-technological-change-by-eric-schmidt-2015-01#yMSC5IlY7sHATDCO.99

(2) CMS : logiciels de gestion de contenu (Content management system), comprendre ici les logiciels en ligne proposant de concevoir un site web ou un blog aisément. Les offres gratuites les plus connues sont Wordpress, DotClear, Joomla, Drupal...

(3) https://support.google.com/webmasters/answer/178636?hl=fr

(4) CSS : cascading style sheets ou feuilles de style en cascade. Langage informatique permettant de gérer la mise en forme automatique des fichiers HTML ou XML pour les pages web. Le CSS est souvent utilisé comme une toile de fond qui règle l'esthétique d'un site : fonds de pages, couleurs et tailles des textes selon leur emplacement, etc. Le CSS permet aussi d'optimiser l'affichage d'un site internet sur les téléphones portables.

Il paraît qu'on ne mord pas... 😉