Malas memuat gambar dan efek pada SEO

Kami menggunakan teknik berikut untuk malas memuat gambar di situs kami:

Untuk semua gambar, kami menempatkan dalam srcurl atribut untuk img default (yaitu loader) dan menempatkan url gambar yang sebenarnya dalam data-srcatribut. Seperti itu

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

Ketika gambar di luar viewport tidak terjadi apa-apa, tetapi ketika gambar masuk di dalam viewport, maka url dari data-srcatribut dimuat dan gambar ditampilkan dengan benar.

Akibatnya, Google melihat semua gambar di halaman (yaitu halaman hasil pencarian) memiliki srcatribut yang sama . Karena google bot tentu saja mem-parsing tag img 'unloaded' dengan default src.

Pertanyaan saya adalah: apakah memiliki banyak tag img dengan srcatribut yang sama memengaruhi SEO halaman ?

— bmenekl
sumber

Saya pikir judul dan alt yang tepat adalah 90% dari pekerjaan. Nama file lebih sedikit. Saya kira ini bisa memengaruhi hasil dalam Gambar Google

— Martijn

lihat juga: webmasters.stackexchange.com/questions/26190/…

— Salman A

Ini tentu saja dapat memengaruhi jumlah gambar yang telah Anda indeks di Google Image Search. Apakah Anda bertanya tentang itu, atau tentang pengaruh apa pun pada peringkat untuk pencarian web normal?

— Stephen Ostermiller

@StephenOstermiller, perhatian utama saya adalah peringkat, tetapi efek apa pun (langsung atau sekunder) terhadap SEO menarik

— bmenekl

Pertanyaan ini telah ditanyakan pada StackOverflow tetapi tidak memiliki jawaban yang bagus menurut saya.

— Stephen Ostermiller

Jawaban:

Saya belum pernah melihat pemuatan gambar yang malas berdampak negatif pada peringkat pencarian web. Meningkatkan persepsi kinerja situs Anda bagi pengguna dapat benar-benar membantu peringkat Anda. Ketika lebih sedikit orang bangkit kembali ke hasil pencarian karena masalah kinerja dengan situs Anda, peringkat Anda akan meningkat.

Google tidak akan dapat mengindeks gambar yang dimuat malas untuk pencarian gambar. Ada beberapa perbaikan teknis yang mungkin terjadi seperti:

menggunakan <noscript>tag yang menampilkan gambar untuk pengguna yang tidak mengaktifkan JavaScript (dan bot mesin pencari)
Juga tautkan ke gambar Anda. Tampaknya tidak masalah untuk pencarian gambar apakah gambar tersebut ada di img src atau di a href. Jadi cuplikan berikut akan membuat gambar dimuat malas dan gambar ukuran penuh diindeks dalam pencarian gambar: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— Stephen Ostermiller
sumber

Saya tidak akan bergantung pada "noscript" - kami melihat banyak spam mencoba menggunakannya, jadi kami tidak selalu cukup percaya diri untuk memercayai konten yang ditempatkan di sana. Saya suka gagasan menggunakan tautan ke gambar. Secara umum, jika sebuah gambar adalah salah satu elemen utama pada halaman, saya masih cenderung cenderung hanya menanamkannya secara alami (setidaknya satu versi, jika Anda menggunakan ukuran yang berbeda) sehingga Anda yakin itu diindeks biasanya. Kami sedang mengerjakan cerita yang lebih baik untuk ini, tetapi saya tidak melihatnya berubah hari ini atau besok.

— John Mueller

Dengan menggunakan taktik Anda, Anda dapat mencoba pembungkus <a> jika gambar Anda sudah dikelilingi oleh tautan untuk produk atau sesuatu:

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

Tautan dalam mengambil klik UI, sedangkan bagian luar masih berfungsi untuk bot yang mengindeks gambar.

— dhaupin

Apakah jawaban ini juga berlaku untuk 2017? Khususnya "Google tidak akan dapat mengindeks gambar yang dimuat malas untuk pencarian gambar." Jadi walaupun kita memiliki 10 gambar di pos, Google pikir kita tidak memiliki gambar?

— Saya Orang yang Paling Bodoh

Itu masih terjadi, tetapi Anda masih dapat menautkan ke gambar Anda untuk diindeks.

— Stephen Ostermiller

Sebagian besar mesin pencari akan mengindeks gambar yang disembunyikan selama Anda tidak menggunakan gaya sebaris untuk menyembunyikan gambar. Mayoritas browser tidak akan memuat gambar tersembunyi.

Ada halaman pengujian yang dapat memverifikasi klaim ini. Beberapa peramban seluler yang lebih lama merupakan pengecualian, tetapi saya berpendapat pemuatan malas pada telepon seluler bisa menjadi kontra produktif terhadap pengalaman menjelajah yang baik.

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

Dalam file CSS Anda tambahkan modifikasi berikut.

.lazy-img { display: none; }

Sekarang Anda dapat memuat halaman dengan gambar-gambar malas seperti ini dan mereka akan diindeks.

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

Penting bahwa Anda menyertakan titleatribut untuk gambar. Atau Anda mengelilingi <imgtag> dengan tautan <a> tag dan teks tautan. Kalau tidak, mesin pencari akan mengaitkan kata kunci dengan gambar dengan jarak kata. Anda akan mengalami semua masalah ini untuk SEO Anda mungkin juga pergi jauh-jauh.

Jika Anda menggunakan di atas seperti apa adanya. Tidak ada yang akan ditampilkan karena gambar disembunyikan. Anda ingin menghapus kelas ini di bagian bawah dokumen. Kuncinya di sini adalah menggunakan Javascript murni sebaris. Javascript ini dijalankan segera setelah tata letak elemen-elemen di atas selesai. Jika Anda memuat semua file JS eksternal Anda di bagian bawah (sebagaimana mestinya). Anda harus menempatkan blok Javascript ini di atas file-file itu. Sehingga tidak ada lag dalam memodifikasi DOM.

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

Sekarang saya menambahkan persyaratan untuk IE9 karena tidak mendukung getElementsByClassNamedalam 8 dan lebih tua. Apa yang harus terjadi (tidak diuji) adalah browser-browser itu hanya akan memuat gambar apa adanya.

Keuntungan dari pendekatan ini adalah menjaga HTML tetap bersih dari perspektif webcrawler.

— Reactgular
sumber

Saya ingin tahu dan mencoba halaman pengujian. Chrome dan Safari terbaru di Mac sepertinya memuat gambar. Tidak begitu yakin ini sangat bisa diandalkan, sayangnya ...

— Pevara

Sayangnya dengan metode ini, semua gambar dimuat dengan malas di bagian bawah dokumen (tidak buruk), tetapi seperti yang saya jelaskan dalam pertanyaan saya, dalam pendekatan saya, gambar tersebut dimuat dengan malas hanya ketika mereka memasuki viewport. Jadi gambar apa pun yang tidak masuk ke viewport (yaitu pengguna akhir tidak gulir ke bawah di halaman) tidak akan dimuat sama sekali. Dalam halaman dengan banyak gambar ini sangat penting

— bmenekl

@ bmenekl Tidak, jawaban ini tidak melakukan pemuatan malas. Ini hanya mengubah HTML bila dilihat dalam browser yang diaktifkan javascript sehingga skrip pihak ketiga dapat melakukan pemuatan malas.

— Reactgular

Google menyatakan untuk mengeksekusi JavaScript dengan bot mereka, lihat posting ini untuk penjelasan lebih lanjut.

Seperti yang didokumentasikan, Anda tidak boleh melarang file statis ke GoogleBot untuk perayapan dinamis.

— Zulu
sumber