Tải hình ảnh và hiệu ứng lười biếng trên SEO

Chúng tôi đang sử dụng kỹ thuật sau đây để lười tải hình ảnh trong trang web của mình:

Đối với tất cả các hình ảnh, chúng tôi đặt vào srcthuộc tính một url cho một img mặc định (tức là trình tải) và đặt url hình ảnh thực tế trong data-srcthuộc tính. Thích như vậy

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

Khi hình ảnh bên ngoài chế độ xem không có gì xảy ra, nhưng khi hình ảnh đi vào bên trong chế độ xem, thì url từ data-srcthuộc tính được tải và hình ảnh được hiển thị chính xác.

Điều này có kết quả là Google thấy tất cả các hình ảnh trong trang (tức là trang kết quả tìm kiếm) có cùng srcthuộc tính. Bởi vì google bot tất nhiên chỉ phân tích thẻ img 'không tải' với mặc định src.

Câu hỏi của tôi là: việc có nhiều thẻ img có cùng srcthuộc tính có ảnh hưởng đến SEO của trang không?

— bmenekl
nguồn

Tôi nghĩ tiêu đề và alt phù hợp là 90% công việc. Tên tệp ít hơn. Nó có thể ảnh hưởng đến kết quả trong Google Images tôi đoán

— Martijn

xem thêm: webmasters.stackexchange.com/questions/26190/ từ

— Salman A

Nó chắc chắn có thể ảnh hưởng đến số lượng hình ảnh bạn đã lập chỉ mục trong Tìm kiếm hình ảnh của Google. Bạn đang hỏi về điều đó, hoặc về bất kỳ ảnh hưởng nào mà nó sẽ có trên bảng xếp hạng cho tìm kiếm web bình thường?

— Stephen Ostermiller

@StephenOstermiller mối quan tâm chính của tôi là thứ hạng, nhưng bất kỳ tác động nào (ngay lập tức hoặc thứ yếu) đối với SEO đều được quan tâm

— bmenekl

Câu hỏi này đã được hỏi trên StackOverflow nhưng theo tôi thì nó không có câu trả lời hay.

— Stephen Ostermiller

Câu trả lời:

Tôi chưa bao giờ thấy hình ảnh lười tải có bất kỳ tác động tiêu cực nào trên bảng xếp hạng tìm kiếm trên web. Cải thiện hiệu suất nhận thức của trang web của bạn cho người dùng thực sự có thể giúp thứ hạng của bạn. Khi có ít người quay lại kết quả tìm kiếm vì vấn đề về hiệu suất với trang web của bạn, thứ hạng của bạn sẽ được cải thiện.

Google sẽ không thể lập chỉ mục các hình ảnh được tải lười biếng để tìm kiếm hình ảnh. Có một số sửa chữa kỹ thuật có thể thay thế như:

sử dụng <noscript>các thẻ hiển thị hình ảnh cho người dùng không kích hoạt JavaScript (và bot công cụ tìm kiếm)
Cũng liên kết đến hình ảnh của bạn. Nó dường như không quan trọng đối với tìm kiếm hình ảnh cho dù hình ảnh nằm trong img src hay trong a href. Vì vậy, đoạn mã sau sẽ tải hình ảnh lười biếng và hình ảnh kích thước đầy đủ được lập chỉ mục trong tìm kiếm hình ảnh: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— Stephen Ostermiller
nguồn

Tôi sẽ không dựa vào "noscript" - chúng tôi thấy rất nhiều thư rác đang cố sử dụng nó, vì vậy chúng tôi không phải lúc nào cũng đủ tự tin để tin tưởng nội dung được đặt ở đó. Tôi thích ý tưởng sử dụng các liên kết đến hình ảnh. Nói chung, nếu một hình ảnh là một trong những yếu tố chính trên một trang, tôi vẫn có xu hướng chỉ nhúng nó một cách tự nhiên (ít nhất là một phiên bản của nó, nếu bạn đang sử dụng các kích thước khác nhau) để bạn chắc chắn rằng nó được lập chỉ mục bình thường Chúng tôi đang nghiên cứu một câu chuyện hay hơn cho vấn đề này, nhưng tôi không thấy nó thay đổi hôm nay hay ngày mai.

— John Mueller

Sử dụng chiến thuật của bạn, bạn có thể thử <a> trình bao bọc nếu hình ảnh của bạn đã được bao quanh bởi một liên kết cho các sản phẩm hoặc thứ gì đó:

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

Liên kết bên trong có nhấp chuột UI, trong khi bên ngoài vẫn hoạt động cho các bot lập chỉ mục hình ảnh.

— dhaupin

Câu trả lời này có hợp lệ cho năm 2017 không? Đặc biệt "Google sẽ không thể lập chỉ mục các hình ảnh được tải lười biếng cho tìm kiếm hình ảnh." Vì vậy, ngay cả chúng ta có 10 hình ảnh trong bài đăng, Google nghĩ rằng chúng ta không có hình ảnh?

— Tôi là người ngu ngốc nhất

Đó vẫn là trường hợp, nhưng bạn vẫn có thể liên kết đến hình ảnh của mình để được lập chỉ mục.

— Stephen Ostermiller

Hầu hết các công cụ tìm kiếm sẽ lập chỉ mục hình ảnh bị ẩn miễn là bạn không sử dụng kiểu nội tuyến để ẩn hình ảnh. Phần lớn các trình duyệt sẽ không tải hình ảnh ẩn.

Có một trang thử nghiệm có thể xác minh yêu cầu này. Một số trình duyệt di động cũ là ngoại lệ, nhưng tôi cho rằng việc lười tải trên điện thoại di động có thể phản tác dụng với trải nghiệm duyệt tốt.

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

Trong tệp CSS của bạn thêm sửa đổi sau.

.lazy-img { display: none; }

Bây giờ bạn có thể tải một trang với hình ảnh lười biếng như thế này và chúng sẽ được lập chỉ mục.

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

Điều quan trọng là bạn bao gồm titlethuộc tính cho hình ảnh. Hoặc bạn bao quanh <imgthẻ> bằng một liên kết <a> thẻ và văn bản liên kết. Nếu không, các công cụ tìm kiếm sẽ liên kết các từ khóa với hình ảnh theo khoảng cách từ. Bạn sẽ gặp tất cả những rắc rối này cho SEO, bạn cũng có thể đi tất cả các cách.

Nếu bạn sử dụng như trên. Không có gì sẽ hiển thị như những hình ảnh được ẩn. Bạn muốn loại bỏ lớp này ở dưới cùng của tài liệu. Chìa khóa ở đây là sử dụng Javascript thuần túy nội tuyến. Javascript này được thực thi ngay lập tức sau khi bố trí các yếu tố trên kết thúc. Nếu bạn tải tất cả các tệp JS bên ngoài của bạn ở dưới cùng (như bạn nên). Bạn nên đặt khối Javascript này lên trên các tệp đó. Vì vậy, không có độ trễ trong việc sửa đổi 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>

Bây giờ tôi đã thêm các điều kiện cho IE9 vì nó không hỗ trợ getElementsByClassNametrong 8 tuổi trở lên. Điều gì sẽ xảy ra (không được kiểm tra) là những trình duyệt đó sẽ chỉ tải hình ảnh như hiện tại.

Ưu điểm của phương pháp này là giữ cho HTML trông sạch sẽ từ góc nhìn của webcrawler.

— Phản ứng
nguồn

Tôi tò mò và thử trang thử nghiệm. Chrome và Safari mới nhất trên Mac dường như tải hình ảnh. Không chắc chắn rằng điều này rất đáng tin cậy, thật không may ...

— Pevara

Thật không may với phương pháp này, các hình ảnh đều được tải một cách lười biếng ở dưới cùng của tài liệu (không tệ), nhưng như tôi đang giải thích trong câu hỏi của mình, theo cách tiếp cận của tôi, hình ảnh chỉ được tải khi chúng vào chế độ xem. Vì vậy, bất kỳ hình ảnh nào không vào chế độ xem (tức là bộ xử lý không cuộn xuống do đó trong trang) sẽ không được tải. Trong một trang có rất nhiều hình ảnh, điều này thực sự quan trọng

— bmenekl

@bmenekl Không, câu trả lời này không thực hiện tải lười biếng. Nó chỉ thay đổi HTML khi được xem trong trình duyệt hỗ trợ javascript để tập lệnh của bên thứ ba có thể thực hiện tải nhanh.

— Phản ứng

Google tuyên bố thực thi JavaScript với các bot của họ, xem bài đăng này để được giải thích thêm.

Như tài liệu, bạn không được cấm các tệp tĩnh đối với GoogleBot để thu thập dữ liệu động.

— Zulu
nguồn