Titre de l'image contre. Texte alternatif : quel est le meilleur ?

Même avec les nouvelles tendances d'optimisation des moteurs de recherche, l'affirmation selon laquelle une image vaut un million de mots est toujours valable. Une seule image de haute qualité peut potentiellement donner vie au contenu d'un site Web. De plus, un titre img HTML bien écrit est un moyen sûr d'améliorer l'expérience utilisateur.

Mais si vous pensiez que les images consistent uniquement à faire correspondre le contenu et les images, vous allez être surpris. Vous pouvez utiliser des images pour attirer non seulement les visiteurs Web, mais également les moteurs de recherche. Mais pour libérer toute la puissance d'une image, vous devez jeter un coup d'œil sous le capot et comprendre le code HTML qui affiche les images sur votre site Web.

Une fois que vous avez examiné les composants d'une balise d'image, vous pouvez passer à l'optimisation de ceux qui affecteront votre classement dans les moteurs de recherche. Habituellement, les éléments à cibler sont le titre img src et le titre HTML img alt. Connaissez-vous le rôle que ces deux jouent sur votre site Web ? La réponse fera l'objet de cet article.

Comprendre le titre de l'image et le texte alternatif de l'image

La façon la plus simple de connaître la différence entre un titre et un texte alternatif est de regarder une balise d'image HTML. Supposons que votre site Web soit une boutique en ligne vendant des meubles, un exemple de tag sur une image de fauteuil à bascule peut ressembler à :

img src = "rocking-chair.jpg" alt = "fauteuil à bascule marron en vente" title = "fauteuil à bascule marron"

Dans la conception Web, les éléments avec un signe égal reçoivent les attributs de nom. Notez que l'exemple ci-dessus n'est qu'une illustration. Dans les applications du monde réel, les attributs sont bien plus nombreux et peuvent inclure une classe, un identifiant, une hauteur, une largeur, etc.

À partir de la balise, l'identification du texte alternatif et du titre est simple. Vous remarquerez peut-être que l'attribut alt est plus informatif que la balise d'image de titre HTML. Un coup d'œil sur les utilisations des deux attributs révèle pourquoi il en est ainsi.

À quoi sert le titre de l'image ?

Le titre apparaît lorsqu'un utilisateur survole une image sur votre site Web. Ainsi, il n'apparaît qu'après le chargement des images. Au moment où un utilisateur voit le titre, il a déjà vu l'image. En tant que tel, il n'a pas besoin d'être très descriptif. Par example:

Cependant, les titres sont très importants lorsqu'il s'agit d'améliorer l'expérience utilisateur. Croyez-le ou non, les visiteurs peuvent avoir du mal à comprendre pourquoi certaines images de votre site Web apparaissent dans certaines parties de votre site. Un titre est utile pour fournir une réponse.

Certains navigateurs n'affichent pas le titre après avoir survolé une image. Mais comme vous ne savez jamais ce que vos visiteurs utiliseront pour naviguer sur votre site Web, il vaut mieux inclure un attribut de titre dans votre balise d'image.

À quoi sert le texte alternatif ?

Le texte alternatif sert à plusieurs fins. Vous pouvez le décomposer comme suit :

• Le texte alternatif s'affiche chaque fois qu'une image ne se charge pas. Presque tous les navigateurs autorisent des descriptions alternatives pour représenter des images vides. Cela peut être dû à un nom de fichier image incorrect ou à une URL brisée. De mauvaises connexions Internet peuvent également empêcher le bon chargement des images. Dans un tel cas, le titre img alt apparaît et explique au visiteur tout ce qui concerne l'image.
• Le texte alternatif s'affiche également lorsque les utilisateurs désactivent les images. Même si les images embellissent les pages Web, certains utilisateurs préfèrent les versions textuelles uniquement. Ainsi, ils peuvent connaître les images en lisant le texte alternatif.
• Les utilisateurs aveugles bénéficient également de titres img alt bien écrits. Les lecteurs d'écran les utilisent pour décrire une image aux visiteurs qui ne peuvent pas la voir. Généralement, les textes alternatifs aident à augmenter l'accessibilité de votre site. L'importance d'une accessibilité maximale est si grande que le W3C préconise des textes alternatifs. Une ligne de leurs directives se lit comme suit : "Lorsque vous utilisez l'élément img, spécifiez une alternative de texte court avec l'attribut alt."
• Enfin, les moteurs de recherche utilisent des textes alternatifs pour mieux comprendre de quoi parle une image. Ainsi, les textes alternatifs peuvent être explorés, tout comme les autres contenus de votre site Web. L'image ci-dessous montre un exemple de texte alternatif :

(Crédit image : MDN-Mozilla)

Qu'est-ce qui est le plus important : le titre de l'image ou le texte alternatif ?

Il est prudent d'étiqueter l'attribut alt comme plus important après avoir examiné les listes d'utilisations des titres et des textes alternatifs. Cependant, ce serait une erreur de penser que les titres sont inutiles. En vérité, l'un ou l'autre élément peut être important en fonction de vos objectifs.

Si votre principale préoccupation est d'améliorer l'expérience utilisateur, les titres seront votre principal domaine d'intérêt. Comme mentionné, vous pouvez donner des détails supplémentaires sur une image en utilisant des titres. Une fois qu'un utilisateur le survole, la description devrait apparaître.

Mais pourquoi les moteurs de recherche ne prêtent-ils pas beaucoup d'attention aux titres des images ?

Eh bien, la réponse a beaucoup à voir avec le développement des moteurs de recherche. Les développeurs ont écrit la majeure partie de la base de code de Google en 1999. Il y a également eu des ajouts importants l'année suivante. Cependant, ils n'ont jamais considéré les éléments HTML impopulaires et non découverts. Comme les concepteurs de sites Web n'utilisaient pas fréquemment des titres, il n'y avait aucune raison de les prévoir. Les mises à jour du code principal n'ont jamais rendu la balise d'image de titre HTML aussi importante que les autres attributs.

Si vous pensez au référencement, vous devez vous concentrer sur le texte alternatif. N'oubliez pas que Google traite les informations contenues dans l'attribut alt comme du contenu de page Web normal. Ainsi, il l'indexe. De plus, les moteurs de recherche peuvent rencontrer des difficultés pour explorer une image. Les textes alternatifs sont un excellent moyen pour eux de savoir en quoi consiste une image.

De plus, les textes alternatifs élèvent l'accessibilité du site Web à un tout autre niveau. Malgré des techniques telles que le chargement différé, il est presque impossible de garantir que toutes les images de votre site se chargeront 100 % du temps. Un visiteur peut désactiver les images ou avoir une connexion si lente que les images ne se chargent jamais. Armé d'un texte alternatif, vous pouvez être sûr qu'un utilisateur saura ce qu'est une image, qu'elle se charge ou non.

En conclusion, l'importance du texte alternatif dépasse de loin les attributs du titre. Leurs usages sont relativement nombreux et leur impact sur le référencement d'un site est notable. Bien qu'il soit important d'optimiser à la fois le titre et le texte alternatif, il est bon d'accorder plus de poids aux informations de l'attribut alt.

Optimiser le texte alternatif pour le référencement

Le référencement reste l'un des moyens les plus sûrs de générer un trafic de haute qualité de manière organique. Bien qu'il existe de nombreuses façons d'optimiser un site Web, le perfectionnement du texte alternatif est idéal pour configurer les images de votre site afin d'augmenter le trafic. Heureusement, le processus est simple. Certaines des pratiques à prendre en considération sont :

Testez le référencement et les performances de votre site en 60 secondes !

Une bonne conception de site Web est essentielle à l'engagement et aux conversions des visiteurs, mais un site Web lent ou des erreurs de performances peuvent rendre même le site Web le mieux conçu sous-performant. Diib est l'un des meilleurs outils de surveillance des performances et du référencement des sites Web au monde. Diib utilise la puissance du Big Data pour vous aider à augmenter rapidement et facilement votre trafic et vos classements. Comme on le voit dans Entrepreneur !

• Outil de référencement automatisé facile à utiliser
• Surveillance des mots-clés et des backlinks + idées
• Assure la vitesse, la sécurité, + le suivi Core Vitals

• Suggère intelligemment des idées pour améliorer le référencement
• Plus de 250 000 000 membres dans le monde
• Analyse comparative et analyse des concurrents intégrée

Par exemple « www.diib.com »

Inscription gratuite

Utilisé par plus de 250 000 entreprises et organisations :

• 
• 
• 
• 

Se synchronise avec

Écrire pour les humains

Lorsqu'il s'agit d'écrire des textes alternatifs, la règle d'or est la suivante : "écrivez comme si vous écriviez pour une personne aveugle". Compte tenu des occasions où le texte alternatif s'affiche, le respect de la règle à tout moment ne fait aucun mal. Comme mentionné, les informations contenues dans le titre img alt s'affichent lorsque les images ne peuvent pas s'afficher. Ainsi, vous voulez qu'il dise tout sur l'image cachée.

En tant que tel, écrivez une déclaration qu'un humain peut lire et comprendre. Plus important encore, composez une phrase descriptive. Une personne aveugle navigue peut-être sur votre site, et ce que vous avez tapé serait la seule chose à retenir. L'image ci-dessous montre un bon et un mauvais exemple de texte alternatif pour la même image :

(Crédit d'image : Hub d'hébergement Web)

Ecrire pour les moteurs de recherche

Un texte alternatif ne fournit pas seulement une description de l'image aux utilisateurs mais aussi aux moteurs de recherche. Ainsi, incluez-y un mot-clé. Comme tout autre contenu, assurez-vous de noter qu'il contient un mot-clé qui rime avec le flux général de la page Web dans laquelle se trouve l'image.

Dans le même ordre d'idées, évitez les mauvaises pratiques de référencement telles que le bourrage de mots clés. Les moteurs de recherche signaleront votre contenu comme spam, ce qui maintiendra votre classement vers le bas. Il vaut mieux mal écrire un texte alternatif que de le bourrer de mots-clés. Pour vérifier, assurez-vous que vous n'utilisez pas le mot-clé dans plus de 70 % de vos images.

Soyez bref

Le texte alternatif décrit une image, et il peut être tentant de mettre beaucoup de mots entre les guillemets de l'attribut alt. Mais abstenez-vous de le faire. Les moteurs de recherche ne vous puniront pas pour cela, mais leur intérêt se porte sur les seize premiers mots de la description alternative. Un texte alternatif de 125 caractères doit décrire correctement une image sans compromettre l'expérience utilisateur.

Cependant, si vous estimez qu'une image nécessite une longue description, il est judicieux d'utiliser l'attribut « longdesc ». HTML4 et ses successeurs autorisent cet attribut dans la balise image.

Exemples de texte alternatif

Lorsque vous débutez avec le référencement, il peut être un peu difficile de comprendre la différence entre un texte alternatif bien écrit et un texte alternatif mal écrit. Ainsi, regarder des exemples est utile. À des fins d'illustration, imaginez une image d'une voiture rouge à grande vitesse sur votre site Web.

Votre balise d'image peut ressembler à :

img src = "speeding-car.jpg" alt = "voiture rouge" title = "voiture"

Dans un tel cas, le texte alternatif n'est pas idéal. Il fournit très peu d'informations sur l'image. Une meilleure version peut apparaître comme :

img src = "speeding-car.jpg" alt = "voiture rouge accélérant sur une autoroute" title = "voiture"

Si vous connaissez le nom de l'autoroute, il n'y a aucun mal à le mentionner dans le texte alternatif. À tout prix, évitez de compromettre vos mots-clés ou le bourrage de mots-clés. Par exemple, si la phrase clé de votre page Web est "voiture rouge", évitez une description telle que :

img src = "speeding-car.jpg" alt = "Ceci est une voiture rouge. La voiture rouge se déplace très vite et est une si belle voiture rouge "title =" voiture "

Alors que la description ci-dessus se concentre uniquement sur l'image, le bourrage de mots-clés l'entache. Les moteurs de recherche désapprouveront de telles phrases de spam. La deuxième phrase ne fournit pas d'informations utiles sur l'image à l'utilisateur. En conséquence, la chose astucieuse à faire est de l'exclure.

Comment ajouter un texte alternatif

La procédure d'inclusion d'un texte alternatif dans la balise d'image dépend de ce que vous avez utilisé pour créer un site Web. Si vous avez écrit le code dur du site Web, il est préférable d'ajouter l'attribut alternatif manuellement. Par example:

Cependant, le développement Web d'aujourd'hui n'implique pratiquement aucun codage en dur. Il y a de fortes chances que vous ayez utilisé un système de gestion de contenu (CMS) ou un constructeur de site Web. Assurez-vous de savoir quel processus votre outil de conception Web utilise lors de l'ajout de tous les textes. Habituellement, la méthodologie comporte deux ou trois étapes.

Dans le CMS le plus populaire au monde, WordPress, ajouter un titre HTML img alt est une promenade dans le parc. Une fois connecté à votre compte, localisez l'image en question et cliquez sur le bouton "Modifier". Un champ de saisie apparaît prêt à recevoir les données de l'attribut alternatif.

Vous pouvez inclure des textes alternatifs dans la médiathèque de WordPress. Après avoir sélectionné une image, localisez le champ de saisie de description alternative qui s'affiche sous les détails de la pièce jointe de l'image. Par exemple:

(Crédit image : WPBeginner)

Quand laisser l'attribut Alt vide

Étant donné le rôle important que jouent les attributs alt dans le référencement, vous aurez peut-être du mal à croire que c'est parfois une bonne idée de les laisser vides. Imaginez une image placée sur un site Web à des fins de positionnement uniquement. L'image ne rime pas avec le contenu ni ne lui apporte de valeur. Un concepteur de sites Web peut utiliser ces images dans le seul but de décorer une page.

Ces images de conception uniquement peuvent avoir un attribut alternatif nul. Les décrire serait imprudent car ils n'ajoutent aucune valeur au contenu disponible. Les lecteurs d'écran ignoreront les images, ce qui est normal car elles n'aident pas l'utilisateur à mieux comprendre la page.

Il est également recommandé d'exclure le texte alternatif des images contenant des mots. Toutes les informations sont sur l'image. Une description des mots ne serait donc pas pertinente.

Optimiser le titre

Comme le titre n'affecte pas le classement de la recherche, il n'y a pas grand-chose à faire à ce sujet. Dans la plupart des cas, il est plus court et moins descriptif que le texte alternatif. Plutôt que de donner plus d'informations sur une image, un titre lui donne un nom.

Cependant, le W3C préconise ouvertement l'inclusion d'un titre dans une balise d'image. Votre code HTML peut être invalide pour le W3C si vous ne donnez pas de titre à vos images.

Lors de la rédaction du titre, composez un texte non seulement court mais aussi accrocheur. Cela dit, les titres composés d'un seul mot sont interdits. Une phrase qui décrit une image et se compose de pas plus de dix mots devrait suffire. Par example:

Contrairement à la balise alt, que vous pouvez parfois omettre, il n'y a pas d'occurrences particulières qui justifient l'exclusion des titres d'image. Les images sans titre ne servent qu'à compromettre l'expérience utilisateur. Par conséquent, il est dans l'intérêt de tout spécialiste du référencement de ne pas afficher une balise d'image de titre HTML nulle.

Nous espérons que vous avez trouvé cet article utile.

Si vous souhaitez en savoir plus sur la santé de votre site, obtenir des recommandations et des alertes personnalisées, analysez votre site Web par Diib. Cela ne prend que 60 secondes.

Entrez votre site Web

Par exemple « www.diib.com »

Inscription gratuite

Je ne peux pas obtenir assez de DIIB !! Le meilleur outil et je suis tellement reconnaissant de l'avoir trouvé. Je l'aime absolument !! Les doigts croisés, vous n'augmentez pas vos prix car c'est tellement parfait.

Katarina Gagé
Directeur des opérations sur ahoymatey.com.au

Autres considérations relatives aux images

Indubitablement, les images ne se limitent pas aux textes alternatifs et aux titres. Optimiser le premier et perfectionner le second n'est qu'une partie de l'équation. Pour exploiter pleinement l'impact des images sur le référencement, tenez compte des bonnes pratiques suivantes en matière d'imagerie Web :

Gardez les données textuelles vitales hors des images

Il vaut mieux écrire des mots que de les peindre sur une image. N'oubliez pas que les moteurs de recherche n'explorent pas une image en profondeur et ne peuvent pas accéder aux mots d'une image. À moins que HTML ne parvienne pas à produire des données textuelles comme vous le souhaitez, par exemple, lors de l'écriture d'équations chimiques complexes, évitez les images remplies de mots.

Cependant, il n'y a pas de mal à utiliser des images pour afficher des graphiques. HTML peut fournir la fonctionnalité, mais les images sont une solution supérieure.

Attention au contexte

L'image que vous affichez doit se fondre avec les informations fournies par une section. Ce serait une mauvaise idée d'inclure une image de voiture sur une page qui parle de vêtements de plein air. En même temps, laissez vos images être aussi originales que possible. Les moteurs de recherche apprécient les images originales comme ils apprécient le contenu authentique.

Écrire un bon nom de fichier d'image

Les noms de fichiers apparaissent dans l'attribut de titre img src de la balise d'image. Les moteurs de recherche l'utilisent pour en savoir plus sur les images de votre site.

Par défaut, les images ont des noms de fichiers alphanumériques, tels que :

A00002.jpg

Assurez-vous de changer les noms afin qu'ils reflètent le contenu de l'image. Pendant que vous y êtes, n'oubliez pas de couper les noms de fichiers qui dépassent un mot. Un nom comme red-car-on-highyway.jpg serait difficile à lire pour les moteurs de recherche si les traits d'union manquent. Cependant, ne modifiez pas le format de l'image, c'est-à-dire les lettres après le point. Les navigateurs peuvent être confus si un format est différent de celui donné par le nom de fichier.

Laissez vos images créer la différence SEO

En matière de référencement, il est indéniable que le contenu est roi. Mais les images font autant partie du contenu de votre site Web que les mots. En apprenant l'art de perfectionner le titre HTML img et d'optimiser le titre HTML img alt, vous pouvez commencer à utiliser des images pour augmenter le classement de votre site.

Diib : Optimisez vos titres d'image dès aujourd'hui !

Si vous êtes coincé avec l'utilisation d'images pour le référencement, n'oubliez pas de consulter les centaines d'outils dédiés à l'optimisation des images. Vous pouvez également engager un spécialiste du référencement pour vous aider avec votre site Web pendant que vous vous concentrez sur votre entreprise. Mais avant de penser aussi loin, prenez le premier et commencez à utiliser des images pour augmenter le trafic par vous-même. Ensuite, associez-vous à Diib Digital pour tirer le meilleur parti de vos titres d'images. Notre User Dashboard vous donnera des alertes et des objectifs destinés à optimiser, entre autres, vos titres d'images.

Voici quelques-unes des fonctionnalités qui nous distinguent de la foule :

• Objectifs personnalisés conçus pour améliorer les performances du site Web
• Alertes qui vous informent sur votre autorité de domaine d'autres problèmes techniques de référencement
• Pages cassées où vous avez des backlinks (vérificateur 404)
• Outils de surveillance et de suivi des mots clés, des backlinks et de l'indexation
• Expérience utilisateur et optimisation de la vitesse mobile
• Optimisation du titre de l'image
• Post-performance spécifique à la plate-forme

Cliquez ici pour votre analyse gratuite ou appelez simplement le 800-303-3510 pour parler à l'un de nos experts en croissance.