it-swarm.com.de

Lazy Laden von Bildern und Auswirkungen auf SEO

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

Für alle Bilder geben wir im src -Attribut eine URL für ein Standardimg (d. H. Einen Loader) ein und tragen die tatsächliche Bild-URL in das data-src -Attribut ein. 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 Attributs data-src geladen und das Bild wird korrekt angezeigt.

Dies hat zur Folge, dass Google sieht, dass alle Bilder auf der Seite (d. H. Eine Suchergebnisseite) dasselbe src-Attribut aufweisen. Da der Google Bot natürlich nur das "entladene" IMG-Tag mit dem Standardwert src analysiert.

Meine Frage ist: Haben viele IMG-Tags mit dem gleichen src-Attribut Auswirkungen auf die SEO der Seite?

23
bmenekl

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, verbessern sich Ihre Rankings.

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 das Bild also faul laden und das Bild in voller Größe in der Bildsuche indizieren: <a href="/img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
10

Die meisten Suchmaschinen indizieren Bilder, die ausgeblendet sind, solange Sie keine Inline-Stile zum Ausblenden des Bildes verwenden. 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 ein 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 title -Attribut für das Bild angeben. Oder Sie umgeben das <img> -Tag mit einem Link <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 obige wie es ist verwenden. 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 es getElementsByClassName in 8 und älter nicht unterstützt. Was passieren sollte (nicht getestet) ist, dass diese Browser das Bild einfach so laden, wie es ist.

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

1
Reactgular

Google erklärte, JavaScript mit ihren Bots auszuführen, siehe dieser Beitrag für weitere Erläuterungen.

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

1
Zulu