Alt Text for Images - Exemples & 2021 Meilleures pratiques de référencement

L'ajout de texte alternatif à vos images est la première règle du référencement des images et c'est aussi un principe clé de l'accessibilité du web.

Il s'agit d'un article approfondi sur l'attribut de texte alternatif: de ce qu'est un texte alternatif à la façon de les écrire parfaitement.

J'ai ajouté à ce tutoriel plusieurs exemples d'alt optimisés pour le référencement avec des explications.

Il existe également une section dédiée au texte Alt dans WordPress.

Commençons !

Qu'est-ce qu'un texte alternatif (alt) ?

Cathédrale Notre Dame de Paris entourée de nuages
Quel serait le meilleur texte alternatif pour cette photo ?
HTML

An alternative text is an html attribute that should always be added to your image (<img>) elements. Alt texts provide a textual alternative to visual content in web pages.

Les textes Alt sont une alternative textuelle aux images

L'alternative textuelle doit décrire l'apparence et la fonction de l'image sur la page. Les gens oublient souvent d'inclure la fonction de l'image lorsqu'ils remplissent des textes alternatifs. Mentionner la fonction n'est pas vraiment important pour le référencement, mais c'est essentiel pour l'accessibilité. Je reviendrai sur ce sujet plus tard, lorsque nous passerons en revue les exemples d'ALT.

Les attributs Alt s'appliquent à tous les formats d'image

Lesbalises Alt doivent être appliquées quel que soit le format de l'image : cet attribut est en effet compatible avec les formats JPEG, WebP, PNH, GIF, etc.

Si l'image que vous affichez n'a pas de fonction ou de but éditorial, le texte alternatif peut être laissé vide.

<img src="useless-picture.jpeg" alt="" />

Texte alternatif, texte Alt, balise alt, description alt et attribut alt : TOUTES LES MÊMES !

Techniquement parlant, vous ne devriez pas utiliser le terme balise alt pour faire référence à des textes alternatifs car ce n'est pas une balise, mais un attribut possible des éléments img. Cependant, qui s'en soucie ?

Texte alternatif, texte alt, balise alt, description alt, attribut alt : ce sont des synonymes et désignent un texte alternatif à une image.

Le texte Alt et le texte du titre (ou balise title) sont néanmoins différents.

Il est important pour l'accessibilité et le référencement de prêter attention au texte alternatif mais vous pouvez ignorer le texte du titre.

Les textes de titre sont juste là pour donner un titre à vos photos. Les moteurs de recherche ne s'en soucient pas : ils sont donc inutiles pour l'optimisation des moteurs de recherche. L'optimisation des balises de titre devrait donc être votre dernière priorité.

C'est l'une des raisons pour lesquelles notre Image SEO Optimizer for WordPress traite la question du texte Alt mais pas celle du texte du titre.

Dans son article Using ALT attributes smartly Ríona MacNamara de l'équipe Google Webmaster Tool Team nous a dit :

Googlebot ne voit pas les images directement, nous nous concentrons généralement sur les informations fournies dans l'attribut "alt".

Si vous voulez en savoir plus, je vous invite à lire mon article sur l'optimisation des attributs de l'image pour le référencement. Vous y trouverez de plus amples informations sur l'attribut texte du titre.

Pourquoi les textes Alt sont-ils importants pour le référencement et l'accessibilité ?

Le lien entre le texte ALT, les moteurs de recherche et le trafic biologique

Avec l'essor des Intelligences Artificielles, Google et Bing sont capables de lire vos photos. Cependant, ils ne le font pas parce que ce serait trop lent et trop coûteux pour eux. C'est pourquoi les textes alternatifs sont si importants pour le référencement et le référencement des images : ils vous offrent la possibilité de dire à Google sur quoi porte votre photo en quelques mots clés.

J'écris cette phrase dans presque tous mes articles ou guide, mais le référencement en page ne vise presque qu'à aider les moteurs de recherche à comprendre votre contenu.

Une image avec un mauvais nom et sans texte alternatif sera mal classée dans les résultats de recherche de Google Image, mais pas seulement.

Les textes Alt améliorent le référencement des pages

Les images sans texte alternatif constituent une zone grise sur votre page pour les moteurs de recherche. En aidant Google à dévoiler le secret de vos images, vous améliorez également la sémantique globale de votre site web. L'attribut alt text est en quelque sorte le meilleur ami des robots de Google.

Les balises Alt sont fondamentales pour l'accessibilité et l'expérience utilisateur

De nos jours, avoir accès à Internet est presque un droit de l'homme. Votre site doit donc être accessible à tous. Les personnes malvoyantes ou aveugles aussi et c'est pourquoi les textes alternatifs sont importants.

Fournir une alternative textuelle à vos photos permet aux personnes utilisant des lecteurs d'écran ou des logiciels tels que JAWS et NVDA de lire littéralement vos images même si elles ne peuvent pas les voir.

Ajouter des textes alternatifs à vos photos est la bonne chose à faire. De plus, c'est un marché de millions de personnes dans le monde entier.

 De plus, le titre III de la loi sur les Américains handicapés interdit la discrimination fondée sur le handicap. Il y a un nombre croissant d'affaires juridiques concernant l'accessibilité des sites Web et de plus en plus de juges déclarent que les détaillants en ligne doivent se conformer au règlement de l'ADA.

Pour votre information, l'accessibilité est également un des principes fondamentaux de WordPress.

Comment écrire parfaitement des textes alternatifs ?

Ceci étant dit, concentrons-nous sur ce pour quoi vous êtes probablement venu : comment écrire parfaitement des textes alternatifs ?

J'ai dit précédemment que la fonction et le contexte étaient essentiels. Chaque fois qu'une image joue une fonction sur votre page doit fournir une alternative textuelle. A l'inverse, lorsqu'une image est purement décorative, le texte alternatif peut être laissé vide.

Entraînons-nous avec des exemples de textes alternatifs!

Meilleures pratiques de référencement pour les textes alternatifs en 2020

Images faisant partie ou liées à votre contenu éditorial

Lorsqu'une image est liée d'une manière ou d'une autre à votre contenu éditorial, vous devez fournir une alternative textuelle. Cela inclut les photos que vous pourriez utiliser dans vos articles de blog, vos fiches produits, etc.

Lorsqu'il s'agit de déterminer comment rédiger des textes alternatifs appropriés pour des images, le contexte est primordial. Un alt pour une image peut être très différent selon le contexte et l'environnement de l'image elle-même.

Les bons textes alternatifs sont courts, mais descriptifs, présentent le contenu, améliorent le contexte et donnent la fonction de l'image si nécessaire.

Exemples de textes alternatifs et meilleures pratiques

Exemple de texte alternatif n°1

Cathédrale Notre Dame de Paris entourée de nuages

Alt parfait pour le SEO : Cathédrale Notre Dame de Paris entourée de nuages
Alt décent pour le référencement : Notre Dame de Paris
Mauvais alt pour le référencement : Cathédrale

Exemple de texte alternatif n°2

Kangourou rouge adulte dans le désert australien

Alt parfait pour le SEO : Kangourou rouge adulte dans le désert australien
Decent Alt pour SEO : Red Kangaroo
Bad alt pour SEO : Kangourou

Exemple de texte alternatif n°3

Fleur de rose blanche dans un jardin naturel

Alt parfait pour le SEO : Fleur de rose blanche dans un jardin naturel
Decent Alt pour SEO : White rose
Bad alt pour SEO : Fleur

Exemple de texte alternatif n°4

Voiture Tesla transportant de l'électricité sur un parking

Alt parfait pour le SEO : Voiture Tesla transportant avec électricité sur un parking
Decent Alt pour SEO : Tesla sur un parking
Bad alt pour SEO : Voiture

Qu'en est-il des images fonctionnelles ?

Il y a longtemps, dans un monde merveilleux dominé par Internet Explorer 6, HTML et CSS n'offraient pas beaucoup de possibilités aux développeurs frontaux.

exemple d'images fonctionnelles d'un ancien site web
Ce menu est composé d'images fonctionnelles

Les développeurs frontaux n'existaient même pas, car la seule façon de rendre quelque chose esthétique était de mettre une image dans un élément de tableau. Pas de rayon-frontière, pas de boîte d'ombre, etc.

Une des conséquences était que les gens utilisaient des images pour leur menu. Dans de telles situations, il est nécessaire de fournir un texte alternatif à l'image.

Dans notre exemple, chaque élément du menu devrait avoir un texte alt : "Brachiosaurus" pour le premier lien, "Gallimimus" pour le second, etc.

Il n'est pas nécessaire d'ajouter "Lien vers" car l'image sera identifiée comme étant dans un lien.

Grâce au bon sens, à Google, à Mozilla Firefox et au w3c.org, les images fonctionnelles disparaissent peu à peu.

Images décoratives

Comment repérer si une image est décorative ou non ? Vous devez répondre à une double question.

  1. L'image est-elle en quelque sorte liée au contenu dont je parle ?
  2. Cette image offre-t-elle des fonctions importantes, comme la navigation ?
un exemple d'image décorative

Dans cette situation, les étoiles proches du logo WordPress sont principalement décoratives.

En effet, ils ne sont pas directement liés à ce dont nous parlons et ils ne sont pas du tout fonctionnels, puisqu'ils ne fournissent pas de lien externe vers nos incroyables revues WordPress.

Textes Alt dans WordPress : Un guide étape par étape

Dans cette section, j'ai rassemblé tout ce que vous devez savoir sur les textes alt dans WordPress. Commençons par le plus évident : l'ajout d'un texte alternatif à une image dans WordPress.

Comment ajouter un texte alt à une image dans WordPress

Une fois que vous avez téléchargé une image dans WordPress, vous aurez accès à ses métadonnées, qui vous donneront le menu suivant (sur le côté droit de votre écran) :

l'ajout d'un texte alternatif dans WordPress

Vous pouvez, entre autres, modifier le titre de votre image, la légende et le texte alternatif.

Vous pouvez également ajouter des textes alternatifs directement dans la médiathèque.

ajout d'un texte alternatif dans la médiathèque WordPress étape 1

Ajoutez une image et cliquez sur modifier pour accéder aux paramètres de l'image dans WordPress.

ajout d'un texte alternatif dans la médiathèque WordPress étape 2

De là, vous pouvez modifier le texte alternatif, la légende et la description.

Comment ajouter du texte alternatif aux images dans Elementor

Lorsque vous construisez des pages dans Elementor, l'ajout de texte alt est très simple. 

Si vous souhaitez ajouter un texte alternatif à une image, vous pouvez le faire en cliquant sur l'image et une boîte d'image apparaîtra à partir de l'éditeur d'éléments.

ajout de textes alt dans elementor

Dans la boîte à images, cliquez sur l'image et elle s'affichera dans votre médiathèque. 

L'option "Alt Text" est affichée sur le côté droit de la fenêtre.

Vous pouvez modifier la balise alt à partir d'ici.

Obtenir des balises alt d'images fonctionnant dans Divi

Dans le passé, le thème DIVI ne supportait pas les balises ALT de la galerie média.

Heureusement, cela a changé depuis la version 4.4.4.

L'ajout de texte alt dans Divi est facile : vous devez aller dans l'onglet avancé, faire défiler vers le bas et entrer le texte manuellement dans la zone de texte alt.

Balises Alt en vrac dans WordPress

Si vous avez beaucoup de textes alternatifs vides, cela peut prendre des heures pour remplir correctement les textes alternatifs avec un contenu favorable au référencement.

Espérons qu'il existe un plugin nommé Optimiseur d'images SEO qui peut le faire en un clic grâce à l'intelligence artificielle. Je vais vous montrer comment utiliser ce plugin.

Une fois que vous vous êtes inscrit, vous devez cliquer sur l'onglet "Alt & name optimizer ". Choisissez ensuite les paramètres qui vous conviennent.

Ensuite, il suffit de gérer le gros. C'est tout.

Ce plugin est compatible avec les mots-clés ciblés de Yoast et SEOPress.

Dernières réflexions sur l'attribut de texte alt

L'attribut de texte alternatif est vraiment important pour le référencement et l'accessibilité: vous ne devez en aucun cas le négliger.

Rédiger parfaitement des textes alternatifs peut être délicat et prendre beaucoup de temps. J'espère que les explications et les exemples que je vous ai fournis dans cet article vous seront utiles.

Si vous avez des centaines ou des milliers de textes alternatifs à optimiser, assurez-vous de jeter un coup d'œil à Image SEO Optimizer. Ce plugin WordPress pourrait vous faire gagner des heures !

Notre outil de référencement augmentera votre trafic

Pourquoi avez-vous négligé l'optimisation SEO des images ?

Essayez gratuitement !