En plus du texte, les images et les graphiques sont les éléments visibles les plus importants d’un site web. Ils ne doivent donc pas être négligés quand vous souhaitez mettre en place des mesures d’optimisation.
Pour assurer que vos visiteurs obtiennent toujours des informations pertinentes sur vos images en cas de problèmes techniques ou lorsque les éléments graphiques épuisent leurs lignes DSL, il est conseillé de les décrire dans le code source à l’aide des attributs ALT et title. Cet article vise à vous apprendre comment bien préparer vos images pour le référencement et comment correctement insérer les descriptions.
Les attributs ALT font référence à une alternative (ALT) de texte, qui est intégrée dans le fichier image sur un site web et qui décrit le contenu du graphique en question. Si l’image ne peut pas être affichée pour n’importe quelle raison, le texte de l’attribut ALT intégré apparaîtra. Les moteurs de recherche utilise cet attribut pour reconnaître le contenu des images, car les fichiers images ne sont normalement pas directement lus.
L’attribut ALT apparaît au sein du code source comme suit :
<img src="directory/figure.jpg" alt="Voici une bonne description">
L’attribut title (ou attribut universel), quant à lui, présente à l’utilisateur des informations au sujet de l’image après un léger décalage, quand on passe le curseur sur l’image (ce qu’on appelle en anglais le mouse-over). Il ne doit pas être confondu avec le meta title, qui lui est important pour le snippet qui décrit les contenus d’un site web dans sa globalité. L’attribut title sert principalement l’opérabilité (utilisabilité) et est particulièrement important quand aucun signature image n’est disponible. Dans ce cas, par exemple, les droits d’auteur peuvent aussi être intégrés dans l’attribut title.
L’attribut title peut être inséré de cette façon :
<img src="directory/figure.jpg" width="100" height="150" alt="Voici une bonne description" title="Et voici l’attribut title" >
Des descriptions alternatives pour les images et les graphiques ne jouent pas seulement un grand rôle dans l’optimisation on-page, mais aussi pour l’accessibilité sur toute la toile. Les personnes avec des déficiences auditives ou visuelles utilisent des navigateurs vocaux ou des lecteurs d’écran (applications de lecture) pour surfer sur Internet au lieu d’un mode texte classique. Les descriptions d’images de contenus visuels, comme les graphiques, les animations ou des vidéos, sont lues à haute voix. Si l’attribut ALT est manquant, certains lecteurs d’écran lisent une partie du nom du fichier.
Il peut y avoir plusieurs raisons pour lesquelles une image n’est pas affichée. Par exemple, il se peut que l’agent utilisateur ne supporte pas les images ou que des problèmes liés au serveur soient rencontrés. L’image disparaît aussi si le fichier ne plus être atteint sur le serveur dans le cas où un dossier d’images ou un répertoire racine a été déplacé ou accidentellement supprimé. De plus, certains navigateurs et utilisations mobiles ne présentent pas les graphiques.
En théorie, il n’y a pas de limite de longueur de texte pour un attribut ALT. Cependant, il est conseillé de n’utiliser que quelques mots pour décrire de manière informative votre image et pour transmettre les informations essentielles aux moteurs de recherche.
Ainsi, vérifiez la qualité de vos textes d’images en vous orientant grâce aux questions suivantes :
Supposons que vous mettez en place un blog externe sur le café et que vous voulez le promouvoir sur votre site principal. Si vous présentez une image d’une tasse de café avec du lait et du sucre et la référez sur votre propre blog, vous la décrirez idéalement comme de la façon suivante :
Illustration 1 : affichage sans trouble de l’élément graphique dans le navigateur
Si le site ne charge pas correctement, l’utilisateur apercevra un espace réservé ainsi qu’un attribut image. Au lieu de l’image, l’attribut ALT "tasse de café en lait avec du sucre" apparaîtra, ainsi que l’attribut title "Article de blog sur les spécialités de café". Remplissez l’attribut title avec une description qui pourrait être attendue par les lecteurs qui cliquent sur l’image ou l’emplacement vide. Dans notre exemple, l’utilisateur sera dirigé vers votre blog et pourra en apprendre davantage sur le monde du café.
Illustration 2 : élément de substitution pour une image non affichée
L’étape suivante consiste à saisir l’URL du blog sur le café dans le texte source du site. La balise d’image commence avec la source d’image, c’est-à-dire le fichier correspondant dans votre répertoire racine (img src). Après alt= se trouve l’attribut ALT entre guillemets, puis vient l’information relative à la hauteur et la largeur de l’élément. Dans notre cas, l’image mesure 400x266 pixels.
<p><a href="https://www.mycoffeeblog.com" target="_blank"><img src="../imgs/coffee-milk-sugar.jpg" alt="tasse de café au lait avec du sucre" width="400" height="266" title="article de blog sur les spécialités de café"/></a></p>
D’autres éléments de design doivent aussi être dotés d’un attribut ALT. Certains graphiques, appelés décorations ou images décoratives, ne transmettent aucun contenu. Ce peut être par exemple des images d’arrière-plan, des boutons ou des lignes. Ne laissez pas l’attribut ALT simplement vide, mais comblez-le avec un remplaçant (alt=""). De cette façon, les moteurs de recherche et les lecteurs d’écran ignorent ces éléments car ils ne sont de toute évidence pas importants pour la compréhension du site. Les images décoratives ne sont pas intégrées dans le code, mais appréhendées comme des images d’arrière-plan utilisant le CSS. Une image sans attribut ALT apparaîtra alors dans le navigateur en tant qu’icône vide.
Tout comme l’optimisation on-page sur un site web, l’optimisation des images pour les moteurs de recherche se déroule à différents niveaux : le niveau visible, le niveau méta ainsi qu’au niveau de l’image-même. Les facteurs de qualité, de description et sur la taille de vos images peuvent contribuer de manière décisive à l’augmentation de la visibilité de votre site.
Faites attention aux facteurs suivants quand vous éditez et sauvegardez vos images :
1. Des images de qualité donnent une apparence de professionnalité et contribuent à l’optimisation du référencement. Google confirme par ailleurs l’importance de la qualité des images :
2. Cependant, la vitesse de chargement de votre site ne doit pas en pâtir. Ne téléchargez pas des images plus lourdes que nécessaire et compressez-les à l’aide d’un outil tel que tinypng. Redimensionnez les images à la bonne taille dans un programme d’édition et insérez-les une par une dans le code source.
3. Décidez de quel format d’image est le mieux adapté pour vous : le JPG est généralement idéal en raison de sa compression efficace, tandis que le PNG offre une compression sans perte tout en nécessitant plus d’espace de stockage. Les GIF sont utiles uniquement pour les animations. Le format SVG est, quant à lui, adapté aux graphiques vectoriels.
4. Le nom du fichier, tout en étant informatif, ne doit pas être trop long. Certains termes peuvent être séparés avec des traits d’union (et non pas avec le underscore). Une bonne structure des dossiers assure également un bon classement.
5. Ajoutez "height" et "width" à toutes les images. Quand il en connaît les valeurs, le navigateur web commence à lancer un site avant que toutes les images ne soient chargées. Cela optimise votre vitesse de chargement.
6. Nommez votre source d’image correctement : les symboles d’auteur et de droits d’auteur de l’image doivent être indiqués dans la signature. Un emplacement caché accessible par le mouse-over n’est pas suffisant.
Un sitemap d’images est un support supplémentaire pour les moteurs de recherche : cet élément permet de classer jusqu’à 1000 images. Dans son forum d’aide, Google a clairement déclaré :
En rassemblant toutes les URL d’images dans un sitemap XML et en les téléchargeant sur Google Search Console, vous pouvez assurer l’indexation des fichiers images.
Créer un sitemap d’images en quelques étapes :
Illustration 3 : exemple d’un sitemap d’images
L’intégration correcte d’images offre un avantage évident pour l’optimisation du référencement. Avec les attributs ALT et title, d’excellentes images améliorent la pertinence thématique du site, ce qui augmente les chances d’obtenir de meilleurs classements.
Grâce à un bon SEO image, vous pouvez non seulement augmenter la visibilité de votre site web mais aussi générer un trafic indirect. Vous obtiendrez plus de visiteurs sur votre site web si vos graphiques reçoivent des clics dans le cadre d’une recherche d’images Google. Pour Google, l’attribut ALT est un paramètre important pour l’optimisation on-page. Avec une appellation correcte, vous augmentez vos chances d’être trouvés dans la recherche d’images Google en utilisant le mot-clé principal. Même si votre site n’est pas facilement localisable, vous avez une chance d’accéder à de très bons classements grâce à des images de qualité via la recherche universelle : il se peut qu’un site web ne soit pas référencé dans les classements supérieurs par son URL, mais plutôt grâce à ses images.
Si vous utilisez des images de haute qualité tout en les compressant correctement, vous améliorez la facilité d’utilisation et la vitesse de votre site web. La compression est particulièrement importante en ce qui concerne l’optimisation mobile, car les smartphones fonctionnent généralement avec moins de débit. De gros fichiers images retardent inutilement le chargement de la page.
Petit récap des avantages du SEO images :
Afin d’assurer une navigation sans entrave, que ce soit sur des écrans d’ordinateurs ou mobiles, il est fortement conseillé d’inclure des images dotées d’attributs ALT et title. Vous devriez également prendre le temps d’ajouter à toutes vos images des textes alternatifs appropriés. Pour une exploration plus rapide et une reconnaissance correcte de vos graphiques, le placement de descriptions appropriées vaut son pesant d’or. Cela améliore votre temps de chargement et donc l’utilisabilité, qui sont en outre des facteurs importants pour la navigation sur les appareils mobiles.
Sûr de la qualité des images sur votre site Web ?
Découvrez Website SuccessÉcrit le 04.04.2017 par Eva Wagner.
Eva rassemble beaucoup d'expérience dans le marketing. En 2015, elle devient un super-héros à Ryte. Avec beaucoup de créativité et un sens affiné pour les sujets d'actualité, elle gérait les activités de rédaction de Ryte. Elle organisait aussi la participation de l'entreprise à de grands événements et salons, comme la dmexco de Cologne.
Suivi, analyse et optimisation de vos actifs numériques grâce à notre technologie unique
S’inscrire gratuitement