È un buon approccio all'immagine Lazy Loading per SEO?

14

Per le immagini caricate tramite AJAX o che non desidero indicizzare, utilizzare l'approccio attributo data- *:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

Il javascript associa l' attributo data-src all'attributo src :

<img src="path/to/image.jpg" />

Ma per le immagini nel codice HTML che io non voglio indicizzato:

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

Il javascript sostituisce l' ancora con un tag immagine :

<img src="path/to/image.jpg" alt="Image alt text here" />

Sembra che preserverebbe la capacità dell'indice e l' intento della pagina (per l'accessibilità) senza influire sulla SEO (si spera). Ma mi piacerebbe un secondo parere.

Modifica: qualsiasi feedback su come questo approccio - pagina con collegamenti a immagini rispetto a pagina con tag IMG in linea - si confronterebbe in base al ranking della pagina. Immagino che i tag IMG inline andrebbero meglio poiché ogni link in uscita ridurrebbe il ranking generale della pagina (a meno che non avessero rel = "nofollow" che sarebbe controproducente).

seo google javascript

— Aeron
fonte

I collegamenti in uscita non riducono il ranking della tua pagina. Non è così che funziona la PR.

— Lèse majesté,

Il numero totale di collegamenti in uscita ridurrebbe il PR che ogni collegamento ha? Quindi se in origine la pagina avesse 5 collegamenti - ognuno con il 20% di PR - ma con questo approccio ce ne sarebbero 50 - ora ciascuno avrebbe il 2%?

— Aeron,

È corretto. La quantità di PR che viene passata viene divisa per il numero di collegamenti nella pagina, ma a causa della modellazione delle PR, i nofollowcollegamenti sono ora inclusi anche quando si divide PR tra i collegamenti. Quindi, anche se si dispone di 45 collegamenti nofollow e 5 collegamenti regolari, i 5 collegamenti regolari passerebbero comunque solo il 2% del collegamento. Tuttavia, se Google fosse intelligente, tratterebbe i collegamenti delle immagini in modo diverso rispetto ai collegamenti HTML, poiché la soluzione è valida per usabilità e accessibilità e non dovrebbe essere scoraggiata diluendo il flusso di PR.

— Lèse majesté,

10

Questo è un buon approccio. Un altro approccio che potresti adottare è utilizzare l' <noscript />elemento per memorizzare la versione normale del imgtag, che sarebbe indicizzato da Google, e utilizzare JS per creare la versione di caricamento lazy.

In alternativa, è possibile utilizzare le convenzioni hashbang AJAX di Google in combinazione con l'API di cronologia HTML5 per creare stati di pagina che supportano i segnalibri e gli indici. Ciò è particolarmente preferibile se stai facendo una sorta di pagina di scorrimento infinita, in quanto fornisce una forma di pseudo-impaginazione, qualcosa di cui la maggior parte delle implementazioni di scorrimento infinite hanno un disperato bisogno ( :: tosse :: Google Immagini :: tosse ::) .

Modifica: l' uso di collegamenti come segnaposto per le immagini potrebbe causare la suddivisione del flusso di PR dalla pagina tra più collegamenti, sebbene PR sia sempre conservato a meno che non lo si usi nofollowin teoria ciò aumenterebbe il PR di quelle immagini per le ricerche di immagini.

Se non lo vuoi, o vuoi che la pagina degrada con garbo per gli utenti non JS, potresti seguire la strada opposta e iniziare con immagini normali ma usando il blocco JS per sostituire l' srcattributo delle immagini al caricamento della pagina (o anche basta eliminare gli elementi dell'immagine e memorizzare gli srcattributi nella coda di caricamento lazy). Se lo fai correttamente, puoi farlo prima che una qualsiasi delle immagini inizi effettivamente a scaricare.

— Lèse majesté
fonte

2

Mi piacerebbe vederlo: Google non guarda <noscript>e non ho ancora trovato un modo per bloccare il caricamento delle immagini in Firefox; la sostituzione src(anche con un <script>tag immediatamente dopo il <img>tag) non sembra impedire il download dell'immagine nell'ultima versione di Firefox. Se conosci un altro modo per farlo, condividi!

— mindplay.dk,

@ mindplay.dk: Google può scegliere di non utilizzare il noscripttesto negli snippet, ma tutto ciò che ho letto mi fa credere che indicizzi il noscriptcontenuto in generale. Tuttavia, hai ragione a sostituire src. Il mio pensiero originale era quello di mettere una script prima immagine prima, in modo che blocchi il caricamento delle immagini fino a dopo che lo script è stato caricato ed eseguito. Ma dopo un ulteriore esame, questo non funzionerebbe poiché le immagini non sarebbero state visualizzate nel DOM a quel punto. È possibile bloccare il download aumentando al massimo le connessioni simultanee all'host, ma al momento non è pratico.

— Lèse majesté,

Una sporca mod qualcun altro è venuto in mente è di utilizzare JS per commentare le immagini JS-liberi in questo modo (c'è una versione più lunga che si occupa di analisi speculativa): <script>document.write('<'+'!--');</script><img src=...>. Dovrai decidere tu stesso se questo è un approccio accettabile.

— Lèse majesté,

2

Ho visto immagini caricate con questo modello:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

essere raccolto da Google e Google Ricerca immagini e anche altri lo hanno notato . Poiché Google ora esegue javascript sulla tua pagina, potrebbe non essere necessario inserire l'immagine effettiva nell'attributo src. Trascurare un attributo src potrebbe portare a un bordo grigio attorno all'immagine, quindi probabilmente è meglio scegliere qualcosa come:

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb. questo non si applica necessariamente ad altri motori di ricerca.

— Willster
fonte