Loading
Hãy tìm kiếm trước khi đặt câu hỏi đến các chuyên gia tại Diễn đàn SEO - Quảng Bá Web

Chú ý: thành viên mới tham gia (chưa đủ 30 bài) sẽ không đăng được bài mới (thảo luận được chấp nhận toàn bộ) trong những Box không thuộc về SEO - Digital Marketing (vd: Giao lưu, Quảng cáo v.v.. do không có đóng góp cho anh em SEOer mà toàn Spam bài quảng cáo v.v..)
  • Diễn đàn Quảng bá web - Thông báo khẩn

    1.  

    + Trả Lời Ðề Tài
    kết quả từ 1 tới 3 trên 3
    1. #1
      Tham gia ngày
      Sep 2011
      Bài gởi
      5,315
      Thanks
      1,491
      Thanked 4,387 Times in 1,683 Posts

      Lazyload Jquery gây hại cho SEO

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

      Nhưng, bạn có chấp nhận hay không thì sự thật 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 khắc phục.

      Cảnh báo:

      - Bạn KHÔNG nên 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, vì vậy bạn nào không thích dài dòng thì chỉ nên đọ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 dù tôi là dân vật lý lý thuyết hẳn hoi!) vì vậy, tôi sẽ trình bày lý thuyết rồi suy đoán và chứng mình suy đ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, do đó mượn luôn domain shop của vợ để thí nghiệm, tôi biết điều này là cấm kị nhưng vì sự thật, tôi đành phải làm (Có một chút nghiêm trọng nhẹ ở đây!). Vậy nên các bạn xin đừng táy máy ẻm, tội nghiệp!

      - Như mọi 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 tín đồ Jquery yêu thích sự mượt mà và kiêu sa đáng kinh ngạc 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ề, vì vậy cơ chế này nhanh hơn cơ chế bình thường và được ưa chuộng là ở chỗ nó giảm tải đượ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 này!).

      Tôi thì lại tin vào luật “Súng & Bơ” vì 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 nên 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ứ yên tâm dùng lazyload của Google nhé, đừng sợ ảnh hưởng như tôi sắp nói, Google đã rất thông minh khi thêm một số yếu tố nhằm tránh sự gây hại cho SEO, hi vọng có dịp 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 tải khi ở dưới đường fold) trong thẻ <img> như dưới đây
      Code:
      <img class="lazy" data-original=“hinh-that.jpg” src=“hinh-gia.gif” width=“640” height=“480”>
      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 thể <img> trên.

      Xong, bạn sẽ có một trang tuyệt với với các 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 bằng code này
      Code:
      <img data-original=“hinh-that.jpg” src=“hinh-gia.gif” width=“640” height=“480”>
      thì hóa ra, hình thật của mình bị bỏ qua bởi Google do 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 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ăng Fetch 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ô, ít nhấ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 dùng lazyload có lẽ sẽ không được Google index vì không nằm trong src chuẩn của thẻ img.

      Kết quả thật 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 dù mình SEO dữ tợn lắm mà


      Không tin vào mắt của mình, nhưng tất 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ư thế 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ô, ít nhấ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 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 vì src của img.

      Vì vậy, bất chấp mọi thứ phải đưa cho bằng được hình thật vào src tức là ít nhất phải như thế này:
      Code:
      <img src=“hinh-that.jpg” width=“640” height=“480”>
      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 nên mới có cớ sự trên, thế thì lấy độc trị độc vậy: Ta sẽ dùng javascript để thêm các thuộc tính data-original như yêu cầu 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)
      Code:
      <img class="lazy" src=“hinh-that.jpg” width=“640” height=“480”>
      Tiếp theo, viết một script thêm thuộc tính data-original vào với giá trị là giá trị của thuộc tính src cũ. Đồng thời, sau đó, sửa thuộc tính src hiện tại thành giá trị “hình-gia.gif” để nó hiện bù nhìn. Code nó như thế này:
      Code:
      $(“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ó giải thích cơ chế rồi.
      Như vậy, sau khi lên trình duyệt, đoạn <img> trên sẽ chuyển thành:
      Code:
      <img class="lazy" data-original=“hinh-that.jpg” src=“hinh-gia.gif” width=“640” height=“480”>
      Rồi sau đó, hiệu ứng Lazyload sẽ được áp dụng lên.
      trong khi Google đọc thì lại là
      Code:
      <img src=“hinh-that.jpg” width=“640” height=“480”
      >
      (Google thích điều này nhất!)

      Demo2 đây các bạn: www.quanaosi.net/ao-hawaii-cho-dan-lam-seo.htm

      Chú ý: demo2 khác demo1 chỉ 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ư các 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 dù 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 tương tự 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, nên comment ngay dưới bài này.
      - Bạn có thắc mắc, cũng xin vui lòng post comment.
      Tác giả Trần Triệu Phú
      Nguồntại Mần SEO - Biên tập bởi Diễn đàn QBW
      Sao chép vui lòng ghi rõ nguồn



       Xem bài liên quan cùng danh mục:



      Chữ ký của admin
      N: Quốc Anh (alias Quốc) - J: IT & Electric - M: 0906.024.12[ba] - 0909.000.0[một][không] - Y: seoervn - E: seo[alt]quangbaweb[dot]edu[dot]vn

      Không chỉ SEO - là Quảng Web

      ****************Hãy cùng chia sẻ với bạn bè bằng cách****************

      Copy đường link dưới đây gửi đến bạn bè!

      Đặt từ khóa tại đây ? Xem bảng giá quảng cáo tại QBW

    2. Những thành viên cảm ơn đến admin vì bài đăng rất có ích:

      conan1409 (13-09-2013)

    3. #2
      Tham gia ngày
      Sep 2013
      Bài gởi
      216
      Thanks
      4
      Thanked 8 Times in 8 Posts

      Ðề: Lazyload Jquery gây hại cho SEO

      Bài chuẩn, đang sử dụng, 1 plugin hay, nhưng cần phải biết cách sử dụng nó như thế nào cho đúng


      Chữ ký của conan1409

    4. #3
      Tham gia ngày
      Sep 2013
      Bài gởi
      104
      Thanks
      2
      Thanked 4 Times in 4 Posts

      Ðề: Lazyload Jquery gây hại cho SEO

      Dùng cái này không đúng cách nguy hiểm phết các bạn nhỉ


      Chữ ký của nhatlainiemtin2045
      Bệnh viện cửa cuốn AustCare | Sua cua cuon | Hack dao rong



    + Trả Lời Ðề Tài

    Chủ đề giống nhau

    1. Khoá học lập trình Jquery (JQuery Master) - tại zend.vn
      By heosua08031990 in forum Đào tạo SEO - Digital Marketing - Internet Marketing ...
      Trả lời: 2
      Bài mới gởi: 18-04-2013, 09:13 AM
    2. Trả lời: 2
      Bài mới gởi: 21-09-2012, 03:17 PM

    Quuyền Hạn Của Bạn

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts

    Có thể bạn cần: 
    Hội công nghệDMCA.comQuangBaWeb.edu.vn là diễn đàn mở miễn phí dành cho các thành viên.
    Chúng tôi không chịu trách nhiệm trên thông tin người dùng đăng tải trên diễn đàn. Các trường hợp vi phạm, chúng tôi sẽ tiến hành xử lý xóa bỏ ngay lập tức. Nếu bạn nhận thấy bài viết vi phạm, xin vui lòng gởi thông báo cho chúng tôi, xin cám ơn.

    DÀNH CHO QUẢNG CÁO
    9.3su10với54914