html - tamaño - ¿Qué se indexará mejor en los motores de búsqueda: etiquetas img o imágenes de fondo con etiquetas de lector de pantalla?

mostrar imagen en html

Question

Al crear sitios web receptivos, a veces uso imágenes de fondo para representar una imagen adecuada para el tamaño de pantalla adecuado.

p.ej:

    #image { 
        background-image: url(largeimage.jpg); 
    }
    @media only screen and (max-width: 320px) {
        #image { 
            background-image: url(smallimage.jpg); 
        }
    }

Para que los lectores de pantalla sepan qué tipo de elemento estamos tratando, agrego

role="img"

Y un

aria-label

Aquí está mi pregunta:

Siempre aprendí que es mejor para el SEO agregar una imagen como el logotipo de una compañía en un elemento de imagen real.

p.ej

<img src="logo-companyname.png">

El razonamiento es que el logotipo aparecerá cuando Google busque imágenes en el nombre de la compañía. (suponiendo que el sitio web está clasificado lo suficientemente bien)

¿Seguirá Google raspando el logo cuando se implemente como div? p.ej

<div id="logo-company" role="img" aria-label="company name"></div>

¿O aún necesito agregar una imagen en alguna parte para obtener el resultado deseado? ¿Google hace algo con las etiquetas del lector de pantalla?

Answer 1

Usa una etiqueta img Es mejor por una serie de razones.

Cuándo usar <img />

1. Cuando su imagen debe ser indexada por el motor de búsqueda
2. Si tiene una relación con el contenido, no con el diseño.
3. Si su imagen no es demasiado pequeña (no imágenes icónicas).
4. Imágenes donde puede agregar alt y atributo de title .

Cuándo usar background-image CSS

1. Imágenes puramente usadas para diseñar
2. Sin relación con el contenido.
3. Pequeñas imágenes que podemos jugar con CSS3.
4. Repetición de imágenes (en el icono del autor del blog, el ícono de la fecha se repetirá para cada artículo, etc.,).

Según la lista anterior y algunas observaciones, tenemos estos motivos para usar una etiqueta de img :

1. Una imagen de logotipo tiene un significado semántico y tiene relación con el contenido. Entonces, esto es lo correcto desde el punto de vista semántico.
2. Google no indexa automáticamente imágenes de fondo, de lo contrario, los resultados de la búsqueda de imágenes se llenarían con sprites de imágenes. Google no ha hecho una declaración oficial al respecto, pero lo más probable es que agregue más valor al div con una etiqueta aria, aunque una imagen probablemente aún tenga más valor. (Bing supuestamente no hace nada con esto)

Entonces: lo mejor es usar una etiqueta img