Lazyload Jquery gây hại cho SEO

Tiêu đề có hơi giật gân một chút, xin lỗi bởi vì đã làm danh thiếp tín đồ của Lazyload/Jquery giật mình.

Nhưng, bạn có ưng ý hay không thì sự thực vẫn là là vậy. Ngay dưới đây, tôi sẽ lập luận và chứng minh điều này cũng như đề xuất hướng tự khắc phục.

Cảnh báo:

- Bạn KHÔNG thành ra tin, hãy tự kiểm chứng.

- Tôi có tật lười viết, mà đã viết là viết rất dài, bởi vậy bạn nào không thích dài dòng thì tiền thành thử đọc phần kết luận ở cuối bài.

- Bài này viết theo lối thực nghiệm (Mặc mặc dù tôi là dân đánh vật lý lý thuyết lí hẳn hoi!) do vậy, tôi sẽ đệ trình bày lý thuyết lí rồi phán đoán và chứng mình phán đoán theo đệ trình tự thời gian, nhắc lại, nó dài!

- Tôi nghèo, không có nhiều domain, vì chưng đó mượn luôn domain shop của vợ để bố thí nghiệm, tôi biết điều động này là cấm kị nhưng do sự thật, tôi đành phải làm (Có một tẹo nghiêm trọng nhẹ ở đây!). Vậy nên các bạn xin đừng máy mó ẻm, tội nghiệp nghiệp! - Như mọi rợ bài khác, bài này chỉ là quan điểm cá nhân.

Về Lazyload

Lazyload là một Plugin Jquery cho những giáo đồ Jquery yêu thích sự mượt mà và kiêu sa đáng sửng sốt trong tốc độ tải trang web. Khỏi phải nói nhiều về Plugin này cho những ai đã biết về nó.

Với những bạn chưa biết Lazyload là gì, hãy xem demo này về lazyload, Như các bạn thấy, kéo đến đâu hình ảnh khu đó mới hiện lên mờ mờ ảo ảo, chưa kéo thì hình ảnh là một khoảng trống, chưa được GET về, do vậy cơ chế này nhanh hơn cơ chế bình thường và được ham chuộng là ở chỗ nó giảm chuyên chở được cho trang, tăng tốc độ load cũng như tạo hiệu ứng thân thiện, đẹp mắt, tạo phong cách PRO (Google thích điều động này!).

Tôi thì lại tin vào luật “Súng & Bơ” bởi vậy từ những năm trước, tôi đã ngại dùng. Vừa rồi có loạt bài về module Page Speed, có bộ lọc Lazyload của Google với cơ chế tương tự Lazyload Jquery này thành ra tôi có ý định quay lại minh chứng cho suy nghĩ của tôi về chị lazyload này. (Các bạn cứ an tâm dùng lazyload của Google nhé, đừng sợ ảnh hưởng như tôi sắp nói, Google đã rất sáng dạ khi thêm một số nguyên tố nhằm tránh sự gây hại cho SEO, mong có thời cơ viết bài này tiếp)

Thí nghiệm

Hướng dẫn sử dụng Lazyload cho website được đăng tại http://www.appelsiini.net/projects/lazyload

Tôi nói sơ qua vậy

- Bước 1: Gắn javascript của Lazyload và của Jquery vào web

- Bước 2: Đặt hình muốn lazyload tác động lên (Chưa vận chuyển khi ở dưới đường fold) trong thẻ như dưới đây

Trong đó:

• data-original=“hinh-that.jpg” là hình gốc muốn hiện ra
  
• src=“hinh-gia.gif” là một hình kích thước nhỏ (1×1 chẳng hạn, màu trắng chẳng hạn), làm bù nhìn, hiện sẵn trước khi hình gốc hiện lên thay thế.

- Bước 3: Gắn một đoạn script xử lý và cấu hình (hiệu ứng,…) để lazyload tác động lên trạng thái trên.

Xong, bạn sẽ có một trang cực kì với với danh thiếp hình to tổ chảng được mờ mờ ảo ảo load lên trông rất Pro, rất mượt và duyên dáng, Google muôn đời thích điều này!

Khoan, chờ một chút, có gì lạ ở đây

Nếu hiện cái hình của mình văn bằng code này

thì hóa ra, hình thật của mình bị bỏ qua bởi Google bởi chưng nằm trong data-original, thay vào đó, web mình, khi Google bot đọc, toàn 1 mớ hinh-gia.gif (nằm trong src chuẩn). Có quái không, nhất là với những trang cần SEO hình ảnh?

Thực tế luôn,

Các bạn xem trang này Demo1 http://www.quanaosi.vn/ao-hawaii-cho-dan-lam-seo.htm

Đang được sử dụng Lazyload để load hình, và những hình này, lại là hình cần làm SEO, cần hiện nguyên hình trên Google search.

Các bạn view source đi, một mớ hình giả, bù nhìn /wp-content/uploads/test/blank.gif nằm trong src (Chuẩn) trong khi các hình gốc, cần SEO thì nằm trong mớ data-original (không chuẩn) mà Google không thèm quan tâm.

Không tin à, sử dụng chức năngFetch as Google bot trong WMT bạn cũng sẽ thấy tương tự.

Vậy

Mong muốn của người nông dân: Hình trong trang phải được Google index, search phải lên google, hiện nguyên hình cái hình áo Hawaii đẹp của em để mà khách click vô, chí ít là phải hiện trong Google image search.

Suy đoán sau phân tích trên: Chết cha, Hình thật sử dụng lazyload có lẽ sẽ không được Google index bởi vì không nằm trong src chuẩn của thẻ img.

Kết quả thực từ Google: Quả thật hình cần SEO không được index. Xem Hình kết quả dưới đây:

Oh, May quá, Google index trang của mình rồi! Oppp…Google không biết gì về mấy cái hình của mình, mặc mặc dầu mình SEO dữ tợn lắm mà :(( Không tin vào mắt của mình, nhưng vớ cả đã được báo trước. Kiên nhẫn chờ vài hôm nữa, kết quả vẫn thế, không có gì thay đổi.

Cách khắc phục

Quay lại lazyload, hay như thế, pro như thế, nhẹ như vậy mà bỏ thì uổng.

Mong muốn của người nông dân: Hình trong trang phải được Google index, search phải lên google, hiện nguyên hình cái hình áo Hawaii đẹp của em để mà khách click vô, chí ít là phải hiện trong Google image search.

Nhưng làm sao để Google index đây?

Suy đoán: Nguyên nhân dịp Google không thèm index là do cái hình thật của mình lại nằm trong data-original thay bởi src của img.

Vì vậy, bất chấp mọi thứ phải đưa cho văn bằng được hình thật vào src tức là ít ra phải như thế này:

Yêu cầu của Lazyload, muốn chạy được thì phải có data-original chứa hình thật và src chứa hình bù nhìn.

Đơn giản thôi, Google không đọc được Javascript thành thử mới có cớ sự trên, thế thì lấy độc trị độc vậy: Ta sẽ dùng javascript để thêm danh thiếp thuộc tính data-original như đề nghị của lazyload, chấp Google đọc luôn.

Tức là làm như sau

Hình thật vẫn nằm trong src (yên tâm với Google)

Tiếp theo, viết một script thêm thuộc tính data-original vào với chớ chi trị là giá như trị của tính chất src cũ. Đồng thời, sau đó, sửa tính chất src ngày nay thành giá mà trị “hình-gia.gif” để nó hiện bù nhìn. Code nó như thế này:

$(“img.lazy” ).each(function() $(this).attr(“data-original”, $(this).attr(“src”)); $(this).attr(“src”, “hinh-gia.gif”); );

Bạn nào biết Jquery thì không khó để hiểu nó, mà bạn nào không biết Jquery thì đọc đoạn trên mình có áp giải thích cơ chế rồi.

Như vậy, sau khi lên đệ trình duyệt, đoạn trên sẽ chuyển thành:

Rồi sau đó, hiệu ứng Lazyload sẽ được vận dụng lên.

trong khi Google đọc thì lại là

(Google thích điều này nhất!)

Demo2 đây danh thiếp bạn: www.quanaosi.net/ao-hawaii-cho-dan-lam-seo.htm

Chú ý: demo2 khác demo1 tiền 2 điểm:

- demo1 host ở quanaosi.vn và demo12 quanaosi.net;

- demo1 dùng“lazyload thuần túy”, demo2 dùng“lazyload biến hóa SEO” (Gọi vậy đi, chứ không biết gọi sao)

Ngoài ra, nội dung hiển thị không khác gì cả, như danh thiếp bạn thấy.

Kết quả thật từ anh Google:Thật bất ngờ, tôi phải vui mừng thốt lên giữa đêm, mặc mặc dầu không có gì ngoài mong đợi cả, hình ảnh đã dc index đẹp trên Google web search và Google image search cho demo2, quanaosi.net, dùng “lazyload biến hóa SEO”. Trong khi hình của  “lazyload thuần túy” thì mãi không thấy đâu cả:

Tự sướng nè:

Hình ảnh của page hiện nguyên hình trên Google Search Web. Trên Google image search cũng không ngoại lệ, hình ảnh phê luôn.

Kết luận

- Lazyload CÓ gây hại cho SEO, như tiêu đề, vậy là không giật tít nhé. Và đã thử nghiệm “lâm sàn” với Lazyload Jquery trên 2 page khác nhau. Các cơ chế Lazyload khác cũng na ná nếu hình thật đặt ở thuộc tính khác src chuẩn mà không có cơ chế thay thế.

- Bạn vẫn yêu Lazyload, vậy sẽ tốt hơn nữa nếu bạn tham khảo cách chống chế của mình ở trên.

- Bạn có cách khác, thành ra comment ngay dưới bài này.

- Bạn có thắc mắc, cũng xin vui lòng post comment.

Xem thêm : http://bit.ly/1x8Af34