hình ảnh tải lười biếng và SEO

Question

Tôi đang xem xét việc thực hiện một tính năng tải lười biếng trên hình ảnh trên một trang web, tuy nhiên tôi tự hỏi nếu có bất kỳ sự cố SEO nào về điều này. Các kịch bản tôi đang nhìn vào như sau:

http://www.dynamicdrive.com/forums/showthread.php?t=46393

Bascially, khi một thẻ hình ảnh xuất hiện trong người dùng xem khu vực của trình duyệt, javascript được gọi thay thế và tải hình ảnh một cách nhanh chóng. Điều này làm giảm thời gian tải trang ban đầu. Tuy nhiên, làm thế nào điều này có thể ảnh hưởng đến SEO, trình thu thập thông tin hình ảnh cụ thể?

Cảm ơn bạn đã trợ giúp!

Answer 1

Hầu hết trình thu thập thông tin sẽ không thực thi Javascript. Vì vậy, bạn phải đảm bảo rằng hình ảnh của bạn được hiển thị, hoặc ít nhất là một hình ảnh tạm thời (độ phân giải thấp) với thẻ alt thích hợp.

Sau đó, không có vấn đề gì để thay thế bằng độ phân giải cao.

Xin lưu ý rằng thao tác này sẽ không hoạt động với Tìm kiếm hình ảnh của Google và do đó sẽ ảnh hưởng đến hiển thị quảng cáo của bạn trên công cụ tìm kiếm đó.

Answer 2

Bạn có thể thử tải hình ảnh dưới dạng hình nền, nhưng tôi không chắc liệu chỉ mục google có phải là loại tham chiếu hình ảnh không. Btw, bạn có thể sử dụng các thủ thuật tương tự như này image lazy load tutorial để tải tất cả các hình ảnh của bạn trong trường hợp không hỗ trợ javascript (trong trường hợp của google bot).

Answer 3

Bạn có thể sử dụng <noscript /> thẻ để lưu trữ các phiên bản bình thường của <img/> ở đó, mà sẽ được lập chỉ mục bởi Google

Answer 4

Googlebot nay làm cho javascript, do đó bạn không cần phải làm gì cả. Thực hiện tải chậm và hình ảnh của bạn sẽ vẫn bật lên trong Tìm kiếm hình ảnh của Google. Read source.

Tuy nhiên ...

Nếu bạn quan tâm đến các loại crawler một phương pháp để xem xét có thể là như sau:

<a href="your-image.jpg" class="lazy-load-link"> 
    <img src="placeholder.jpg" data-lazy-load-src="your-image.jpg" alt="Your image" /> 
</a> 

Hoặc nếu bạn đã có một liên kết ...

<a href="other-stuff.html"> 
    <img src="placeholder.jpg" data-lazy-load-src="your-image.jpg" alt="Your image" /> 
</a> 
<a href="your-image.jpg" class="lazy-load-link">Your image</a> 

Bằng phương pháp này, hình ảnh của bạn sẽ được thu thập dữ liệu đơn giản chỉ vì nó được liên kết. Sử dụng javascript, bạn có thể thay đổi placeholder.jpg thành your-image.jpg bất cứ khi nào bạn muốn. Và giữ nguyên tố a.lazy-load-link nếu bạn muốn hoặc loại bỏ nó mà bạn thích.