📝 SEO On-Page
Balise Alt
La balise alt (texte alternatif) est un attribut HTML qui décrit le contenu d'une image pour l'accessibilité et le référencement.
Définition
La balise alt (ou attribut alt, texte alternatif) est un attribut HTML qui fournit une description textuelle d’une image. Elle sert à la fois pour l’accessibilité (lecteurs d’écran pour malvoyants) et pour le SEO (aide Google à comprendre le contenu des images).
À quoi sert l’attribut alt ?
| Fonction | Explication |
|---|
| Accessibilité | Lu par les lecteurs d’écran pour les malvoyants |
| SEO images | Aide Google à comprendre et indexer vos images |
| Affichage de secours | S’affiche si l’image ne charge pas |
| Google Images | Facteur de ranking dans la recherche d’images |
Syntaxe HTML
<img src="chaussures-running-nike.jpg" alt="Chaussures de running Nike Air Zoom rouges">
| Attribut | Rôle |
|---|
src | Chemin vers l’image |
alt | Description textuelle de l’image |
width/height | Dimensions (recommandé pour le CLS) |
Bonnes pratiques de rédaction
Ce qu’il faut faire
| Règle | Exemple |
|---|
| Décrire l’image | ”Graphique montrant l’évolution du trafic SEO” |
| Être concis | 5-15 mots maximum (125 caractères) |
| Inclure le contexte | ”Logo Apple sur fond blanc” |
| Placer le mot-clé naturellement | Si pertinent pour l’image |
Ce qu’il ne faut PAS faire
| Erreur | Pourquoi c’est mauvais | Correction |
|---|
alt="" sur image informative | Invisible pour accessibilité et SEO | Décrire l’image |
alt="image" ou alt="photo" | Aucune information utile | Décrire le contenu |
| Keyword stuffing | Pénalisé par Google | Description naturelle |
| Répéter le nom du fichier | Redondant | Description unique |
| Texte trop long (>125 car.) | Coupé par les lecteurs d’écran | Synthétiser |
Exemples par type d’image
Images produits (e-commerce)
| Type | Bon exemple d’alt |
|---|
| Photo produit | ”Montre connectée Apple Watch Series 9 noir 45mm” |
| Vue détail | ”Bracelet en silicone noir pour Apple Watch gros plan” |
| Photo portée | ”Femme portant une Apple Watch pendant son jogging” |
Images de contenu (blog)
| Type | Bon exemple d’alt |
|---|
| Graphique | ”Graphique montrant +150% de trafic organique en 6 mois” |
| Capture d’écran | ”Interface Google Search Console rapport performances” |
| Infographie | ”Infographie 10 étapes audit SEO technique” |
Images décoratives
Pour les images purement décoratives (séparateurs, ornements), utilisez un alt vide :
<img src="decorative-line.png" alt="">
Cela indique aux lecteurs d’écran d’ignorer l’image.
Impact sur le SEO
Google Images
L’attribut alt est le facteur #1 pour le ranking dans Google Images :
| Facteur | Importance |
|---|
| Texte alt | Très élevée |
| Nom du fichier | Élevée |
| Contexte de la page | Moyenne |
| Légende | Moyenne |
| Qualité de l’image | Moyenne |
SEO on-page
| Effet | Explication |
|---|
| Contexte sémantique | Aide Google à comprendre la page |
| Mots-clés images | Peut ranker sur des requêtes visuelles |
| Accessibilité | Signal de qualité pour Google |
Audit des balises alt
Vérifications essentielles
| Check | Outil |
|---|
| Images sans alt | Screaming Frog, Lighthouse |
| Alt trop longs | Screaming Frog |
| Alt génériques (“image”, “photo”) | Recherche manuelle |
| Alt dupliqués | Screaming Frog |
Priorisation des corrections
| Priorité | Type d’image | Action |
|---|
| Haute | Images produits | Alt descriptif + mot-clé |
| Haute | Images du contenu principal | Alt contextuel |
| Moyenne | Images secondaires | Alt basique |
| Basse | Images décoratives | Alt vide |
Attribut alt vs autres attributs
| Attribut | Rôle | Obligatoire |
|---|
| alt | Description pour accessibilité/SEO | Oui |
| title | Info-bulle au survol | Non (éviter) |
| figcaption | Légende visible | Non |
| aria-label | Label pour assistive tech | Non |
Note : L’attribut title sur les images est déconseillé car il crée du contenu dupliqué et n’est pas accessible sur mobile.
Cas particuliers
Images-liens
Quand une image est un lien, l’alt doit décrire la destination :
<a href="/contact">
<img src="bouton-contact.png" alt="Contactez-nous">
</a>
Images avec texte
Si l’image contient du texte important, incluez-le dans l’alt :
<img src="promo-banner.jpg" alt="Soldes -50% jusqu'au 31 janvier">
SVG
Pour les SVG inline, utilisez role et aria-label :
<svg role="img" aria-label="Logo de l'entreprise">...</svg>
Outils utiles
| Outil | Utilisation |
|---|
| Screaming Frog | Audit complet des images |
| Lighthouse | Check accessibilité |
| WAVE | Extension accessibilité |
| Ahrefs/SEMrush | Opportunités Google Images |
Checklist optimisation images
- Toutes les images informatives ont un alt
- Les alt décrivent fidèlement l’image
- Longueur < 125 caractères
- Mot-clé inclus naturellement (si pertinent)
- Images décoratives ont alt=""
- Pas de keyword stuffing
- Noms de fichiers descriptifs (
chaussures-nike.jpg vs IMG_1234.jpg)
Conclusion
L’attribut alt est un élément fondamental du SEO et de l’accessibilité web. Une bonne pratique consiste à rédiger des descriptions concises et précises qui seraient utiles à quelqu’un qui ne peut pas voir l’image. En bonus, cela améliore votre visibilité dans Google Images et renforce la pertinence sémantique de vos pages.