Dans un récent podcast Search Off the Record, l’équipe Search Relations de Google a mis en garde les développeurs contre l’utilisation de CSS pour toutes les images de sites Web.
Bien que les images d’arrière-plan CSS puissent améliorer la conception visuelle, elles sont invisibles dans Google Image Search. Cela pourrait conduire à des opportunités manquées en matière d’indexation d’images et de visibilité dans les recherches.
Voici ce que conseillent les Search Advocates de Google.
Contents
Le problème des images CSS
Au cours de l’épisode, John Mueller a partagé un problème récurrent :
« Quelqu’un m’a envoyé un ping la semaine dernière ou une semaine avant sur les réseaux sociaux : « On dirait que mon développeur a décidé d’utiliser CSS pour toutes les images parce qu’il pense que c’est mieux. Est-ce que ça marche ?
Selon l’équipe de Google, cette approche découle d’une mauvaise compréhension de la manière dont les moteurs de recherche interprètent les images.
Lorsque des visuels sont ajoutés via les propriétés d’arrière-plan CSS au lieu des balises d’image HTML standard, ils peuvent ne pas apparaître dans le DOM de la page et ne peuvent donc pas être indexés.
Comme l’explique Martin Splitt :
« Si vous avez une image de contenu, si l’image fait partie du contenu… vous voulez une
imgune balise d’image ou unpicturebalise qui a en fait l’image réelle dans le cadre du DOM parce que vous voulez que nous voyions comme ah donc cette page a cette image qui n’est pas seulement une décoration. Cela fait partie du contenu et la recherche d’images peut ensuite la récupérer.
Contenu vs décoration
La différence entre une image de contenu et une image décorative est de savoir si elle ajoute du sens ou si elle est purement cosmétique.
Les images décoratives, telles que les arrière-plans à motifs, les effets atmosphériques ou les animations, peuvent être implémentées en toute sécurité à l’aide de CSS.
Lorsque l’image véhicule un sens ou est référencée dans le contenu, CSS ne convient pas.
Splitt a proposé l’exemple suivant :
« Si j’ai un article de blog sur ce paysage spécifique et que je veux dire aux gens de regarder cette incroyable vue panoramique du paysage ici et que c’est ensuite une image d’arrière-plan… le problème est que le contenu fait spécifiquement référence à cette image, mais il n’a pas l’image dans le contenu.
Dans de tels cas, placer l’image au format HTML à l’aide du img ou picture La balise garantit qu’elle est comprise comme faisant partie du contenu de la page et qu’elle est éligible à l’indexation dans Google Image Search.
Qu’est-ce qui rend les images CSS invisibles ?
Splitt a expliqué pourquoi cela se produit :
« Pour un utilisateur qui regarde le navigateur, de quoi parlez-vous, Martin ? L’image est juste là. Mais si vous regardez le DOM, elle n’est absolument pas là. C’est juste un élément CSS qui a été chargé pour styliser la page. »
Étant donné que Google analyse le DOM pour déterminer la structure du contenu, les images stylisées uniquement via CSS sont souvent négligées, surtout si elles ne sont pas incluses en tant qu’éléments HTML réels.
Cette distinction reflète un principe de développement Web plus large.
« Idéalement, il y a une séparation entre l’apparence du site et le contenu. »
Qu’en est-il des photos d’archives ?
L’équipe a abordé l’utilisation de photos d’archives, qui sont parfois ajoutées pour un attrait visuel plutôt que pour un contenu original.
Split dit :
« Le sens est toujours que cette image n’est pas la mienne. C’est une image de stock que nous avons achetée ou sous licence mais elle fait toujours partie du contenu », a noté l’équipe.
Même si ces images peuvent ne pas être bien classées en raison de la duplication, leur mise en œuvre en HTML contribue néanmoins à garantir une indexation appropriée et à améliorer l’accessibilité.
Pourquoi c’est important
L’équipe a mis en évidence plusieurs exemples dans lesquels une mise en œuvre inappropriée pourrait réduire la visibilité :
- Annonces immobilières: Les photos personnelles utilisées comme images d’arrière-plan n’apparaîtront pas dans les requêtes de recherche d’images pertinentes.
- Articles de presse: Les graphiques ou infographies ajoutés via CSS ne peuvent pas être indexés, ce qui affaiblit la visibilité.
- Sites de commerce électronique: Les images de produits intégrées dans les styles d’arrière-plan peuvent ne pas apparaître dans les recherches liées aux achats.
Que faire ensuite
Les commentaires de Google indiquent que vous devez suivre ces bonnes pratiques :
- Utilisez HTML (
imgoupicture) balises pour toute image qui transmet du contenu ou qui est référencée sur la page. - Réservez les arrière-plans CSS pour les visuels décoratifs qui n’ont pas de sens.
- Si les utilisateurs peuvent s’attendre à trouver une image via la recherche, elle doit être au format HTML.
- Une mise en œuvre appropriée aide non seulement au référencement, mais également aux outils d’accessibilité et aux lecteurs d’écran.
Regarder vers l’avenir
Les éditeurs doivent être attentifs à la manière dont les images sont mises en œuvre.
Bien que CSS soit un outil de conception puissant, son utilisation pour fournir des images liées au contenu peut entrer en conflit avec les meilleures pratiques en matière d’indexation, d’accessibilité et de stratégie de référencement à long terme.
Écoutez l’épisode complet du podcast ci-dessous :
Image en vedette : Romain Samborskyï/Shutterstock