Untuk gambar yang dimuat melalui AJAX, atau yang saya tidak ingin diindeks, gunakan pendekatan atribut data- *:
<img data-src="path/to/image.jpg" class="js-lazy-load" />
Javascript memetakan atribut data-src ke atribut src :
<img src="path/to/image.jpg" />
Tapi untuk gambar dalam HTML yang saya lakukan ingin diindeks:
<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>
Javascript menggantikan jangkar dengan tag gambar :
<img src="path/to/image.jpg" alt="Image alt text here" />
Tampaknya itu akan menjaga kemampuan indeks dan maksud halaman (untuk aksesibilitas) tanpa mempengaruhi SEO (semoga). Tetapi akan menyukai pendapat kedua.
Sunting: Umpan balik apa pun tentang bagaimana pendekatan ini - halaman dengan tautan ke gambar versus halaman dengan tag IMG sebaris - akan dibandingkan dalam hal peringkat halaman. Saya menduga tag IMG sebaris akan lebih baik karena setiap tautan keluar akan mengurangi peringkat halaman secara keseluruhan (kecuali mereka memiliki rel = "nofollow" yang akan menjadi kontra produktif).
sumber
nofollow
link sekarang juga termasuk ketika membagi PR antara link. Jadi, bahkan jika Anda memiliki 45 tautan nofollow dan 5 tautan reguler, 5 tautan reguler masih akan hanya melewati 2% dari jus tautan. Meskipun jika Google cerdas, mereka akan memperlakukan tautan gambar secara berbeda dari tautan HTML, karena solusi Anda valid untuk kemudahan penggunaan dan aksesibilitas, dan itu tidak boleh dicegah dengan mengurangi aliran PR Anda.Jawaban:
Itu pendekatan yang bagus. Pendekatan lain yang dapat Anda lakukan adalah menggunakan
<noscript />
elemen untuk menyimpan versiimg
tag yang normal , yang akan diindeks oleh Google, dan menggunakan JS untuk membuat versi pemuatan malas.Atau, Anda dapat menggunakan konvensi AJAX hashbang Google yang dikombinasikan dengan API riwayat HTML5 untuk membuat status halaman yang dapat bookmark dan indeks. Ini terutama lebih disukai jika Anda melakukan semacam halaman gulir yang tak terbatas, karena menyediakan bentuk pseudo-pagination — sesuatu yang paling dibutuhkan oleh implementasi gulir yang tak terbatas ( :: cough :: Gambar Google :: cough ::) .
Sunting: Menggunakan tautan sebagai placeholder untuk gambar dapat menyebabkan aliran PR dari halaman dibagi di antara lebih banyak tautan, meskipun PR selalu dilestarikan kecuali jika Anda menggunakan
nofollow
demikian secara teori ini akan meningkatkan PR dari gambar tersebut untuk pencarian gambar.Jika Anda tidak menginginkannya, atau Anda ingin halaman tersebut terdegradasi dengan anggun untuk pengguna non-JS, Anda bisa pergi ke rute yang berlawanan dan mulai dengan gambar biasa tetapi menggunakan pemblokiran JS untuk menggantikan
src
atribut gambar pada pemuatan halaman (atau bahkan hapus saja elemen gambar dan simpansrc
atribut dalam antrian pemuatan malas Anda). Jika Anda melakukannya dengan benar, Anda bisa menyelesaikannya sebelum salah satu gambar mulai diunduh.sumber
<noscript>
dan saya belum menemukan cara untuk memblokir pemuatan gambar di Firefox; menggantisrc
(bahkan dengan<script>
tag segera setelah<img>
tag) sepertinya tidak mencegah gambar mengunduh dalam versi terbaru Firefox. Jika Anda tahu cara lain untuk melakukannya, silakan bagikan!noscript
teks dalam cuplikan, tetapi semua yang saya baca membuat saya yakin itu mengindeksnoscript
konten secara umum. Namun, Anda benar tentang penggantiansrc
. Pikiran asli saya adalah untuk meletakkanscript
sebelum gambar pertama, sehingga memblokir pemuatan gambar sampai setelah skrip dimuat dan dieksekusi. Tetapi pada pemeriksaan lebih lanjut, ini tidak akan berhasil karena gambar tidak akan muncul di DOM pada saat itu. Anda dapat memblokir unduhan dengan memaksimalkan koneksi konkuren ke host, tetapi itu tidak praktis akhir-akhir ini.<script>document.write('<'+'!--');</script><img src=...><!---->
. Anda harus memutuskan sendiri apakah itu pendekatan yang dapat diterima.Saya telah melihat gambar dimuat dengan pola ini:
dijemput oleh Google dan Pencarian Gambar Google dan orang lain juga melihatnya . Karena Google sekarang mengeksekusi javascript pada halaman Anda, mungkin tidak perlu memasukkan gambar yang sebenarnya ke atribut src. Mengabaikan atribut src mungkin mengarah ke batas abu-abu di sekitar gambar Anda, jadi mungkin yang terbaik adalah dengan sesuatu seperti:
Nb. ini tidak berlaku untuk mesin pencari lainnya.
sumber