Carga lenta de imágenes y efectos en SEO

23

Estamos utilizando la siguiente técnica para cargar imágenes de manera diferida en nuestro sitio:

Para todas las imágenes, colocamos en el srcatributo una url para una img predeterminada (es decir, un cargador) y colocamos la url de la imagen real en el data-srcatributo. Al igual que

<img src="loader.gif" data-src="img1.jpg" />

Cuando la imagen está fuera de la ventana gráfica no sucede nada, pero cuando la imagen entra en la ventana gráfica, data-srcse carga la url del atributo y la imagen se muestra correctamente.

Esto tiene como resultado que Google ve que todas las imágenes de la página (es decir, una página de resultados de búsqueda) tienen el mismo srcatributo. Debido a que el robot de Google, por supuesto, analiza solo la etiqueta img 'descargada' con el valor predeterminado src.

Mi pregunta es: ¿tener muchas etiquetas img con el mismo srcatributo afecta el SEO de la página ?

seo google-search javascript images google-image-search bmenekl
fuente
2
Creo que el título apropiado y el alt son el 90% del trabajo. Nombre de archivo menos. Supongo que puede afectar los resultados en las imágenes de Google
Martijn
ver también: webmasters.stackexchange.com/questions/26190/…
Salman A
Ciertamente podría afectar la cantidad de imágenes que ha indexado en Google Image Search. ¿Estás preguntando sobre eso, o sobre cualquier efecto que tendría en las clasificaciones para la búsqueda web normal?
Stephen Ostermiller
@StephenOstermiller mi principal preocupación es la clasificación, pero cualquier efecto (inmediato o secundario) en el SEO es de interés
bmenekl
Esta pregunta se ha hecho en StackOverflow, pero no tiene excelentes respuestas en mi opinión.
Stephen Ostermiller

Respuestas:

10

Nunca he visto que la carga diferida de imágenes tenga un impacto negativo en las clasificaciones de búsqueda web. Mejorar el rendimiento percibido de su sitio para los usuarios realmente puede ayudar a su clasificación. Cuando menos personas vuelven a los resultados de búsqueda debido a problemas de rendimiento con su sitio, su clasificación mejorará.

Google no podrá indexar imágenes cargadas perezosas para la búsqueda de imágenes. Hay algunas posibles soluciones técnicas en su lugar, tales como:

  • use <noscript>etiquetas que muestren las imágenes para los usuarios que no tienen habilitado JavaScript (y los robots de los motores de búsqueda)
  • También enlace a sus imágenes. No parece importar a la búsqueda de imágenes si la imagen está en el img src o en el a href. Por lo tanto, el siguiente fragmento haría que la imagen se cargara lentamente y la imagen a tamaño completo se indexara en la búsqueda de imágenes: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
Stephen Ostermiller
fuente
3
No confiaría en "noscript": vemos una gran cantidad de spam tratando de usarlo, por lo que no siempre tenemos la confianza suficiente para confiar en el contenido colocado allí. Me gusta la idea de usar enlaces a las imágenes. En general, si una imagen es uno de los elementos principales de una página, aún tendré la tendencia a incrustarla de forma natural (al menos una versión, si está usando diferentes tamaños) para estar seguro de que está indexada. normalmente. Estamos trabajando en una mejor historia para esto, pero no veo que cambie hoy o mañana.
John Mueller
1
Usando su táctica, puede probar un contenedor <a> si sus imágenes ya están rodeadas por un enlace para productos o algo así: <a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>el enlace interno toma el clic de la interfaz de usuario, mientras que el exterior aún debería funcionar para los robots que indexan imágenes.
dhaupin
1
¿Es válida esta respuesta para 2017 también? Especialmente "Google no podrá indexar imágenes cargadas perezosas para la búsqueda de imágenes". Entonces, incluso si tenemos 10 imágenes en la publicación, ¿Google cree que no tenemos imágenes?
Soy la persona más estúpida el
Ese sigue siendo el caso, pero aún puede vincular sus imágenes para indexarlas.
Stephen Ostermiller
1

La mayoría de los motores de búsqueda indexarán imágenes que están ocultas siempre que no use estilos en línea para ocultar la imagen. La mayoría de los navegadores no cargarán imágenes ocultas.

Hay una página de prueba que puede verificar este reclamo. Algunos navegadores móviles más antiguos son la excepción, pero sostengo que la carga lenta en los teléfonos móviles podría ser contraproducente para una buena experiencia de navegación.

http://www.w3.org/2009/03/image-display-none/test.php

En su archivo CSS agregue la siguiente modificación.

.lazy-img { display: none; }

Ahora puede cargar una página con imágenes perezosas como esta y se indexarán.

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

Es importante que incluya el titleatributo de la imagen. O puede rodear la <imgetiqueta> con un enlace <a> etiqueta y texto de enlace. De lo contrario, los motores de búsqueda asociarán palabras clave con la imagen por distancia de palabra. Vas a tener todos estos problemas para SEO, también podrías ir hasta el final.

Si usa lo anterior como está. Nada se mostrará ya que las imágenes están ocultas. Desea eliminar esta clase en la parte inferior del documento. La clave aquí es usar Javascript puro en línea. Este Javascript se ejecuta inmediatamente después de finalizar el diseño de los elementos anteriores. Si carga todos sus archivos JS externos en la parte inferior (como debería). Debería colocar este bloque Javascript encima de esos archivos. Para que no haya retraso en la modificación del DOM.

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

Ahora agregué condicionales para IE9 ya que no es compatible getElementsByClassNamecon 8 y anteriores. Lo que debería suceder (no probado) es que esos navegadores simplemente carguen la imagen tal como está.

La ventaja de este enfoque es que mantiene el HTML limpio desde la perspectiva del webcrawler.

Reactgular
fuente
1
Tenía curiosidad y probé la página de prueba. Las últimas versiones de Chrome y Safari en Mac parecen cargar la imagen. No tan seguro de que es muy fiable, después de todo, por desgracia ...
Pevara
Desafortunadamente con este método, todas las imágenes se cargan lentamente en la parte inferior del documento (no está mal), pero como explico en mi pregunta, en mi enfoque, las imágenes se cargan lentamente cuando ingresan a la ventana gráfica. Por lo tanto, cualquier imagen que no ingrese a la ventana gráfica (es decir, el usuario final no se desplaza hacia abajo en la página) no se cargará en absoluto. En una página con muchas imágenes esto es realmente importante
Bmenekl
@bmenekl No, esta respuesta no realiza una carga diferida. Solo altera el HTML cuando se ve en un navegador con JavaScript habilitado para que un script de terceros pueda realizar una carga diferida.
Reactgular
1

Google declaró ejecutar JavaScript con sus bots, consulte esta publicación para obtener más explicaciones.

Como se documenta, no debe prohibir los archivos estáticos a GoogleBot para el rastreo dinámico.

zulú
fuente