Đây có phải là một cách tiếp cận tốt cho hình ảnh Lazy Loading cho SEO?

Đối với hình ảnh được tải qua AJAX hoặc tôi không muốn lập chỉ mục, hãy sử dụng phương pháp tiếp cận thuộc tính data- *:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

Javascript ánh xạ thuộc tính data-src sang thuộc tính src :

<img src="path/to/image.jpg" />

Nhưng đối với hình ảnh trong HTML mà tôi làm muốn lập chỉ mục:

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

Các javascript thay thế neo bằng một thẻ hình ảnh :

<img src="path/to/image.jpg" alt="Image alt text here" />

Có vẻ như sẽ duy trì khả năng lập chỉ mục và mục đích của trang (cho khả năng truy cập) mà không ảnh hưởng đến SEO (hy vọng). Nhưng sẽ thích một ý kiến ​​thứ hai.

Chỉnh sửa: Bất kỳ phản hồi nào về cách tiếp cận này - trang có liên kết đến hình ảnh so với trang có thẻ IMG nội tuyến - sẽ so sánh với thứ hạng trang. Tôi đoán các thẻ IMG nội tuyến sẽ có giá tốt hơn vì mỗi liên kết gửi đi sẽ làm giảm thứ hạng trang tổng thể (trừ khi chúng có rel = "nofollow" sẽ phản tác dụng).

Đó là một cách tiếp cận tốt. Một cách tiếp cận khác bạn có thể thực hiện là sử dụng <noscript />phần tử để lưu trữ phiên bản bình thường của imgthẻ, được Google lập chỉ mục và sử dụng JS để tạo phiên bản tải lười biếng.

Ngoài ra, bạn có thể sử dụng các quy ước AJAX hashbang của Google kết hợp với API lịch sử của HTML5 để tạo trạng thái trang có thể đánh dấu và chỉ mục. Điều này đặc biệt tốt hơn nếu bạn đang thực hiện một số loại trang cuộn vô hạn, vì nó cung cấp một hình thức giả trang mà một thứ gì đó mà hầu hết các triển khai cuộn vô hạn cần ( :: ho :: Google Images :: ho : :).

Nếu bạn không muốn điều đó hoặc bạn muốn trang xuống cấp một cách duyên dáng cho những người dùng không phải là JS, bạn có thể đi theo con đường ngược lại và bắt đầu với hình ảnh thông thường nhưng sử dụng chặn JS để thay thế srcthuộc tính của hình ảnh khi tải trang (hoặc thậm chí chỉ cần xóa các thành phần hình ảnh và lưu trữ các srcthuộc tính trong hàng đợi tải lười biếng của bạn). Nếu bạn làm đúng, bạn có thể hoàn thành việc này trước khi bất kỳ hình ảnh nào thực sự bắt đầu tải xuống.

Tôi đã thấy hình ảnh được tải với mẫu này:

<img data-src="path/to/image.jpg" class="js-lazy-load" />

được chọn bởi Google và Google Image Search và những người khác cũng đã phát hiện ra nó. Vì Google hiện thực thi javascript trên trang của bạn, nên có thể không cần phải đưa hình ảnh thực tế vào thuộc tính src. Việc bỏ qua một thuộc tính src có thể dẫn đến một đường viền màu xám xung quanh hình ảnh của bạn, vì vậy có lẽ tốt nhất để đi với một cái gì đó như:

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb. điều này không nhất thiết phải áp dụng cho các công cụ tìm kiếm khác.