Kami menggunakan teknik berikut untuk malas memuat gambar di situs kami:
Untuk semua gambar, kami menempatkan dalam src
url atribut untuk img default (yaitu loader) dan menempatkan url gambar yang sebenarnya dalam data-src
atribut. 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-src
atribut dimuat dan gambar ditampilkan dengan benar.
Akibatnya, Google melihat semua gambar di halaman (yaitu halaman hasil pencarian) memiliki src
atribut yang sama . Karena google bot tentu saja mem-parsing tag img 'unloaded' dengan default src
.
Pertanyaan saya adalah: apakah memiliki banyak tag img dengan src
atribut yang sama memengaruhi SEO halaman ?
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:
<noscript>
tag yang menampilkan gambar untuk pengguna yang tidak mengaktifkan JavaScript (dan bot mesin pencari)<a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>
sumber
<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.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.
Sekarang Anda dapat memuat halaman dengan gambar-gambar malas seperti ini dan mereka akan diindeks.
Penting bahwa Anda menyertakan
title
atribut untuk gambar. Atau Anda mengelilingi<img
tag> 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.
Sekarang saya menambahkan persyaratan untuk IE9 karena tidak mendukung
getElementsByClassName
dalam 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.
sumber
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.
sumber