Modèle de SEO d'images et de texte alternatif

Noms de fichiers descriptifs

Renommez les fichiers d'image avant l'envoi pour qu'ils décrivent le sujet et aident la recherche d'images.

Nommez les fichiers avant de les envoyer

Les moteurs de recherche lisent le nom de fichier comme un signal de ce que montre une image, et un nom clair est plus facile à gérer dans votre bibliothèque de médias. Remplacez les noms par défaut de l'appareil photo comme [IMG_4827.jpg] par une description courte et lisible par un humain.

• Décrivez le sujet : [fauteuil-bureau-cuir-rouge.jpg], pas une chaîne aléatoire.
• Utilisez des traits d'union entre les mots ; évitez les espaces, les tirets bas et les caractères spéciaux.
• Restez en minuscules pour la cohérence entre les serveurs.
• Soyez concis : quelques mots pertinents valent mieux qu'une longue chaîne de mots-clés.

Ne bourrez pas de mots-clés et ne répétez pas la même expression dans chaque fichier. Nommez chaque image d'après ce qu'elle représente réellement pour que le nom reste exact et utile.

Vérification rapide : Quelqu'un pourrait-il deviner l'image d'après le seul nom de fichier ? Si oui, c'est réussi. Pour une série de prises similaires, ajoutez un détail distinctif comme la couleur, l'angle ou le modèle : [nom-du-produit-vue-de-face.jpg] et [nom-du-produit-vue-de-cote.jpg].

Texte alternatif (l'accessibilité d'abord)

Rédigez des attributs alt qui décrivent les images pour les utilisateurs de lecteurs d'écran et les moteurs de recherche.

Rédigez le texte alternatif pour les personnes d'abord

Le texte alternatif existe avant tout pour l'accessibilité : il est lu à voix haute par les lecteurs d'écran et affiché lorsqu'une image ne se charge pas. Décrivez ce que l'image transmet en langage simple, comme si vous l'expliquiez à quelqu'un qui ne peut pas la voir.

• Soyez précis et concis : [une barista versant un latte art dans une tasse blanche], environ une phrase courte.
• Transmettez l'intention : décrivez pourquoi l'image est là, pas seulement ses détails visuels.
• Évitez le remplissage : ne commencez pas par [image de] ou [photo de] ; la technologie annonce déjà qu'il s'agit d'une image.
• Ne bourrez pas de mots-clés : une mention naturelle d'un terme pertinent convient ; une liste de mots-clés nuit à l'accessibilité.

Pour les images purement décoratives qui n'apportent aucune information, utilisez un alt vide ([alt=""]) pour que les lecteurs d'écran les ignorent. Si l'image est aussi un lien, le texte alternatif doit décrire la destination ou l'action du lien.

Astuce : Si une légende décrit déjà entièrement l'image, gardez l'alt bref pour ne pas répéter deux fois les mêmes mots.

Compression et formats modernes (WebP/AVIF)

Réduisez la taille des fichiers et passez aux formats modernes pour améliorer le temps de chargement et le LCP.

Compressez et modernisez chaque image

Les images volumineuses ralentissent les pages et peuvent nuire à votre Largest Contentful Paint. Réduisez la taille du fichier avant l'envoi et servez des formats modernes qui se compressent bien mieux que les anciens à qualité comparable.

• Choisissez le bon format : AVIF ou WebP pour les photos et la plupart des graphiques ; SVG pour les logos et les icônes simples ; ne gardez le PNG que lorsque vous avez besoin de transparence ou d'un texte net.
• Redimensionnez à la taille d'affichage : n'envoyez pas un fichier de [4000px] dans un emplacement de [800px].
• Compressez avec discernement : visez le plus petit fichier qui reste net ; testez deux ou trois niveaux de qualité et comparez.
• Prévoyez des solutions de repli : utilisez l'élément picture pour proposer de l'AVIF ou du WebP avec un repli JPEG pour les anciens navigateurs.

Flux de travail : exportez aux bonnes dimensions, passez le fichier dans un outil de compression, puis vérifiez qu'il paraît net sur un écran haute résolution. Pour l'image principale ou de héros, priorisez un chargement rapide, car c'est souvent l'élément LCP de la page.

Images responsives et chargement différé

Servez la bonne taille selon l'appareil et différez les images hors écran pour accélérer le chargement.

Dimensionnez et différez les images

Le balisage responsive laisse le navigateur choisir le meilleur fichier pour chaque écran, tandis que le chargement différé retarde les images que le visiteur n'a pas encore atteintes en défilant. Ensemble, ils réduisent les octets gaspillés et accélèrent le premier rendu.

• Utilisez srcset et sizes : proposez plusieurs largeurs pour que les téléphones téléchargent de petits fichiers et que les grands écrans en reçoivent de nets.
• Définissez width et height : ajoutez des dimensions explicites (ou aspect-ratio) pour réserver l'espace et éviter les décalages de mise en page.
• Différez le chargement sous la ligne de flottaison : ajoutez [loading="lazy"] aux images qui commencent hors écran.
• NE différez PAS l'image LCP : l'image principale ou de héros au-dessus de la ligne de flottaison doit se charger immédiatement ; marquez-la plutôt comme haute priorité.

Pourquoi c'est important : différer les images hors écran libère de la bande passante pour ce qui est visible en premier. Réserver l'espace avec des dimensions définies empêche le contenu de sauter à mesure que les images arrivent, ce qui protège votre Cumulative Layout Shift et le confort de lecture.

Légendes, contexte environnant et sitemaps d'images

Renforcez la pertinence des images avec du contexte sur la page et aidez les robots à découvrir les images.

Ajoutez du contexte et facilitez la découverte

Les moteurs de recherche lisent le texte autour d'une image, la légende et le titre de la page pour la comprendre. Un contexte solide associé à un sitemap d'images rend vos visuels plus faciles à interpréter et à trouver.

• Ajoutez des légendes quand c'est utile : les légendes sont lues plus souvent que le corps du texte, alors utilisez-les pour les figures, les graphiques et les photos de produits.
• Placez les images près du texte pertinent : positionnez chaque image à côté du paragraphe qu'elle illustre.
• Utilisez l'élément figure : enveloppez ensemble une image et sa figcaption pour une structure claire et sémantique.
• Listez les images dans un sitemap : incluez des entrées d'image (ou un sitemap d'images dédié) pour que les robots découvrent les graphiques chargés par des scripts ou des galeries.

Mettez-le en pratique : pour l'image à [URL de la page], rédigez une légende qui ajoute de l'information plutôt que de répéter le texte alternatif, et assurez-vous que le titre et le texte proches mentionnent le même sujet. Confirmez ensuite que le fichier figure dans votre sitemap XML.

Données structurées d'image et licence

Balisez les images pour qu'elles puissent apparaître avec des résultats enrichis et une licence claire.

Balisez et concédez une licence à vos images

Les données structurées indiquent aux moteurs de recherche le rôle et la propriété d'une image, ce qui peut débloquer des résultats d'image plus riches et un badge « sous licence ». Ajoutez-les là où les droits ou le contexte de l'image comptent, comme les pages de produit, de recette ou d'article.

• Utilisez le bon schéma : référencez des URL d'images en haute résolution dans votre balisage Product, Recipe, Article ou ImageObject.
• Fournissez des images grandes et explorables : les données structurées doivent pointer vers des images non bloquées et respectant les tailles minimales recommandées.
• Ajoutez des métadonnées de licence : incluez [license] et [acquireLicensePage] dans ImageObject pour que les conditions d'utilisation soient claires.
• Gardez des métadonnées honnêtes : les champs de crédit ([creator]) et de droits d'auteur doivent correspondre à la page et aux droits réels de l'image.

Validez avant le lancement : testez votre balisage avec un validateur de données structurées, corrigez les erreurs et confirmez que l'image référencée se charge. Des champs de licence exacts aident votre travail à apparaître correctement et protègent la façon dont il est réutilisé.

Qu'est-ce qui fait un bon texte alternatif ?

Un bon texte alternatif décrit de façon concise ce que montre l'image et pourquoi elle est sur la page, dans un langage simple qu'un lecteur d'écran peut annoncer. Limitez-le à environ une phrase, évitez les formules comme « image de » et ne mentionnez un terme pertinent que s'il s'intègre naturellement. L'objectif est l'accessibilité, pas la densité de mots-clés.

Quand dois-je utiliser un texte alternatif vide (alt="") ?

Utilisez un attribut alt vide pour les images purement décoratives qui n'apportent aucune information, comme les fioritures d'arrière-plan, les espaceurs ou les icônes à côté d'un texte qui dit déjà la même chose. L'alt vide indique aux lecteurs d'écran d'ignorer l'image. Réservez le texte alternatif descriptif aux images porteuses de sens.

Quel format d'image utiliser pour la vitesse ?

Pour la plupart des photos et des graphiques, l'AVIF ou le WebP donnent les fichiers les plus légers à bonne qualité, donc les meilleurs pour la vitesse de page. Utilisez le SVG pour les logos et les icônes simples, et gardez le PNG surtout pour la transparence ou un texte net. Servez un repli JPEG via l'élément picture pour les anciens navigateurs.

Dois-je différer le chargement de toutes mes images ?

Non. Différez le chargement des images qui commencent sous la ligne de flottaison pour que le navigateur ne les télécharge qu'au besoin. Ne différez pas l'image de héros ou principale au-dessus de la ligne de flottaison, car c'est généralement votre élément LCP et la retarder ralentit le temps de chargement perçu. Chargez celle-ci immédiatement et en haute priorité.

Les noms de fichiers descriptifs aident-ils vraiment le SEO ?

Ils aident les moteurs de recherche et la recherche d'images à comprendre ce qu'un fichier représente, et facilitent la gestion de votre bibliothèque de médias. Utilisez des noms courts, en minuscules et séparés par des traits d'union qui décrivent le sujet. Ce n'est qu'un signal d'appoint parmi d'autres, alors associez-les à un texte alternatif solide et à un contexte environnant plutôt que de vous fier aux seuls noms de fichiers.

Comment les moteurs de recherche trouvent-ils mes images ?

Les robots découvrent les images en suivant votre HTML, en lisant le texte environnant et les légendes, et en analysant votre sitemap. Lister les images dans un sitemap XML (ou un sitemap d'images dédié) aide à faire remonter les visuels chargés par des scripts ou des galeries. Assurez-vous que les images ne sont pas bloquées par les règles du robots et qu'elles sont placées près du contenu pertinent de la page.