โหลดรูปภาพและเอฟเฟกต์ขี้เกียจบน SEO

เราใช้เทคนิคดังต่อไปนี้เพื่อโหลดภาพที่ขี้เกียจในเว็บไซต์ของเรา:

สำหรับภาพทั้งหมดเราใส่srcurl สำหรับค่าเริ่มต้น img (เช่นโหลดเดอร์) และใส่ URL ของภาพที่แท้จริงในdata-srcแอตทริบิวต์ ชอบมาก ๆ

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

เมื่อรูปภาพอยู่นอกวิวพอร์ตไม่มีอะไรเกิดขึ้น แต่เมื่อรูปภาพเข้าไปในวิวพอร์ตแล้ว URL จากแอdata-srcททริบิวต์จะถูกโหลดและภาพจะแสดงอย่างถูกต้อง

นี่คือผลลัพธ์ที่ Google เห็นภาพทั้งหมดในหน้า (เช่นหน้าผลการค้นหา) ว่ามีเหมือนกัน srcคุณลักษณะเพราะ ธ ปทของ Google จะแยกวิเคราะห์หลักสูตรเพียง 'ถอด' แท็ก img srcด้วยเริ่มต้น

คำถามของฉันคือ: มีแท็ก img จำนวนมากที่มีsrcแอตทริบิวต์เดียวกันส่งผลต่อ SEO ของหน้าหรือไม่

— bmenekl
แหล่งที่มา

ฉันคิดว่าชื่อที่เหมาะสมและ alt เป็น 90% ของงาน ชื่อไฟล์น้อยลง มันสามารถส่งผลกระทบต่อผลลัพธ์ใน Google Images ฉันเดา

— Martijn

ดูเพิ่มเติมได้ที่: webmasters.stackexchange.com/questions/26190/…

— Salman A

มันอาจส่งผลต่อจำนวนภาพที่คุณจัดทำดัชนีไว้ใน Google Image Search คุณกำลังถามเกี่ยวกับสิ่งนั้นหรือว่ามีผลกระทบต่อการจัดอันดับสำหรับการค้นหาเว็บปกติหรือไม่

— Stephen Ostermiller

@StephenOstermiller ความกังวลหลักของฉันคือการจัดอันดับ แต่ผลกระทบใด ๆ (ทันทีหรือรอง) เพื่อ SEO เป็นที่น่าสนใจ

— bmenekl

คำถามนี้ถูกถามใน StackOverflowแต่ไม่มีคำตอบที่ดีในความคิดของฉัน

— Stephen Ostermiller

คำตอบ:

ฉันไม่เคยเห็นภาพการโหลดที่ขี้เกียจมีผลกระทบด้านลบต่อการจัดอันดับการค้นหาเว็บ การปรับปรุงประสิทธิภาพการรับรู้ของเว็บไซต์ของคุณสำหรับผู้ใช้สามารถช่วยจัดอันดับของคุณได้ เมื่อมีคนน้อยกว่าที่จะย้อนกลับไปที่ผลการค้นหาเนื่องจากปัญหาด้านประสิทธิภาพของเว็บไซต์อันดับของคุณจะดีขึ้น

Google จะไม่สามารถจัดทำดัชนีภาพที่ขี้เกียจสำหรับการค้นหาภาพ มีการแก้ไขทางเทคนิคที่เป็นไปได้แทนเช่น:

ใช้<noscript>แท็กที่แสดงภาพสำหรับผู้ใช้ที่ไม่ได้เปิดใช้งาน JavaScript (และบ็อตเครื่องมือค้นหา)
เชื่อมโยงไปยังภาพของคุณ ดูเหมือนจะไม่สำคัญที่จะค้นหาภาพไม่ว่าภาพนั้นจะอยู่ใน img src หรือเป็น href ดังนั้นตัวอย่างต่อไปนี้จะทำให้ภาพขี้เกียจโหลดและภาพขนาดเต็มจัดทำดัชนีไว้ในการค้นหาภาพ: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— Stephen Ostermiller
แหล่งที่มา

ฉันจะไม่พึ่งพา "noscript" - เราเห็นสแปมจำนวนมากพยายามที่จะใช้ดังนั้นเราจึงไม่มั่นใจเสมอไปที่จะเชื่อถือเนื้อหาที่อยู่ที่นั่น ฉันชอบความคิดในการใช้ลิงก์ไปยังรูปภาพ โดยทั่วไปหากรูปภาพเป็นองค์ประกอบหลักอย่างหนึ่งในหน้าฉันยังคงมีแนวโน้มที่จะฝังไว้อย่างเป็นธรรมชาติ (อย่างน้อยหนึ่งรุ่นหากคุณใช้ขนาดแตกต่างกัน) เพื่อให้แน่ใจว่ามีการจัดทำดัชนี ปกติ เรากำลังทำเรื่องที่ดีกว่านี้ แต่ฉันไม่เห็นว่ามันจะเปลี่ยนไปในวันนี้หรือพรุ่งนี้

— John Mueller

ด้วยการใช้กลยุทธ์ของคุณคุณสามารถลอง <a> เสื้อคลุมหากภาพของคุณถูกล้อมรอบไปด้วยลิงค์สำหรับผลิตภัณฑ์หรือบางสิ่ง:

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

ลิงก์ด้านในใช้การคลิก UI ในขณะที่ด้านนอกควรทำงานเพื่อทำดัชนีภาพบอท

— dhaupin

คำตอบนี้ใช้ได้สำหรับ 2017 ด้วยหรือไม่ "Google จะไม่สามารถสร้างดัชนีรูปภาพที่มีคนขี้เกียจสำหรับการค้นหาภาพ" เป็นพิเศษหรือไม่ ดังนั้นแม้เราจะมี 10 ภาพในโพสต์ แต่ Google คิดว่าเราไม่มีภาพ?

— ฉันเป็นคนที่โง่ที่สุดใน

ยังคงเป็นกรณีนี้ แต่คุณยังสามารถเชื่อมโยงไปยังภาพของคุณเพื่อจัดทำดัชนี

— Stephen Ostermiller

เครื่องมือค้นหาส่วนใหญ่จะจัดทำดัชนีรูปภาพที่ซ่อนอยู่ตราบใดที่คุณไม่ได้ใช้สไตล์อินไลน์เพื่อซ่อนภาพ เบราว์เซอร์ส่วนใหญ่จะไม่โหลดภาพที่ซ่อนอยู่

มีหน้าทดสอบที่สามารถตรวจสอบการอ้างสิทธิ์นี้ได้ เบราว์เซอร์มือถือรุ่นเก่าบางรุ่นนั้นเป็นข้อยกเว้น แต่ฉันโต้แย้งว่าการโหลดแบบขี้เกียจบนโทรศัพท์มือถืออาจเป็นการต่อต้านการสร้างประสบการณ์การเรียกดูที่ดี

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

ในไฟล์ CSS ของคุณเพิ่มการแก้ไขต่อไปนี้

.lazy-img { display: none; }

ตอนนี้คุณสามารถโหลดหน้าเว็บด้วยภาพที่ขี้เกียจแบบนี้และพวกเขาจะได้รับการจัดทำดัชนี

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

เป็นสิ่งสำคัญที่คุณจะต้องรวมtitleแอตทริบิวต์ของรูปภาพด้วย หรือคุณล้อมรอบ<img> แท็กด้วยลิงก์<a> แท็กและข้อความลิงก์ มิฉะนั้นเครื่องมือค้นหาจะเชื่อมโยงคำหลักกับภาพตามระยะทาง คุณกำลังจะประสบปัญหาทั้งหมดสำหรับ SEO เช่นกันคุณอาจไปตลอดทาง

หากคุณใช้ข้างต้นตามที่เป็นอยู่ จะไม่มีสิ่งใดปรากฏเมื่อภาพถูกซ่อน คุณต้องการลบคลาสนี้ที่ด้านล่างของเอกสาร กุญแจสำคัญในที่นี้คือการใช้ Javascript แท้แบบอินไลน์ Javascript นี้จะทำงานทันทีหลังจากเลย์เอาต์ขององค์ประกอบด้านบนเสร็จสิ้น หากคุณโหลดไฟล์ JS ภายนอกทั้งหมดที่ด้านล่าง (เท่าที่ควร) คุณควรวางบล็อก Javascript นี้ไว้เหนือไฟล์เหล่านั้น เพื่อให้ไม่มีความล่าช้าในการแก้ไข 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>

ตอนนี้ฉันเพิ่มเงื่อนไขสำหรับ IE9 เนื่องจากไม่รองรับgetElementsByClassNameใน 8 และรุ่นเก่ากว่า สิ่งที่ควรเกิดขึ้น (ไม่ได้ทดสอบ) คือเบราว์เซอร์เหล่านั้นจะโหลดรูปภาพตามที่เป็นอยู่

ข้อดีของวิธีนี้คือทำให้ HTML ดูสะอาดจากมุมมองของ webcrawler

— Reactgular
แหล่งที่มา

ฉันอยากรู้และลองหน้าทดสอบ Chrome และ Safari ล่าสุดบน Mac ดูเหมือนจะโหลดภาพแล้ว ไม่แน่ใจว่าสิ่งนี้น่าเชื่อถืออย่างยิ่งโชคไม่ดี ...

— Pevara

น่าเสียดายด้วยวิธีนี้ภาพทั้งหมดที่โหลดขี้เกียจที่ด้านล่างของเอกสาร (ไม่เลว) แต่เมื่อฉันอธิบายคำถามของฉันในแนวทางของฉันภาพที่ขี้เกียจโหลดเมื่อพวกเขาเข้าวิวพอร์ต ดังนั้นรูปภาพใด ๆ ที่ไม่ได้ป้อนวิวพอร์ต (นั่นคือผู้ใช้ไม่เลื่อนลงไปในหน้า) จะไม่ถูกโหลดเลย ในหน้าเว็บที่มีภาพจำนวนมากสิ่งนี้สำคัญมาก

— bmenekl

@bmenekl ไม่คำตอบนี้ไม่สามารถทำการโหลดแบบขี้เกียจได้ มันจะเปลี่ยนแปลง HTML เท่านั้นเมื่อดูในเบราว์เซอร์ที่เปิดใช้งานจาวาสคริปต์เพื่อให้สคริปต์ของบุคคลที่สามสามารถทำการโหลดแบบสันหลังยาว

— Reactgular

Google ประกาศจะรัน JavaScript กับบอทของพวกเขาดูโพสต์นี้สำหรับคำอธิบายเพิ่มเติม

ตามที่ระบุไว้ในเอกสารคุณต้องไม่ห้ามไฟล์สแตติกไปยัง GoogleBot สำหรับการรวบรวมข้อมูลแบบไดนามิก

— พวกสูลู
แหล่งที่มา