SEO des images et texte alternatif : optimiser tout le flux de travail

Exemple illustratif : une page de machine à café utilise une grande image comme fond CSS, avec un nom de fichier peu utile et aucune description du modèle à proximité. Examinez la diffusion de l’image, les alternatives accessibles et le contexte ; robots.txt seul ne diagnostique pas ces problèmes.

Le SEO des images ne consiste pas à placer des mots-clés dans un champ alt après la publication. C'est une chaîne de décisions couvrant la sélection, le nommage, la taille d'export, le texte voisin, l'intégration HTML, la diffusion par CDN, les métadonnées et les sitemaps. Une bonne chaîne améliore la découverte des images tout en protégeant la vitesse de la page et l'accessibilité.

Google comprend les images grâce à plusieurs signaux

Le texte alternatif compte, mais il ne fonctionne pas seul. Les systèmes de recherche peuvent prendre en compte :

• Le contenu et les intertitres de la page de destination.
• Les paragraphes, légendes et titres voisins.
• Le nom de fichier et l'URL de l'image.
• L'attribut alt.
• Les données structurées et les métadonnées Open Graph.
• Les liens vers l'image ou vers la page de destination.
• La vision par ordinateur appliquée au fichier.

Une image de « machine à café X200 sur un comptoir de café » a sa place sur une page qui parle réellement du X200, près d'un texte sur sa conception ou son utilisation. La placer dans une galerie sans contexte et rédiger un long attribut alt n'apporte pas la même clarté.

Utiliser des éléments HTML que les robots peuvent découvrir

Google Search Central recommande d'intégrer les images de contenu avec un élément <img> et une URL dans src. Les arrière-plans CSS conviennent à la décoration, mais ne sont pas la bonne méthode pour une image que l'on souhaite voir apparaître dans Google Images.

Un exemple de base :

<img
  src="/images/x200-black-coffee-machine.webp"
  alt="Black X200 coffee machine beside a burr grinder"
  width="1200"
  height="800"
>

Les implémentations responsives peuvent utiliser srcset, sizes ou <picture>, tout en conservant un img src valide comme élément central. Inspectez à la fois le code source et le HTML rendu pour vérifier que l'URL n'est pas introduite seulement après une interaction que les robots ont peu de chances d'effectuer.

La pure décoration peut rester dans le CSS. Il n'y a aucune raison de soumettre à un sitemap d'images chaque texture, icône d'arrière-plan et séparateur simplement parce que c'est un fichier graphique.

Rédiger le texte alternatif selon l'objectif de l'image

Le texte alternatif aide une personne qui ne peut pas voir l'image à comprendre l'information ou la fonction qu'elle apporte. Une seule formule ne peut pas couvrir tous les types.

Images informatives

Décrivez ce qui est nécessaire pour comprendre la section environnante :

alt="Chart showing organic clicks rising from 1,200 to 1,850 in three months"

Lorsque le paragraphe voisin énonce déjà chaque valeur, le texte alternatif peut être plus court pour éviter qu'un utilisateur de lecteur d'écran entende deux fois les mêmes données.

Images de produit

Nommez le produit et une vue ou une variante utile :

alt="Side view of blue AirFlow running shoe with white rubber sole"

Ne répétez pas « acheter chaussures de running authentiques pas chères » sur chaque photographie. Les vues de face, de dos, de semelle et de détail de matière ont besoin de descriptions différentes, car elles fournissent des informations différentes.

Images fonctionnelles

Lorsqu'une image est un bouton ou un lien, décrivez l'action ou la destination :

<a href="/cart">
  <img src="/icons/cart.svg" alt="Open shopping cart">
</a>

Images décoratives

Utilisez alt="" pour que les technologies d'assistance puissent les ignorer :

<img src="/decor/divider.png" alt="">

Un attribut alt manquant et un attribut volontairement vide ne sont pas identiques en matière d'accessibilité. La valeur vide indique clairement que l'image ne porte aucune information.

Images contenant du texte

Autant que possible, placez les mots importants dans du vrai HTML. Le texte contenu dans une image est difficile à redimensionner, traduire, rendre accessible et mettre à jour. Les logos sont une exception connue ; leur alt identifie généralement l'organisation, ou la fonction du lien lorsque le logo ramène à la page d'accueil.

Des alt qui semblent optimisés mais échouent

Les problèmes courants :

• Énumérer des mots-clés et des lieux qui n'apparaissent pas dans l'image.
• Donner la même description à chaque photo de produit.
• Tout commencer par « image de » alors que le contexte est évident.
• Écrire un paragraphe de 200 mots au lieu d'utiliser une légende et le texte courant.
• Copier automatiquement dans l'alt un nom de fichier non nettoyé.
• Laisser un modèle de vision identifier des objets sans tenir compte du rôle de l'image dans l'article.

Un modèle peut reconnaître « une personne à côté d'un tableau blanc », mais un rédacteur sait si l'image illustre un processus d'audit ou présente un conférencier. Un alt utile combine l'information visible et l'objectif contextuel.

Noms de fichier et structure d'URL

x200-black-coffee-machine.webp donne un léger indice et se gère plus facilement que DSC00991.webp. Règles pratiques :

1. Gardez des noms courts mais distinctifs.
2. Utilisez une description fidèle plutôt qu'une liste de mots-clés.
3. Séparez les mots de façon cohérente par des tirets.
4. Conservez l'extension qui correspond au format.
5. Ne changez pas les URL d'images à chaque déploiement lorsque le contenu est inchangé.

Pour des milliers de ressources, dérivez les noms de l'identifiant produit, de la variante et de l'angle de prise de vue : x200-black-front.webp, x200-black-side.webp. Une règle cohérente aide le DAM, le CDN et les équipes de contenu à éviter les doublons.

Lorsque des images localisées contiennent du texte traduit ou des informations propres à un marché, des noms de fichier localisés peuvent avoir du sens. Lorsque la même image neutre sur le plan linguistique est partagée entre plusieurs langues, une seule URL stable améliore la mise en cache ; l'alt et les légendes peuvent quand même être traduits sur chaque page.

Choisir délibérément le format et la compression

Aucun format ne l'emporte dans tous les cas d'usage :

• JPEG : largement pris en charge et efficace pour les photographies, sans transparence alpha utile.
• PNG : adapté à la transparence et aux détails nets, souvent lourd pour la photographie.
• WebP : efficace pour de nombreux types d'images et largement pris en charge par les navigateurs modernes.
• AVIF : peut produire des fichiers plus petits à qualité visuelle comparable, avec un temps d'encodage et un flux de secours à prendre en compte.
• SVG : idéal pour les logos, icônes et graphiques vectoriels ; à assainir lorsque vous acceptez des téléversements d'utilisateurs.

Exportez à des dimensions proches de l'affichage réel. Une source de 5 000 pixels est inutile pour un emplacement de 600 pixels. Fournissez quand même une variante haute densité pour les écrans nets. Générez plusieurs tailles dans le pipeline média plutôt que de demander aux navigateurs de télécharger l'original puis de le réduire.

La compression ne doit pas flouter les bords du produit, le texte ou les détails dont un acheteur a besoin. Inspectez visuellement des échantillons sur plusieurs écrans plutôt que d'approuver seulement un pourcentage d'économie.

Les images responsives réduisent plus que le poids du fichier

srcset permet au navigateur de sélectionner une ressource selon la fenêtre d'affichage et la densité de pixels :

<img
  src="/images/audit-dashboard-800.webp"
  srcset="/images/audit-dashboard-480.webp 480w,
          /images/audit-dashboard-800.webp 800w,
          /images/audit-dashboard-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Dashboard listing SEO issues by priority"
  width="1280"
  height="800"
>

Une valeur sizes incorrecte peut amener les navigateurs à choisir un fichier inutilement lourd. Inspectez le panneau Réseau sur mobile et sur ordinateur pour voir quelle ressource se charge réellement plutôt que de vérifier seulement que srcset existe.

Utilisez une URL stable pour chaque variante de contenu. Des versions de paramètre qui changent constamment peuvent affaiblir le cache et créer de nombreuses adresses d'images dans les logs.

Width, height et CLS

width et height permettent au navigateur de calculer le rapport d'aspect avant le téléchargement. Le CSS peut garder l'image responsive :

img {
  max-width: 100%;
  height: auto;
}

Sans espace réservé, le contenu situé en dessous se décale à l'arrivée du fichier, ce qui contribue au Cumulative Layout Shift. Pour les conteneurs recadrés, définissez un aspect-ratio stable et un object-fit adapté.

Le guide d'optimisation des Core Web Vitals explique comment les images principales affectent le LCP et comment des dimensions instables affectent le CLS.

Appliquer le lazy loading aux bons endroits

Le lazy loading natif peut différer les images situées sous la fenêtre d'affichage :

<img src="/images/step-8.webp" alt="..." loading="lazy">

L'image principale ou l'image LCP probable ne doit pas être différée à la légère. Laissez les navigateurs découvrir tôt les ressources critiques, envisagez fetchpriority="high" dans les cas adaptés et ne cachez pas l'URL derrière du JavaScript.

Une politique pratique :

• Chargement immédiat de l'image principale susceptible de devenir le LCP.
• Lazy loading des galeries et des médias situés bien plus bas.
• Ne pas ajouter de script lourd uniquement pour mettre tout en lazy loading.
• Réserver le bon rapport pour l'espace réservé.
• Tester sur réseaux lents et sur de vrais appareils.

Utilisez le Page Speed Checker pour mesurer le LCP, le CLS et le poids des images transférées après modification du pipeline média.

Légendes et texte environnant

Toutes les images n'ont pas besoin d'une légende. Ajoutez-en une lorsqu'un lecteur a besoin d'une source, d'un résultat, d'une date, d'une personne, d'une condition ou d'un détail précis à remarquer. La légende d'un graphique peut indiquer la plage de données ; une comparaison avant-après doit nommer ses conditions.

Placez l'image près de la discussion concernée. Une infographie de processus en six étapes placée à trois écrans de son intertitre a un contexte faible et interrompt la lecture.

Lorsqu'une image contient des données importantes, résumez la conclusion en HTML. Ni l'accessibilité ni le SEO ne doivent dépendre entièrement des pixels.

Images mises en avant, Open Graph et données structurées

Les miniatures dans la recherche et le partage social sont sélectionnées automatiquement à partir de plusieurs signaux. Un site peut exprimer une préférence avec :

• og:image.
• La propriété image de Article, Product ou d'un autre type de schema adapté.
• primaryImageOfPage.
• Une image mise en avant bien visible dans le contenu.

Choisissez une ressource pertinente, en haute résolution et sans rapport d'aspect extrême. Évitez d'utiliser un logo générique pour chaque article ou une illustration chargée de texte dont les petits mots disparaissent dans une miniature. Utilisez le Social Preview Checker pour inspecter la présentation sur les réseaux sociaux.

Chaque URL d'image dans les données structurées doit être accessible. Si un CDN bloque les robots, exige un cookie ou émet des URL qui expirent, un balisage valide ne peut pas rendre le fichier récupérable.

Quand un sitemap d'images est utile

Un sitemap d'images est utile lorsque des médias importants sont difficiles à découvrir dans le HTML ordinaire, sont chargés par une application complexe ou constituent une part majeure de la valeur du site. Des entrées d'images peuvent être ajoutées aux sitemaps de pages existants sans créer un système totalement séparé.

Un sitemap d'images ne répare pas :

• Les ressources bloquées.
• Les réponses d'erreur.
• Les images sans rapport avec leurs pages de destination.
• Les fichiers minuscules ou de mauvaise qualité.
• Une page de destination en noindex.

Lorsque les images se trouvent sur un autre domaine CDN, vérifiez ce domaine dans Search Console afin que les problèmes d'exploration puissent être signalés. Utilisez des URL absolues, stables et avec le bon protocole.

CDN, cache et contrôle d'accès

Un CDN réduit la latence mais peut créer des problèmes de recherche lorsque :

• La protection anti-hotlink bloque Googlebot ou les requêtes sans référent.
• Les URL signées expirent en quelques minutes.
• Chaque redimensionnement génère une adresse instable.
• Les réponses portent un mauvais type MIME.
• Le cache renvoie 404 alors que l'origine possède le fichier.
• Le robots.txt du CDN bloque les répertoires d'images.

Testez sans cookies et, si possible, depuis plusieurs user agents et régions. Consultez les logs du CDN pour confirmer que les robots reçoivent 200, un type de contenu exact et la taille d'octets attendue.

Ne renommez pas toute une bibliothèque d'images uniquement pour passer de JPEG à WebP sans en considérer les conséquences. La négociation de contenu ou une mise à jour contrôlée avec redirections et modifications de sitemap peut fonctionner, mais tenez compte des caches, des backlinks d'images et de la réexploration.

Auditer les images par modèle

Échantillonnez la page d'accueil, les articles, les catégories, les produits, les pages de destination et les modèles localisés. Pour chacun, demandez-vous :

1. Les images de contenu sont-elles dans img src ou en arrière-plan CSS ?
2. Le texte alt existe-t-il, correspond-il à l'objectif et varie-t-il de façon appropriée ?
3. Les noms de fichier sont-ils descriptifs et les URL stables ?
4. Width et height réservent-ils l'espace ?
5. Quelle image est le LCP, et est-elle différée ?
6. Combien d'octets d'images se chargent sur mobile ?
7. Les légendes et le texte voisin fournissent-ils du contexte ?
8. Les URL d'images renvoient-elles 200 avec le bon type MIME ?
9. L'image mise en avant est-elle représentée dans OG et le schema ?
10. Les images stratégiquement importantes figurent-elles dans les sitemaps ?

Priorisez ensuite selon l'ampleur. Un composant de carte sans alt sur 20 000 produits relève d'une correction de modèle. Dix images de blog mal nommées peuvent être éditées individuellement.

Le SEO Checker passe en revue les attributs de base de la page, tandis qu'un audit SEO gratuit aide à trouver les défauts répétés avant de modifier un composant partagé.

Un flux de transmission entre les équipes

Un SEO des images durable nécessite des responsabilités claires :

• Photographie/design : livrer des fichiers maîtres propres, des recadrages adaptés et les droits d'utilisation.
• Contenu : choisir les ressources et rédiger l'alt et les légendes contextuels.
• Frontend : mettre en œuvre les images HTML, les sources responsives, les dimensions et le chargement.
• Backend/DAM : nommer les fichiers, générer les variantes, conserver les métadonnées et garder des URL stables.
• DevOps/CDN : gérer le cache, les types MIME, l'accès d'exploration et la surveillance des erreurs.
• SEO : définir les pages de destination stratégiques, les règles de sitemap, les tests et la mesure.

Si l'alt est ajouté à la fin par quelqu'un qui ne sait pas où apparaît une ressource, la cohérence en souffre. Un CMS devrait gérer l'alt par usage, car un même fichier peut nécessiter une description différente dans un autre contexte.

Mesurer le résultat

Suivez avant et après, par groupe de pages :

• Clics et impressions dans Search Console avec le type de recherche Images.
• Entrées sur les pages de destination depuis Google Images.
• LCP, CLS et poids total transféré des images.
• Pourcentage d'images sans alt ou renvoyant des erreurs.
• Couverture d'exploration des images stratégiques.
• Conversions des sessions commençant par une recherche d'images.

N'attendez pas qu'une modification d'alt aujourd'hui change le trafic demain. Les images doivent être réexplorées et traitées. Les résultats dépendent aussi du caractère visuel de la requête ; un article juridique peut recevoir moins de trafic image qu'une recette malgré une mise en œuvre irréprochable.

Conclusion

Un SEO des images efficace commence par une ressource utile placée dans une page pertinente et diffusée via du HTML explorable. Le texte alternatif explique le rôle de l'image ; les noms de fichier, légendes, métadonnées et sitemaps ajoutent du contexte ; le dimensionnement responsive, la compression et le chargement protègent une expérience rapide et stable.

Ne transformez pas l'alt en conteneur de mots-clés, n'envoyez pas d'énormes originaux à de petits écrans et ne cachez pas l'image de contenu principale en arrière-plan CSS. Lorsque les équipes contenu, frontend et CDN partagent un même flux de travail, les images peuvent être découvertes sans sacrifier l'accessibilité ni les Core Web Vitals.

Références : bonnes pratiques de Google Search Central pour le SEO des images, conseils sur les images responsives sur web.dev et tutoriels du W3C sur l'accessibilité des images.