Textes alternatifs et noms de fichiers : guide pratique du SEO des images

Texte alternatif, nom de fichier et légende ont des rôles différents

En préparant une image, vous pouvez rencontrer plusieurs champs qui semblent demander la même chose. Chacun a son rôle : le nom identifie le fichier, le texte alternatif explique l’image aux personnes qui ne la voient pas, et la légende s’affiche à côté pour tous les lecteurs.

Le texte alternatif est enregistré dans la page, généralement dans l’attribut alt. Il n’est pas contenu dans le fichier JPG ou PNG. Un lecteur d’écran, logiciel qui lit le contenu à voix haute ou le restitue en braille, peut utiliser cette description. Consultez l’explication de MDN sur l’attribut alt.

La même photo peut nécessiter des descriptions différentes selon son emplacement. Sur une fiche produit, l’anse et la finition peuvent compter. Dans un article sur la photographie des surfaces réfléchissantes, le reflet dans l’émail peut être l’essentiel. Décrivez ce qui importe au lecteur de cette page.

Déterminez ce que le lecteur attend de l’image

Demandez-vous ce qui manquerait si l’image était indisponible. Montre-t-elle un détail du produit, une étape, des mots importants ou le seul intitulé d’un lien ? Ou embellit-elle simplement la page ? L’arbre de décision du W3C pour le texte alternatif aide à choisir selon le rôle de l’image.

• Image qui apporte des informations : décrivez le détail nécessaire au lecteur.
• Lien ou bouton sans autre intitulé : expliquez sa destination ou son action.
• Décoration : laissez le texte alternatif vide si elle n’apporte aucune information nécessaire et ne sert ni de lien ni de commande.
• Graphique ou schéma détaillé : résumez ce qu’il montre, puis donnez les détails dans le texte voisin ou un tableau.

Imaginez une tasse photographiée sur un bureau. Sur sa fiche de vente, sa forme et son apparence sont utiles. Derrière un formulaire d’inscription à une newsletter, la même photo peut être décorative. L’essentiel est la raison de sa présence.

Rédigez une description utile dans un langage simple

Commencez par le sujet, puis ajoutez le détail utile. Une vue latérale de sac à dos peut montrer une bouteille dans une poche en filet. Sur une fiche produit, c’est plus utile que la liste de toutes les couleurs visibles.

Restez centré sur l’essentiel. Le fond, l’angle de prise de vue et l’éclairage ne sont nécessaires que s’ils éclairent le sens de l’image. Les conseils du W3C sur les images informatives expliquent comment décrire l’information utile sans tout énumérer.

Ce sont des exemples, pas les descriptions des images de cet article. Pour vos images, vérifiez que chaque détail est réellement visible. N’inventez ni matériau, modèle, lieu ni caractéristique pour rendre la description plus complète. Une photo de chaise marron ne prouve pas qu’elle est en cuir.

Lisez la description avec les phrases avant et après l’image. Ajoute-t-elle quelque chose ou répète-t-elle inutilement le texte ? Adaptez-la à la page entière. Si la légende explique déjà tout l’apport de l’image, évaluez la nécessité d’une description distincte. Gardez dans le texte alternatif les détails utiles absents de la légende.

Laissez le texte alternatif vide pour les images décoratives

Un ornement près d’un titre ou une illustration de fond peut simplement embellir la page. Sans information nécessaire, donnez-lui un attribut alt vide : alt="". Le lecteur d’écran peut alors l’ignorer. N’omettez pas l’attribut : certains lecteurs risquent de lire le nom du fichier. Consultez les conseils du W3C sur les images décoratives.

<img src="/images/ornement-jaune.svg" alt="">

N’écrivez pas « image décorative » comme description. Cela ajoute une annonce sans information utile. Un attribut vide signifie qu’aucune description ne sera annoncée.

Attention aux images qui semblent décoratives mais contiennent la seule version d’une information importante. Une bannière avec une remise et sa date de fin n’est pas une simple décoration si ces détails manquent dans le texte. Écrivez l’offre sur la page ou incluez son message dans le texte alternatif. Une icône d’erreur exige aussi une explication écrite si elle est le seul signal d’un problème.

Décrivez le but des liens et boutons composés uniquement d’une image

Quand une image est le seul contenu d’un lien, son texte alternatif doit indiquer la destination. Pour un bouton-image, décrivez l’action. « Rechercher » explique le bouton de recherche ; « Loupe » ne décrit que sa forme. Les conseils du W3C sur les images fonctionnelles expliquent ces cas.

Supposons que le logo soit le seul contenu du lien vers l’accueil de la boutique. « Accueil de la boutique North Shore » donne un intitulé utile. Décrire précisément la vague du logo ne dit pas où mène le lien.

Si le même lien contient déjà un texte visible et clair, l’image qui l’accompagne peut souvent avoir un texte alternatif vide pour éviter la répétition. Cela dépend des informations importantes qu’elle apporte en plus. Examinez l’image et le texte du lien ensemble.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="Accueil de la boutique North Shore">
</a>

Dans une galerie produit, pensez à l’action de chaque vignette. « Voir la poche latérale du sac à dos » peut être plus utile que répéter le nom du produit partout. La galerie peut séparer les intitulés des boutons des descriptions d’images. Vérifiez que chaque commande a un intitulé clair dans la galerie publiée.

Traitez les graphiques, captures et textes dans les images

Un graphique peut contenir trop d’informations pour une seule phrase. Présentez brièvement son sujet, puis ajoutez résultats et valeurs dans un texte proche ou un tableau accessible sans voir le graphique. Les conseils du W3C sur les images complexes présentent ces approches.

Imaginez un graphique comparant le poids de trois exports d’une photo. Le texte alternatif peut annoncer une comparaison de tailles, tandis qu’un tableau donne chaque format et son poids. Le résultat doit être compréhensible sans interpréter les hauteurs des barres. Utilisez les mesures réelles et précisez qu’elles concernent cette photo.

Pour une capture de tutoriel, décrivez le réglage ou l’étape qu’elle explique. Indiquer où se trouve le réglage de qualité peut aider, mais écrivez aussi l’instruction dans la page. Si plusieurs libellés sont indispensables, incluez-les dans les instructions plutôt que de cacher une longue procédure dans le texte alternatif.

Si une image contient un court texte important absent ailleurs, incluez ces mots dans son texte alternatif. Pour un passage long, placez le contenu directement sur la page. Notre guide d’export Canva explique pourquoi titres et boutons importants fonctionnent mieux comme contenu de page que dans une image téléchargée.

Choisissez des noms de fichiers courts et descriptifs

Google recommande des noms courts et descriptifs, qui donnent un petit indice sur le sujet de l’image. Le texte alternatif et la page environnante contribuent aussi à sa compréhension. Cela ne justifie pas d’accumuler des requêtes dans le nom. Consultez les conseils de Google sur le SEO des images.

Nommez d’abord le sujet, puis un détail utile ou la vue. Dans une galerie produit, sac-a-dos-vert-poche-laterale.webp est plus reconnaissable que IMG_4821.webp. Ajoutez une référence produit si elle aide à distinguer des articles similaires. N’ajoutez une année que si elle identifie réellement l’image.

Pour un système simple, utilisez des mots en minuscules séparés par des tirets. Cela facilite le rangement, sans garantir de meilleur classement. Gardez la bonne extension : remplacer .png par .jpg dans le nom ne convertit pas l’image. Utilisez un convertisseur pour changer de format.

Renommez les fichiers avant l’envoi si possible. Si le renommage d’une image publiée change son adresse, les pages utilisant l’ancienne risquent de perdre l’image. Mettez-les à jour et redirigez l’ancienne adresse si nécessaire. Ne renommez pas une bibliothèque fonctionnelle seulement pour ajouter des mots-clés.

Ajoutez la description à l’image de la page

Dans l’éditeur du site, cherchez un champ « texte alternatif » ou « alt ». Enregistrez et vérifiez la page publiée. Modifier titre, légende ou nom dans la médiathèque ne change pas forcément le texte alternatif de la page. Les éditeurs et modèles traitent ces champs différemment.

Si l’éditeur propose le champ adapté, vous n’avez pas à écrire du HTML. Pour une modification directe du code, voici une image informative simple :

<img src="/images/sac-a-dos-vert-poche-laterale.webp"
     alt="Sac à dos vert avec une bouteille d’eau dans la poche latérale en filet">

Vérifiez la page après l’enregistrement. Sur ordinateur, inspectez l’élément image et cherchez sa valeur alt. Un outil d’accessibilité peut détecter les attributs absents, mais pas juger de façon fiable l’utilité d’une description. Lisez-la vous-même avec le contenu de la page.

Sur un site multilingue, rédigez la description dans la langue de la page. Traduisez naturellement le sens plutôt qu’une liste anglaise de mots-clés. Le même fichier peut avoir une description différente sur chaque page, car chacune stocke son propre texte alternatif.

Exemple : décrire utilement une photo de produit

Vous ajoutez la photo d’une poche latérale à la fiche d’un sac à dos vert. Le but est de montrer comment une bouteille y tient, pas de répéter toute la fiche technique.

1. Choisissez la vue utile. Prenez une photo où la bouteille et la poche sont claires. Ne décrivez pas un détail caché.
2. Préparez le fichier. Recadrez les espaces inutiles et choisissez des dimensions qui gardent la poche visible dans la galerie. Pour l’ensemble du processus, suivez notre guide des images produit.
3. Nommez le fichier final. Utilisez par exemple sac-a-dos-vert-poche-laterale.jpg avec une extension correspondant au vrai format enregistré.
4. Ajoutez un texte alternatif adapté à la page. Décrivez la bouteille dans la poche en filet. Les prix, promesses de livraison et requêtes sans rapport restent dans le contenu de la page.
5. Vérifiez la galerie publiée. Contrôlez la description enregistrée et les intitulés des commandes, sur téléphone comme sur ordinateur.

Cette méthode sépare la préparation du fichier de la rédaction du texte alternatif. Les deux sont importants, mais répondent à des problèmes différents. Appliquez-la aux captures et graphiques en adaptant la description aux informations présentées.

Évitez ces erreurs courantes

• Répéter des requêtes. « Sac à dos meilleur sac à dos sac à dos pas cher sac de randonnée » ne décrit pas la poche et n’aide pas à comprendre la photo.
• Utiliser le nom du fichier comme description. Il aide à trouver un fichier, mais n’explique pas forcément ce que le lecteur doit savoir sur l’image.
• Donner le même texte à toutes les images de la galerie. Décrivez les différentes vues si elles apportent des informations différentes.
• Deviner les détails. Vérifiez matériaux, libellés et caractéristiques au lieu de les inventer d’après l’apparence.
• Décrire longuement les décorations. Les annonces superflues peuvent rendre le contenu utile plus difficile à suivre.
• Vérifier seulement la médiathèque. Le modèle n’utilise peut-être pas le champ modifié. Vérifiez l’image publiée.

Questions fréquentes

Quelle longueur pour un texte alternatif ?

Le plus court possible sans perdre l’information utile. Une photo simple peut demander une phrase courte. Aucune limite de caractères unique ne rend une description utile. Placez les longues explications de graphiques dans le texte de la page.

Toutes les images doivent-elles avoir une description ?

Non. Décrivez celles qui apportent des informations. Laissez le texte alternatif vide pour une décoration. Si l’image est le seul intitulé d’un lien ou bouton, expliquez sa destination ou son action.

Puis-je utiliser l’IA pour rédiger un brouillon ?

Oui comme point de départ, mais comparez-le à l’image réelle et à la page. Retirez suppositions, détails inutiles et mots-clés répétés. Un texte généré peut sembler assuré tout en décrivant une caractéristique invisible.

La compression supprime-t-elle le texte alternatif ?

Il est dans la page web, pas dans le fichier image. Compresser un JPG ou PNG local ne modifie pas la page. Mais remplacer une image dans l’éditeur peut changer ou réinitialiser ses champs. Vérifiez la description publiée après remplacement.

De meilleurs noms garantissent-ils plus de visites depuis les recherches ?

Non. Noms clairs et descriptions utiles contribuent à une page soignée, sans garantir indexation, classement ou clics. Google traite aussi le texte environnant, la découverte des images par ses robots et le chargement. Notre guide des performances des images aborde cette partie distincte du travail.

Résumer avecChatGPT (s’ouvre dans un nouvel onglet)Grok (s’ouvre dans un nouvel onglet)Google (s’ouvre dans un nouvel onglet)Perplexity (s’ouvre dans un nouvel onglet)Claude (s’ouvre dans un nouvel onglet)