Lazy Laden von Bildern und Auswirkungen auf SEO

23

Wir verwenden die folgende Technik, um Bilder auf unserer Website zu laden:

Für alle Bilder haben wir in das srcAttribut eine URL für ein Standard-IMG (dh einen Loader) und in das data-srcAttribut die tatsächliche Bild-URL eingefügt . Wie so

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

Wenn sich das Bild außerhalb des Ansichtsfensters befindet, geschieht nichts. Wenn sich das Bild jedoch innerhalb des Ansichtsfensters befindet, wird die URL des data-srcAttributs geladen und das Bild wird korrekt angezeigt.

Dies hat zur Folge, dass Google alle Bilder auf der Seite (dh einer Suchergebnisseite) als mit demselben srcAttribut versehen ansieht. Da der Google Bot natürlich nur das "entladene" img-Tag mit der Standardeinstellung analysiert src.

Meine Frage ist: Hat das Vorhandensein vieler img-Tags mit demselben srcAttribut Einfluss auf die SEO der Seite ?

seo google-search javascript images google-image-search bmenekl
quelle
2
Ich denke, dass der richtige Titel und das richtige Alter 90% des Jobs ausmachen. Dateiname weniger. Es kann die Ergebnisse in Google Bilder beeinflussen, denke ich
Martijn
Siehe auch: webmasters.stackexchange.com/questions/26190/…
Salman A
Dies kann sich sicherlich auf die Anzahl der Bilder auswirken, die Sie in der Google Bildsuche indiziert haben. Fragen Sie danach oder nach irgendwelchen Auswirkungen, die dies auf die Platzierungen für die normale Websuche haben würde?
Stephen Ostermiller
@StephenOstermiller Mein Hauptanliegen ist das Ranking, aber jeder Effekt (unmittelbar oder zweitrangig) auf die SEO ist von Interesse
bmenekl
Diese Frage wurde auf StackOverflow gestellt, hat aber meiner Meinung nach keine guten Antworten.
Stephen Ostermiller

Antworten:

10

Ich habe noch nie gesehen, dass das verzögerte Laden von Bildern negative Auswirkungen auf das Ranking der Websuche hat. Das Verbessern der wahrgenommenen Leistung Ihrer Website für Nutzer kann Ihre Platzierungen erheblich verbessern. Wenn aufgrund von Leistungsproblemen mit Ihrer Website weniger Personen zu den Suchergebnissen zurückkehren, wird sich Ihr Ranking verbessern.

Google ist nicht in der Lage, verzögert geladene Bilder für die Bildsuche zu indizieren. Es gibt stattdessen einige mögliche technische Korrekturen wie:

  • Verwenden Sie <noscript>Tags, die Bilder für Benutzer anzeigen, für die JavaScript nicht aktiviert ist (und Suchmaschinen-Bots).
  • Verlinken Sie auch auf Ihre Bilder. Es scheint für die Bildsuche keine Rolle zu spielen, ob sich das Bild im Bild-Quellcode oder im Bild-Quellcode befindet. Das folgende Snippet würde also das Bild faul laden und das Bild in voller Größe in der Bildsuche indizieren: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
Stephen Ostermiller
quelle
3
Ich würde mich nicht auf "noscript" verlassen - wir sehen eine Menge Spam, der versucht, es zu verwenden, daher sind wir nicht immer zuversichtlich genug, den dort platzierten Inhalten zu vertrauen. Mir gefällt die Idee, Links zu den Bildern zu verwenden. Wenn ein Bild eines der Hauptelemente auf einer Seite ist, tendiere ich immer noch dazu, es einfach auf natürliche Weise einzubetten (mindestens eine Version davon, wenn Sie unterschiedliche Größen verwenden), damit Sie sicher sind, dass es indiziert ist normalerweise. Wir arbeiten an einer besseren Geschichte dafür, aber ich sehe es heute oder morgen nicht ändern.
John Mueller
1
Mit Ihrer Taktik können Sie einen <a> Wrapper ausprobieren, wenn Ihre Bilder bereits von einem Link für Produkte oder Ähnlichem umgeben sind: <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>Der innere Link übernimmt den Benutzeroberflächenklick, während der äußere für Bots funktionieren sollte, die Bilder indizieren.
Dhaupin
1
Gilt diese Antwort auch für 2017? Insbesondere "Google ist nicht in der Lage, verzögert geladene Bilder für die Bildsuche zu indizieren." Also, selbst wenn wir 10 Bilder in dem Beitrag haben, glaubt Google, wir haben keine Bilder?
Ich bin die dümmste Person
Das ist immer noch der Fall, aber Sie können immer noch auf Ihre Bilder verlinken, um sie zu indizieren.
Stephen Ostermiller
1

Die meisten Suchmaschinen indizieren Bilder, die ausgeblendet sind, solange Sie keine Inline-Stile verwenden, um das Bild auszublenden. Die meisten Browser laden keine versteckten Bilder.

Es gibt eine Testseite, die diese Behauptung überprüfen kann. Einige ältere mobile Browser sind die Ausnahme, aber ich behaupte, dass langsames Laden auf Mobiltelefonen zu einer guten Browsererfahrung kontraproduktiv sein könnte.

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

Fügen Sie Ihrer CSS-Datei die folgende Änderung hinzu.

.lazy-img { display: none; }

Jetzt können Sie eine Seite mit so faulen Bildern laden und sie werden indiziert.

<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 ist wichtig, dass Sie das titleAttribut für das Bild angeben. Oder Sie umgeben das <img> -Tag mit einem <a> -Tag und einem Linktext. Andernfalls ordnen Suchmaschinen dem Bild Stichwörter nach Wortabstand zu. Du wirst all diese Schwierigkeiten für SEO haben, die du genauso gut den ganzen Weg gehen könntest.

Wenn Sie das oben Genannte so verwenden, wie es ist. Es wird nichts angezeigt, da die Bilder ausgeblendet sind. Sie möchten diese Klasse am unteren Rand des Dokuments entfernen. Der Schlüssel hierbei ist die Verwendung von reinem Inline-Javascript. Dieses Javascript wird sofort ausgeführt, nachdem das Layout der obigen Elemente abgeschlossen ist. Wenn Sie alle Ihre externen JS-Dateien unten laden (wie Sie sollten). Sie sollten diesen Javascript-Block über diesen Dateien platzieren. Damit es keine Verzögerung bei der Änderung des DOM gibt.

<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>

Jetzt habe ich Bedingungen für IE9 hinzugefügt, da dies getElementsByClassNamein 8 und älteren Versionen nicht unterstützt wird . Was passieren sollte (nicht getestet) ist, dass diese Browser das Bild so laden, wie es ist.

Der Vorteil dieses Ansatzes ist, dass der HTML-Code aus der Sicht des Webcrawlers sauber bleibt.

Reactgular
quelle
1
Ich war neugierig und habe die Testseite ausprobiert. Neueste Chrome- und Safari-Versionen auf dem Mac scheinen das Image zu laden. Leider nicht so sicher, dass dies sehr zuverlässig ist ...
Pevara
Leider werden bei dieser Methode alle Bilder am unteren Rand des Dokuments faul geladen (nicht schlecht), aber wie ich in meiner Frage erläutere, werden die Bilder in meinem Ansatz nur dann faul geladen, wenn sie in das Ansichtsfenster gelangen. Daher wird kein Bild geladen, das nicht in das Ansichtsfenster gelangt (dh der Endbenutzer scrollt nicht auf der Seite nach unten). Bei einer Seite mit vielen Bildern ist das wirklich wichtig
bmenekl
@bmenekl Nein, diese Antwort führt kein verzögertes Laden durch. Der HTML-Code wird nur geändert, wenn er in einem JavaScript-fähigen Browser angezeigt wird, sodass ein Skript eines Drittanbieters das langsame Laden durchführen kann.
Reactgular
1

Google hat erklärt, dass JavaScript mit seinen Bots ausgeführt werden soll. Weitere Informationen hierzu finden Sie in diesem Beitrag .

Wie dokumentiert, dürfen Sie statische Dateien nicht für das dynamische Crawlen an GoogleBot verbieten.

Zulu-
quelle