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

14

Verwenden Sie für Bilder, die über AJAX geladen wurden oder die nicht indexiert werden sollen, 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 in der HTML , dass ich tun möchte indizierte:

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

Das Javascript ersetzt den Anker durch ein Image- 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: Jedes Feedback dazu, wie dieser Ansatz - Seite mit Links zu Bildern oder Seite mit Inline-IMG-Tags - in Bezug auf den Seitenrang verglichen wird. 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).

seo google javascript Aeron
quelle
Ausgehende Links beeinträchtigen Ihren Seitenrang nicht. So funktioniert PR nicht.
Majestätsbeleidigung
Würde die Gesamtzahl der ausgehenden Links die PR der einzelnen Links beeinträchtigen? Wenn die Seite also ursprünglich 5 Links hätte - jeder mit 20% PR - aber mit diesem Ansatz wären es 50 - hätte jeder jetzt 2%?
Aeron
Das ist richtig. Die Menge an PR, die übergeben wird, wird durch die Anzahl der Links auf der Seite geteilt. Aufgrund der PR-Bildhauerei werden nofollowLinks jetzt auch beim Teilen von PR zwischen Links einbezogen. Selbst wenn Sie 45 Nofollow-Links und 5 reguläre Links haben, passieren die 5 regulären Links immer noch nur 2% des Linksafts. Wenn Google schlau wäre, würden sie Image-Links anders behandeln als HTML-Links, da Ihre Lösung hinsichtlich Benutzerfreundlichkeit und Zugänglichkeit gültig ist und Sie nicht entmutigen sollten, Ihren PR-Fluss zu verwässern.
Lèse majesté

Antworten:

10

Das ist ein guter Ansatz. Ein anderer Ansatz, den Sie wählen können, besteht darin, mithilfe des <noscript />Elements die normale Version des imgTags zu speichern , die von Google indiziert wird, und mithilfe von JS die Version zum verzögerten Laden zu erstellen.

Alternativ können Sie die Hashbang-AJAX-Konventionen von Google in Kombination mit der HTML5-Protokoll-API verwenden, um Lesezeichen- und indexfähige Seitenzustände zu erstellen. Dies ist besonders vorzuziehen, wenn Sie eine Art unendliche Bildlaufseite ausführen, da diese eine Form der Pseudo-Paginierung bietet - etwas, das die meisten unendlichen Bildlaufimplementierungen dringend benötigen ( :: husten :: Google Bilder :: husten ::) .

Bearbeiten: Die Verwendung von Links als Platzhalter für die Bilder kann dazu führen, dass der PR-Fluss von der Seite auf mehrere Links aufgeteilt wird. PR bleibt jedoch immer erhalten, es sei denn, Sie verwenden nofollowdies theoretisch, um die PR dieser Bilder für die Bildsuche zu erhöhen.

Wenn Sie dies nicht möchten oder möchten, dass sich die Seite für Nicht-JS-Benutzer ordnungsgemäß verschlechtert, können Sie den umgekehrten Weg einschlagen und mit normalen Bildern beginnen, aber JS blockieren, um das srcAttribut der Bilder beim Laden der Seite zu ersetzen (oder sogar Löschen Sie einfach die Bildelemente und speichern Sie die srcAttribute in Ihrer Lazy Loading Queue. Wenn Sie es richtig machen, können Sie dies tun, bevor die Bilder tatsächlich heruntergeladen werden.

Majestätsbeleidigung
quelle
2
Das würde ich gerne sehen - Google sieht es nicht an <noscript>und ich habe noch keine Möglichkeit gefunden, das Laden von Bildern in Firefox zu blockieren. Das Ersetzen src(auch mit einem <script>Tag unmittelbar nach dem <img>Tag) scheint nicht zu verhindern, dass das Bild in der neuesten Version von Firefox heruntergeladen wird. Wenn Sie einen anderen Weg kennen, teilen Sie uns dies bitte mit!
mindplay.dk
@ mindplay.dk: Google verwendet möglicherweise keinen noscriptText in Snippets, aber alles, was ich gelesen habe, lässt mich glauben, dass es Indexinhalte noscriptim Allgemeinen enthält. Sie haben jedoch Recht mit der Substitution src. Mein ursprünglicher Gedanke war, ein script vor das erste Bild zu stellen, damit es das Laden der Bilder blockiert, bis das Skript geladen und ausgeführt wurde. Bei genauerer Betrachtung würde dies jedoch nicht funktionieren, da die Bilder zu diesem Zeitpunkt nicht im DOM angezeigt würden. Sie können das Herunterladen blockieren, indem Sie die Anzahl der gleichzeitigen Verbindungen zum Host maximieren. Dies ist jedoch heutzutage unpraktisch.
Majestätsbeleidigung
Ein schmutziger Hack kam jemand anderes mit ist JS zu verwenden , um die JS-freie Bilder wie so Kommentar aus (es gibt eine längere Version , dass sich mit spekulativen Parsing): <script>document.write('<'+'!--');</script><img src=...><!---->. Sie müssen selbst entscheiden, ob dies ein akzeptabler Ansatz ist.
Majestätsbeleidigung
2

Ich habe Bilder mit diesem Muster geladen gesehen:

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

erhalten abgeholt von Google und Google Image Search und andere haben entdeckt es auch. Da Google jetzt Javascript auf Ihrer Seite ausführt , ist es möglicherweise nicht erforderlich, das tatsächliche Bild in das src-Attribut einzufügen. Das Vernachlässigen eines src-Attributs kann zu einem grauen Rand um Ihr Bild führen. 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.

Willster
quelle