it-swarm.com.de

Ist dies eine gute Herangehensweise an Image Lazy Loading für SEO?

Verwenden Sie für Bilder, die über AJAX geladen wurden oder die ich nicht ​​indizieren möchte, den data- * -Attribut-Ansatz:

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

Das Javascript ordnet das data-src Attribut dem src Attribut zu:

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

Aber für Bilder im HTML, die ich do indizieren möchte:

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

Das Javascript ersetzt den Anker mit einem Bild Tag:

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

Scheint, dass die Indexierbarkeit und die Absicht der Seite (für die Barrierefreiheit) erhalten bleiben, ohne die SEO (hoffentlich) zu beeinträchtigen. Würde mich aber über eine zweite Meinung freuen.

Bearbeiten: Jede Rückmeldung, wie diese Annäherung - Seite mit Links zu Bildern versus Seite mit Inline-IMG-Tags - in Bezug auf die Seite vergleichen würde Rang. Ich vermute, dass die Inline-IMG-Tags besser abschneiden würden, da jeder ausgehende Link den Gesamtrang der Seite beeinträchtigen würde (es sei denn, sie hätten rel = "nofollow", was kontraproduktiv wäre).

14
Aeron

Ich habe Bilder mit diesem Muster geladen gesehen:

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

lassen Sie sich von Google und der Google Bildersuche abholen und andere haben entdeckt es auch. Da Google jetzt führt Javascript aus auf Ihrer Seite aus, ist es möglicherweise nicht erforderlich, das tatsächliche Bild in das src-Attribut einzufügen. Wenn Sie ein src-Attribut vernachlässigen, wird Ihr Bild möglicherweise grau umrandet. Daher ist es wahrscheinlich am besten, wenn Sie Folgendes verwenden:

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

Nb. Dies gilt nicht unbedingt für andere Suchmaschinen.

2
Willster