pigro caricamento immagini e SEO

Question

Sto cercando di implementare una funzionalità di caricamento pigro sull'immagine su un sito Web, tuttavia mi chiedo se non vi è alcun calo di SEO per questo. Lo script che sto esaminando è la seguente:

http://www.dynamicdrive.com/forums/showthread.php?t=46393

Bascially, quando un tag immagine appare negli utenti nell'area del browser di visualizzazione, javascript è chiamato che sostituisce e carica l'immagine al volo. Riduce il tempo di caricamento della pagina iniziale. Ma come può influire sul SEO, in particolare sui crawler di immagini?

Grazie per qualsiasi aiuto!

Answer 1

La maggior parte dei crawler non esegue Javascript. Quindi devi assicurarti che le tue immagini siano visualizzate, o almeno una temporanea (low res) con tag alt adeguato.

Quindi non è un problema sostituirlo con quello ad alta risoluzione.

Si prega di notare che questo non funziona con Google Ricerca Immagini, e quindi influenzerà la vostra esposizione su quel motore di ricerca.

Answer 2

Si può provare a caricare le immagini come immagini di sfondo, ma non sono sicuro se google indicizzare tale tipo di immagine di riferimento. A proposito, puoi usare trucchi simili a questo image lazy load tutorial per caricare tutte le tue immagini in caso di assenza di supporto javascript (nel caso di google bot).

Answer 3

È possibile utilizzare <noscript /> tag per memorizzare la versione normale del <img/> lì, che verrà indicizzato da Google

Answer 4

Googlebot ora il rendering JavaScript in modo che non devi fare nulla. Esegui il caricamento lazy e le immagini verranno comunque visualizzate in Google Ricerca immagini. Read source.

Tuttavia ...

Se vi preoccupate per altri tipi di crawler un metodo per guardare in potrebbe essere la seguente:

<a href="your-image.jpg" class="lazy-load-link"> 
    <img src="placeholder.jpg" data-lazy-load-src="your-image.jpg" alt="Your image" /> 
</a> 

Oppure, se si dispone già di un collegamento ...

<a href="other-stuff.html"> 
    <img src="placeholder.jpg" data-lazy-load-src="your-image.jpg" alt="Your image" /> 
</a> 
<a href="your-image.jpg" class="lazy-load-link">Your image</a> 

Con questo metodo l'immagine verrà sottoposta a scansione semplicemente perché è collegata a. Usando javascript hai la possibilità di cambiare placeholder.jpg in your-image.jpg quando vuoi. E mantieni l'elemento a.lazy-load-link se desideri o lo rimuovi.