Comprendre l'attribut de titre de l'image

Optimiser les images de votre site Web n'est pas une mince tâche. Non seulement vous devez vous assurer que la taille de leurs fichiers est gérable pour éviter les longs temps de chargement des pages, mais ils présentent également de nombreuses opportunités d'améliorer votre optimisation pour les moteurs de recherche (SEO) qui sont faciles à ignorer. Par exemple, vous ignorez peut-être l'attribut du titre de l'image et le rôle qu'il joue dans les éléments visuels de votre site.

Dans cet article, nous allons faire la lumière sur l'attribut du titre de l'image, discuter de sa différence avec l'attribut alt et expliquer ce que cela signifie pour votre stratégie de référencement. Nous vous montrerons également comment le cacher aux visiteurs de votre site.

Plongeons dedans !

Abonnez-vous à notre chaîne Youtube

Une introduction à l'attribut de titre d'image

Tout d'abord : l'attribut du titre de l'image n'est pas le même que le nom du fichier de l'image. Il s'agit plutôt d'informations qui peuvent être incluses dans la balise HTML de la photo ou du graphique. Voici un exemple, avec l'attribut title à la fin :

<img src="filename.jpg" alt="description of your image" title="image title">

L'impact le plus notable de l'attribut title est que les utilisateurs peuvent le voir comme une "info-bulle" sur le front-end de votre site lorsqu'ils survolent l'image :

Tous les navigateurs ne prennent pas en charge cette fonctionnalité. Cependant, Firefox est l'un des rares à le faire, et c'est le troisième navigateur le plus populaire sur le Web. Vous pouvez ajouter des attributs de titre d'image dans WordPress via votre médiathèque. Cliquez simplement sur l'image en question et remplissez le champ Titre :

Vous pouvez également l'ajouter directement dans l'éditeur de blocs. Développez les paramètres avancés pour le bloc d'image et remplissez le champ Attribut de titre :

Le but de rendre le titre de l'image visible au survol est de fournir un peu de contexte supplémentaire à vos visiteurs. Par exemple, certains créateurs de contenu incluront les noms des personnes représentées dans l'image, ou des détails clés que les utilisateurs peuvent bénéficier de connaître.

Cependant, vous ne voulez pas vous fier exclusivement à l'attribut title, d'autant plus qu'il n'est pas visible pour les utilisateurs dans tous les navigateurs. Dans certains cas, une légende peut être plus efficace. De plus, vous devez toujours vous assurer d'ajouter du texte alternatif à vos images, même si elles ont des attributs de titre.

Lors de la création de vos attributs de titre, il est préférable de les limiter à quelques mots. Soyez sélectif et descriptif afin que le texte de survol ne soit pas trop long et apporte de la valeur à vos visiteurs.

La différence entre l'attribut Title et l'attribut Alt

Nous avons mentionné plus tôt qu'il est important d'ajouter du texte alternatif à vos images même si vous avez inclus un attribut de titre. C'est une erreur courante pour les créateurs de contenu de confondre l'attribut titre de l'image avec l'attribut alt, ou de supposer que l'utilisation des deux est exagérée.

L'attribut alt spécifie le texte alt de l'image dans sa balise HTML. C'est le deuxième attribut répertorié dans notre exemple d'avant :

<img src="filename.jpg" alt="description of your image" title="image title">

Le but du texte alternatif est de décrire les éléments visuels aux utilisateurs qui ne peuvent pas les voir, soit parce que l'image n'a pas pu se charger, soit parce qu'ils utilisent un lecteur d'écran. Ce texte sera affiché à la place de l'image dans les cas où il ne peut pas être rendu :

Dans WordPress, vous pouvez ajouter du texte alternatif aux images via votre médiathèque ou les paramètres de n'importe quel bloc d'image dans l'éditeur de blocs. Ceci est essentiel pour garantir que votre site respecte les normes d'accessibilité, nous vous encourageons donc fortement à le faire.

Il est extrêmement important de ne pas essayer d'utiliser l'attribut titre de l'image pour remplacer l'attribut alt. Tous les lecteurs d'écran ne prennent pas en charge l'attribut title, et il n'y a aucun moyen pour les utilisateurs qui s'appuient sur la navigation au clavier de survoler une image pour la voir, ce qui pourrait entraîner de graves problèmes d'accessibilité sur votre site.

Comment l'attribut du titre de l'image affecte le référencement

Il y a beaucoup de messages mitigés en ce qui concerne l'importance de l'attribut du titre de l'image pour le référencement. Certains prétendent que c'est un excellent moyen d'incorporer des mots-clés supplémentaires, tandis que d'autres disent que les robots des moteurs de recherche ne l'explorent même pas.

Pour aller droit au but, l'attribut du titre de l'image n'est pas un facteur de classement direct. Optimiser vos images en ajoutant des titres à chacune d'entre elles ne changera probablement pas de manière significative la visibilité de vos pages dans les résultats des moteurs de recherche.

Cependant, inclure des attributs de titre ne nuira pas non plus à votre site du point de vue du référencement. En fait, Google le recommande. Si les robots des moteurs de recherche les explorent et que vous intégrez des mots-clés, vous pourrez peut-être au moins donner un coup de pouce à vos images dans les résultats de recherche Google Image.

De plus, les titres d'images peuvent améliorer l'expérience utilisateur (UX) de votre site en partageant des informations clés avec les visiteurs. Cela peut contribuer indirectement au référencement en influençant les facteurs de classement tels que les pages vues, la durée de la session et d'autres mesures de ce type.

Même ainsi, comme nous l'avons mentionné à plusieurs reprises, tous les navigateurs et appareils ne prennent pas en charge le texte de survol. Parcourir votre médiathèque et ajouter des titres à chaque fichier pourrait être une énorme perte de temps si la plupart de vos utilisateurs ne le verront jamais.

Comment masquer l'info-bulle du titre de l'image dans WordPress

Vous préférerez peut-être masquer l'info-bulle du titre de l'image. Vous craignez peut-être que les visiteurs le trouvent ennuyeux ou que vous vouliez l'utiliser principalement à des fins de référencement, mais ne pensez pas que cela soit nécessaire pour aider les lecteurs à comprendre votre contenu.

Vous pouvez simplement supprimer l'attribut title de vos images dans l'éditeur de blocs et votre médiathèque. Cependant, vous perdrez alors tous les avantages potentiels du référencement que vous pourriez en tirer.

La plupart des personnes qui souhaitent masquer l'info-bulle finissent par ajouter du JavaScript à leurs sites afin qu'elles puissent conserver l'attribut dans leurs balises d'image mais l'empêcher de s'afficher sur le front-end. Nous vous recommandons d'utiliser un plugin tel que Insérer des en-têtes et des pieds de page pour faciliter ce processus.

Ajoutez le code suivant dans la section <head> , enveloppé dans des balises de script :

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

Si vous utilisez Divi, vous pouvez ignorer l'installation du plugin supplémentaire et ajouter ce code en accédant à Divi > Options du thème > Intégration :

Le premier éditeur de code sur cet écran ajoutera le JavaScript à la section <head> de votre site, tout comme le ferait Insérer des en-têtes et des pieds de page.

Conclusion

Il est possible de créer du contenu en ligne pendant des années sans jamais penser aux attributs de titre de vos images. Cependant, les ignorer complètement pourrait être une occasion manquée de fournir un contexte supplémentaire à vos utilisateurs. Plus important encore, une mauvaise utilisation de cet attribut pourrait avoir des conséquences négatives sur l'accessibilité et le référencement de votre site.

Dans cet article, nous avons discuté des différences entre l'attribut titre de l'image et l'attribut alt afin que vous puissiez maximiser votre référencement. Nous vous avons également expliqué comment masquer l'info-bulle du titre de l'image sur le front-end afin que les visiteurs ne puissent pas la voir lorsqu'ils survolent une photo ou un graphique.

Avez-vous des questions sur l'attribut du titre de l'image ou l'optimisation de l'image ? Laissez-les nous dans la section commentaires ci-dessous!

Image de Jane Kelly / Shutterstock.com