En una búsqueda reciente del podcast de registro, el equipo de relaciones de búsqueda de Google advirtió a los desarrolladores no usar CSS para todas las imágenes del sitio web.
Si bien las imágenes de fondo CSS pueden mejorar el diseño visual, son invisibles para la búsqueda de imágenes de Google. Esto podría conducir a oportunidades perdidas en la indexación de imágenes y la visibilidad de búsqueda.
Esto es lo que aconsejan los defensores de la búsqueda de Google.
El problema de la imagen CSS
Durante el episodio, John Mueller compartió un problema recurrente:
«Creo que alguien me hizo ping la semana pasada o una semana antes en las redes sociales:» Parece que mi desarrollador ha decidido usar CSS para todas las imágenes porque creen que es mejor «. ¿Funciona esto? «
Según el equipo de Google, este enfoque se deriva de un malentendido de cómo los motores de búsqueda interpretan imágenes.
Cuando se agregan imágenes a través de propiedades de fondo CSS en lugar de etiquetas de imagen HTML estándar, es posible que no aparezcan en el DOM de la página y, por lo tanto, no se pueden indexar.
Como Martin Splitt explicó:
«Si tiene una imagen de contenido, si la imagen es parte del contenido … desea un
imguna etiqueta de imagen o unpictureEtiqueta que realmente tiene la imagen real como parte del DOM porque quieres que veamos como AH para que esta página tenga esta imagen que no es solo la decoración. Es parte del contenido y luego la búsqueda de imágenes puede recogerlo «.
Contenido versus decoración
La diferencia entre una imagen de contenido y una imagen decorativa es si agrega significado o es puramente cosmético.
Las imágenes decorativas, como fondos estampados, efectos atmosféricos o animaciones, se pueden implementar de forma segura utilizando CSS.
Cuando la imagen transmite significado o se hace referencia en el contenido, CSS es un ajuste deficiente.
Splitt ofreció el siguiente ejemplo:
«Si tengo una publicación de blog sobre este paisaje específico y quiero que le guste decir que a la gente le gusta mirar esta increíble vista panorámica del paisaje aquí y luego es una imagen de fondo … el problema es que el contenido hace referencia específicamente a esta imagen, pero no tiene la imagen como parte del contenido».
En tales casos, colocando la imagen en HTML usando el img o picture La etiqueta asegura que se entienda como parte del contenido de la página y es elegible para la indexación en la búsqueda de imágenes de Google.
¿Qué hace que las imágenes CSS sean invisibles?
Splitt explicó por qué sucede esto:
«Para un usuario que mira el navegador, ¿de qué estás hablando, Martin? La imagen está allí.
Debido a que Google analiza el DOM para determinar la estructura de contenido, las imágenes diseñadas puramente a través de CSS a menudo se pasan por alto, especialmente si no se incluyen como elementos HTML reales.
Esta distinción refleja un principio de desarrollo web más amplio.
Split agrega:
«Idealmente, existe una separación entre la se ve el sitio y cuál es el contenido».
¿Qué pasa con las fotos de stock?
El equipo abordó el uso de fotos de archivo, que a veces se agregan para el atractivo visual en lugar del contenido original.
Split dice:
«El significado sigue siendo como esta imagen no es mía. Es una imagen de archivo que compramos o autorizamos, pero sigue siendo parte del contenido», señaló el equipo.
Si bien estas imágenes pueden no ocuparse mucho debido a la duplicación, implementarlas en HTML todavía ayuda a garantizar una indexación adecuada y mejora la accesibilidad.
Por qué esto importa
El equipo destacó varios ejemplos en los que la implementación inadecuada podría reducir la visibilidad:
- Listados de bienes raíces: Las fotos del inicio utilizadas como imágenes de fondo no aparecerán en consultas de búsqueda de imágenes relevantes.
- Artículos de noticias: Los gráficos o infografías agregadas a través de CSS no se pueden indexar, debilitando la capacidad de descubrimiento.
- Sitios de comercio electrónico: Las imágenes de productos integradas en estilos de fondo pueden no aparecer en las búsquedas relacionadas con las compras.
Que hacer a continuación
Los comentarios de Google indican que debe seguir estas mejores prácticas:
- Usa html (
imgopicture) Etiquetas para cualquier imagen que transmitiera contenido o se hace referencia en la página. - Reserve fondos CSS para imágenes decorativas que no tienen significado.
- Si los usuarios esperan encontrar una imagen a través de la búsqueda, debería estar en el HTML.
- La implementación adecuada ayuda no solo con SEO, sino también con herramientas de accesibilidad y lectores de pantalla.
Mirando hacia el futuro
Los editores deben tener en cuenta cómo se implementan las imágenes.
Si bien CSS es una herramienta poderosa para el diseño, usarlo para entregar imágenes relacionadas con el contenido puede entrar en conflicto con las mejores prácticas para la indexación, la accesibilidad y la estrategia de SEO a largo plazo.
Escuche el episodio de podcast completo a continuación:
https://www.youtube.com/watch?v=l2e3gbdp_qy
Imagen destacada: Samborskyi romano/Shutterstock
