Tembel yükleme görüntüleri ve SEO üzerindeki etkileri

23

Sitemizdeki yük görüntülerini tembelleştirmek için aşağıdaki tekniği kullanıyoruz:

Tüm görüntüler için, srcöznitelik için varsayılan bir img (yani bir yükleyici) için bir url koyarız ve gerçek görüntü url'sini data-srcözniteliğe koyarız . Gibi

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

Resim görünümün dışında olduğunda hiçbir şey olmuyor, ancak görüntü görünümün içine girdiğinde, data-srcözniteliğin URL'si yüklenir ve görüntü düzgün gösterilir.

Bunun bir sonucu olarak Google, sayfadaki (yani bir arama sonuçları sayfasındaki) tüm görselleri aynı srcözelliğe sahip görüyor . Çünkü elbette google botu yalnızca 'unloaded' img etiketini varsayılan ile ayrıştırıyor src.

Sorum şu: Aynı srcözellikte birçok img etiketi olması sayfanın SEO'sunu etkiler mi?

— bmenekl
kaynak

2

Bence uygun unvan ve alt işin% 90'ı. Dosya adı az. Sanırım Google Görseller’deki sonuçları etkileyebilir

— Martijn

ayrıca bakınız: webmasters.stackexchange.com/questions/26190/…

— Salman A

Google Görsel Arama’da dizine eklediğiniz resim sayısını kesinlikle etkileyebilir. Bunu ya da normal web araması için sıralamadaki etkilerini mi soruyorsunuz?

— Stephen Ostermiller

@StephenOstermiller benim öncelikli kaygılarım sıralamasıdır, ancak SEO'ya herhangi bir etkisi (hemen veya ikincil) ilgi

— alanıdır

Bu soru StackOverflow'ta istendi ancak bence çok iyi cevapları yok.

— Stephen Ostermiller

10

Görüntü tembel yüklemesinin web arama sıralaması üzerinde olumsuz bir etkisi olduğunu hiç görmedim. Sitenizin kullanıcılar için algılanan performansını artırmak, sıralamalarınıza gerçekten yardımcı olabilir. Sitenizdeki performans sorunları nedeniyle daha az kişi arama sonuçlarına geri döndüğünde, sıralamalarınız artar.

Google, görsel arama için tembel yüklü resimleri dizine ekleyemez. Bunun yerine bazı olası teknik düzeltmeler var:

<noscript>JavaScript’i etkin olmayan kullanıcılar (ve arama motoru botları) için görüntüleri gösteren etiketler kullanın
Ayrıca resimlerinize link verin. Görüntünün img src'de veya a hrefte olup olmadığıyla ilgili görsel araması önemli değildir. Böylece, aşağıdaki kod parçası görüntünün tembel olarak yüklenmesini ve görsel aramada endekslenmiş tam boyutlu görüntünün elde edilmesini sağlar: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— Stephen Ostermiller
kaynak

3

Ben "noscript" e güvenmezdim - onu kullanmaya çalışan çok fazla spam görüyoruz, bu yüzden orada yerleştirilen içeriğe güvenecek kadar her zaman kendimize güvenmiyoruz. Resimlere bağlantılar kullanma fikrini seviyorum. Genel olarak, bir resim bir sayfadaki ana öğelerden biriyse, endekslendiğinden emin olmak için onu yalnızca doğal olarak gömme eğilimindeyim (farklı boyutlarda kullanıyorsanız en az bir sürümü). normalde. Bunun için daha iyi bir hikaye üzerinde çalışıyoruz, ancak bugün veya yarının değiştiğini görmüyorum.

— John Mueller

1

Taktikinizi kullanarak, görüntüleriniz zaten ürünlerle ilgili bir bağlantıyla çevrelenmişse bir <a> sarmalayıcı deneyebilirsiniz:

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

İç bağlantı kullanıcı arabirimini tıklar, oysa dış kısım yine de dizin oluşturma için çalışmalıdır.

— dhaupin

1

Bu cevap 2017 için de geçerli mi? Özellikle "Google, görsel arama için tembel yüklü resimleri dizine ekleyemez." Bölümü? Demek yayında 10 tane resim bile olsa, Google hiçbir resim olmadığını düşünüyor?

— En Aptal

Halen böyle, ancak dizine eklenmesi için resimlerinize link verebilirsiniz.

— Stephen Ostermiller

1

Çoğu arama motoru, görüntüyü gizlemek için satır içi stilleri kullanmadığınız sürece gizlenen görüntüleri dizine ekler. Tarayıcılar çoğunluğu olacak değil gizli görüntüleri yüklemek.

Bu talebi doğrulayabilecek bir test sayfası var. Bazı eski mobil tarayıcılar istisna olmakla birlikte, cep telefonlarına yapılan tembel yükleme işlemlerinin iyi bir tarama deneyimi için üretken olabileceğini savunuyorum.

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

CSS dosyanızda aşağıdaki değişiklikleri ekleyin.

.lazy-img { display: none; }

Şimdi bunun gibi tembel resimlerin olduğu bir sayfa yükleyebilir ve dizine eklenirler.

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

titleResmin niteliğini eklemeniz önemlidir . Veya <img> etiketini bir linkle <a> etiketle ve metinle çevreleyin . Aksi halde, arama motorları anahtar kelimeleri resimle kelime mesafesine göre ilişkilendirir. SEO için tüm bu belaya gidersiniz, yol boyunca da devam edebilirsiniz.

Yukarıdakileri olduğu gibi kullanırsanız. Görüntüler gizlendiğinden hiçbir şey gösterilmez. Belgenin altındaki bu sınıfı kaldırmak istiyorsunuz. Buradaki anahtar satır içi saf Javascript kullanmaktır. Bu Javascript, yukarıdaki elemanların yerleşiminin tamamlanmasından hemen sonra yürütülür. Tüm harici JS dosyalarınızı alttan yüklerseniz (olması gerektiği gibi). Bu Javascript bloğunu bu dosyaların üzerine yerleştirmelisiniz. Böylece DOM’nin değiştirilmesinde gecikme olmaz.

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

Şimdi getElementsByClassName8 ve daha eski sürümlerde desteklemediği için IE9 için koşul ekledim . Olması gereken (test edilmemiş), bu tarayıcıların görüntüyü olduğu gibi yükleyeceğidir.

Bu yaklaşımın avantajı, web tarayıcısının perspektifinden HTML’nin temiz görünmesini sağlar.

— Reactgular
kaynak

1

Merak ettim ve test sayfasını denedim. Mac'teki en son Chrome ve Safari görüntüyü yüklüyor gibi görünüyor. Sonuçta bunun çok güvenilir olduğundan emin değilim, ne yazık ki ...

— Pevara

Ne yazık ki bu yöntemle, resimlerin tümü belgenin alt kısmında tembel yüklü (kötü değil), ancak sorumu açıkladığım gibi, benim yaklaşımımda resimler yalnızca görünüm alanına girdiklerinde tembel olarak yüklendi. Dolayısıyla, görünüm alanına girmeyen herhangi bir görüntü (yani, son kullanıcı sayfada bu şekilde aşağı kaymaz) hiç yüklenmez. Çok fazla resim içeren bir sayfada bu gerçekten önemlidir

— bmenekl

@bmenekl Hayır, bu cevap tembel yükleme yapmıyor. Javascript etkin bir tarayıcıda görüntülendiğinde HTML'yi değiştirir, böylece üçüncü taraf bir komut dosyası tembel yükleme yapabilir.

— Tepki

1

Google, JavaScript’i botları ile çalıştırmayı ilan etti, daha fazla açıklama için bu yazıya bakın .

Belgelerde belirtildiği gibi, dinamik tarama için statik dosyaları GoogleBot’a yasaklamamalısınız.

— Zulu dili
kaynak