La balise alt, ou attribut alt, est une composante essentielle en HTML pour décrire le contenu des images sur une page web. Elle fournit un texte alternatif qui s’affiche si l’image ne peut être chargée et est utilisée par les technologies d’assistance pour décrire les images aux personnes malvoyantes. De plus, elle joue un rôle important dans le référencement naturel (SEO) en aidant les moteurs de recherche à comprendre le contenu des images.
Qu'est-ce que la balise alt ?
En HTML, la balise alt est un attribut de la balise <img> qui spécifie un texte alternatif pour une image. Ce texte est affiché si l’image ne peut pas être rendue par le navigateur. Il est également utilisé par les lecteurs d’écran pour décrire l’image aux utilisateurs ayant des déficiences visuelles.
Par exemple :
<img decoding="async" src="image.jpg" alt="Description de l'image">
Dans cet exemple, si l’image « image.jpg » ne peut pas être affichée, le texte « Description de l’image » sera présenté à la place.
Comment utiliser la balise alt en HTML ?
Pour utiliser la balise alt, il suffit de l’ajouter à la balise <img> en fournissant une description concise et pertinente de l’image.
Par exemple :
<img decoding="async" src="chaton.jpg" alt="Un chaton qui dort dans son panier">
Il est recommandé de décrire précisément l’image en quelques mots, généralement entre 3 et 5, sans dépasser 100 caractères. Évitez le bourrage de mots-clés et assurez-vous que la description est en accord avec le contexte de la page.
Quelle est l'utilité de la balise alt dans une balise ![]()
?
La balise alt a plusieurs utilités :
Accessibilité : Elle permet aux lecteurs d’écran de décrire l’image aux utilisateurs malvoyants, améliorant ainsi l’accessibilité du site.
SEO : Les moteurs de recherche utilisent le texte alternatif pour comprendre le contenu de l’image, ce qui peut améliorer le classement de la page dans les résultats de recherche.
Affichage de secours : Si l’image ne peut pas être chargée, le texte alternatif est affiché à la place, offrant une meilleure expérience utilisateur.
En optimisant les balises alt de vos images, vous améliorez non seulement l’accessibilité de votre site, mais vous contribuez également à un meilleur référencement naturel.
Comment rédiger un texte alt efficace ?
Pour rédiger un texte alt efficace :
Soyez précis : Décrivez exactement ce que représente l’image.
Soyez concis : Limitez-vous à une description courte, généralement entre 3 et 5 mots.
Intégrez des mots-clés pertinents : Si possible, incluez des mots-clés en rapport avec le contenu de la page, sans faire de bourrage de mots-clés.
Évitez les descriptions génériques : Des termes comme « image » ou « photo » n’apportent pas de valeur ajoutée.
Par exemple :
alt="logo de la société", préférez alt="Logo de l'entreprise XYZ".
Ajouter la balise Alt sur les principaux CMS
Selon le CMS utilisé, la procédure pour insérer ces balises peut varier. Comment ajouter facilement la balise alt sur les principaux site internet sous un CMS afin de garantir que vos images soient correctement indexées par les moteurs de recherche et accessibles aux utilisateurs ayant des besoins spécifiques ?
Balise ALT sur WordPress
- Rendez-vous dans la bibliothèque de médias.
- Cliquez sur l’image souhaitée.
- Remplissez le champ « Texte alternatif » dans le panneau des détails.
ALT sur Prestashop
- Allez dans Catalogue > Produits.
- Éditez le produit contenant l’image.
- Dans l’onglet « Images », saisissez le texte alternatif.
ALT sur Magento
- Accédez à Produits > Catalogue.
- Ouvrez le produit à modifier.
- Dans la section Images et Vidéos, ajoutez ou modifiez le texte alternatif.
Puis balise ALT sur Shopify
- Depuis le tableau de bord, allez dans Produits.
- Éditez le produit souhaité.
- Sous l’image, cliquez sur « Modifier l’image » et renseignez le champ « Texte alternatif ».
