Dans une récente recherche sur le podcast d'enregistrement, l'équipe des relations de recherche de Google a mis en garde les développeurs contre CSS pour toutes les images du site Web.
Bien que les images d'arrière-plan CSS puissent améliorer la conception visuelle, elles sont invisibles pour la recherche d'images Google. Cela pourrait conduire à des opportunités manquées dans l'indexation d'images et la visibilité de la recherche.
Voici ce que les défenseurs de la recherche de Google conseillent.
Le problème de l'image CSS
Au cours de l'épisode, John Mueller a partagé un problème récurrent:
« J'ai eu quelqu'un qui me fait cingler, je pense que la semaine dernière ou une semaine avant sur les réseaux sociaux: » Il semble que mon développeur ait décidé d'utiliser CSS pour toutes les images parce qu'ils croient que c'est mieux. » Cela fonctionne-t-il?
Selon l'équipe de Google, cette approche découle d'un malentendu de la façon dont les moteurs de recherche interprètent les images.
Lorsque des visuels sont ajoutés via des propriétés d'arrière-plan CSS au lieu des balises d'image HTML standard, elles peuvent ne pas apparaître dans le DOM de la page et ne peuvent donc pas être indexées.
Comme l'a expliqué Martin Splitt:
«Si vous avez une image de contenu, si l'image fait partie du contenu… vous voulez un
imgune balise d'image ou unpictureTag 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 la décoration. Il fait partie du contenu, puis la recherche d'images peut le récupérer. »
Contenu vs décoration
La différence entre une image de contenu et une image décorative est de savoir s'il ajoute du sens ou est purement cosmétique.
Les images décoratives, telles que des arrière-plans à motifs, des effets atmosphériques ou des animations, peuvent être implémentées en toute sécurité à l'aide de CSS.
Lorsque l'image transmet un sens ou est référencée dans le contenu, CSS est un mauvais ajustement.
Splitt a offert l'exemple suivant:
« Si j'ai un article de blog sur ce paysage spécifique et que je veux aimer dire aux gens comme regarder cette vision panoramique incroyable du paysage ici et ensuite c'est 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 cadre du contenu. »
Dans de tels cas, plaçant l'image en HTML en utilisant le img ou picture TAG garantit qu'il est compris comme faisant partie du contenu de la page et é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, ce n'est absolument pas là. C'est juste une chose CSS qui a été chargée pour styliser la page. »
Parce 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 comme des éléments HTML réels.
Cette distinction reflète un principe de développement Web plus large.
Splitt ajoute:
«Il y a idéalement une séparation entre l'apparence du site et quel est le contenu.»
Qu'en est-il des photos de stock?
L'équipe a abordé l'utilisation de photos de stock, qui sont parfois ajoutées pour l'attrait visuel plutôt que pour le contenu original.
Splitt dit:
« Le sens est toujours comme si cette image n'était 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.
Bien que ces images puissent ne pas se classer fortement en raison de la duplication, les implémentations en HTML contribue toujours à garantir une indexation appropriée et à améliorer l'accessibilité.
Pourquoi cela compte
L'équipe a mis en évidence plusieurs exemples où une mauvaise mise en œuvre pourrait réduire la visibilité:
- Listes immobilières: Les photos à domicile utilisées car les images d'arrière-plan n'apparaîtront pas dans les requêtes de recherche d'images pertinentes.
- Articles de presse: Les graphiques ou les infographies ajoutés via CSS ne peuvent pas être indexés, affaiblissant la découverte.
- 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 au shopping.
Que faire ensuite
Les commentaires de Google indiquent que vous devez suivre ces meilleures pratiques:
- Utilisez HTML (
imgoupicture) Tags pour toute image qui transmet du contenu ou qui est référencé sur la page. - Réserver les arrière-plans CSS pour les visuels décoratifs qui ne portent pas de sens.
- Si les utilisateurs peuvent s'attendre à trouver une image via la recherche, il devrait être dans le HTML.
- Une mise en œuvre appropriée aide non seulement avec le référencement, mais aussi avec les outils d'accessibilité et les lecteurs d'écran.
En avant
Les éditeurs doivent être conscients de la façon dont les images sont implémentées.
Bien que CSS soit un outil puissant pour la conception, l'utiliser pour fournir des images liées au contenu peut entrer en conflit avec les meilleures pratiques d'indexation, d'accessibilité et de stratégie de référencement à long terme.
Écoutez l'épisode du podcast complet ci-dessous:
https://www.youtube.com/watch?v=L2E3GBDP_QY
