นี่เป็นวิธีการที่ดีในการสร้างภาพ Lazy Loading สำหรับ SEO หรือไม่?

14

สำหรับภาพที่โหลดผ่าน AJAX หรือฉันไม่ต้องการให้ทำดัชนีให้ใช้วิธีการ data- * attribute:

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

javascript แม็พแอ็ตทริบิวต์data-srcกับแอ็ตทริบิวต์src :

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

แต่สำหรับภาพใน HTML ที่ฉันไม่ต้องการจัดทำดัชนี:

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

จาวาสคริปต์แทนที่จุดยึดด้วยแท็กรูปภาพ :

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

ดูเหมือนว่าจะรักษาความสามารถในการจัดทำดัชนีและเจตนาของหน้าเว็บ (สำหรับการเข้าถึงได้) โดยไม่กระทบต่อ SEO (หวังว่า) แต่จะรักความคิดเห็นที่สอง

แก้ไข: ข้อเสนอแนะใด ๆ เกี่ยวกับวิธีการนี้ - หน้าเว็บที่มีลิงก์ไปยังรูปภาพและหน้าเว็บที่มีแท็ก IMG แบบอินไลน์ - จะเปรียบเทียบในเรื่องการจัดอันดับหน้า ฉันคาดเดาว่าแท็ก IMG แบบอินไลน์จะดีกว่าเนื่องจากลิงก์ขาออกแต่ละอันจะเบี่ยงเบนจากอันดับของหน้าเว็บโดยรวม (เว้นแต่ว่าพวกเขามี rel = "nofollow" ซึ่งจะเป็นประโยชน์ในการตอบโต้)

seo google javascript

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

ลิงก์ขาออกจะไม่เบี่ยงเบนจากอันดับของหน้าเว็บของคุณ นั่นไม่ใช่วิธีการประชาสัมพันธ์

— Lèsemajesté

จำนวนลิงก์ขาออกทั้งหมดจะเบี่ยงเบนจาก PR ที่แต่ละลิงก์มีหรือไม่ ดังนั้นหาก แต่เดิมหน้ามี 5 ลิงก์ - แต่ละอันมี 20% PR - แต่ด้วยวิธีนี้จะมี 50 - ตอนนี้แต่ละคนจะมี 2% หรือไม่

— Aeron

ถูกต้อง. จำนวน PR ที่ส่งผ่านถูกหารด้วยจำนวนลิงก์ในหน้า แต่เนื่องจากการแกะสลัก PR nofollowตอนนี้ลิงก์จะรวมอยู่ด้วยเมื่อทำการแบ่ง PR ระหว่างลิงก์ ดังนั้นแม้ว่าคุณจะมีลิงก์ 45 ลิงก์และลิงค์ปกติ 5 ลิงค์ แต่ลิงค์ธรรมดา 5 ลิงก์ก็จะส่งผ่านลิงค์น้ำได้เพียง 2% เท่านั้น แม้ว่า Google จะฉลาด แต่พวกเขาก็ปฏิบัติต่อลิงค์รูปภาพต่างจากลิงค์ HTML เนื่องจากโซลูชันของคุณเป็นลิงก์ที่ใช้ได้สำหรับการใช้งานและการเข้าถึงและมันก็ไม่ควรถูกลดทอนการประชาสัมพันธ์ PR ของคุณ

— Lèsemajesté

10

นั่นเป็นวิธีการที่ดี อีกวิธีที่คุณสามารถทำได้คือการใช้<noscript />องค์ประกอบเพื่อจัดเก็บimgแท็กเวอร์ชันปกติซึ่ง Google จะทำดัชนีโดยใช้ JS เพื่อสร้างเวอร์ชันการโหลดแบบสันหลังยาว

หรือคุณสามารถใช้การประชุม AJAX hashbang ของ Google ร่วมกับ API ประวัติของ HTML5 เพื่อสร้างหน้าคั่นหน้าและดัชนีที่สามารถทำดัชนีได้ นี้เป็นที่นิยมโดยเฉพาะอย่างยิ่งถ้าคุณกำลังทำชนิดของหน้าเลื่อนอนันต์บางที่จะให้รูปแบบของการหลอกให้เลขหน้าบางสิ่งบางอย่างที่ใช้งานเลื่อนอนันต์ส่วนใหญ่จำเป็นต้องหมด ( :: ไอ :: Google Images :: ไอ :: )

แก้ไข:การใช้ลิงก์เป็นตัวยึดตำแหน่งสำหรับรูปภาพอาจทำให้การไหล PR จากหน้าถูกแบ่งระหว่างลิงค์เพิ่มเติมแม้ว่า PR จะถูกสงวนไว้เสมอเว้นแต่ว่าคุณใช้nofollowในทางทฤษฎีสิ่งนี้จะเพิ่ม PR ของรูปภาพเหล่านั้นสำหรับการค้นหารูปภาพ

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

— หมิ่นพระบรมเดชานุภาพ
แหล่งที่มา

2

ฉันชอบที่จะเห็นว่า - Google ไม่ได้ดู<noscript>และฉันยังไม่พบวิธีที่จะบล็อกการโหลดภาพใน Firefox ยัง; การแทนที่src(แม้จะมี<script>แท็กทันทีหลัง<img>แท็ก) ดูเหมือนว่าจะไม่สามารถป้องกันภาพจากการดาวน์โหลดใน Firefox เวอร์ชันล่าสุด หากคุณรู้วิธีการทำเช่นนั้นอีกโปรดแบ่งปัน!

— mindplay.dk

@ mindplay.dk: Google อาจเลือกที่จะไม่ใช้noscriptข้อความเป็นตัวอย่าง แต่ทุกสิ่งที่ฉันอ่านทำให้ฉันเชื่อว่าเป็นnoscriptเนื้อหาดัชนีโดยทั่วไป srcแต่คุณขวาเกี่ยวกับการทดแทน ความคิดดั้งเดิมของฉันคือการวางภาพscript ก่อนภาพแรกเพื่อที่จะป้องกันการโหลดภาพจนกระทั่งหลังจากที่สคริปต์ได้โหลดและดำเนินการ แต่จากการตรวจสอบเพิ่มเติมสิ่งนี้จะไม่ทำงานเนื่องจากภาพจะไม่ปรากฏใน DOM ณ จุดนั้น คุณสามารถบล็อกการดาวน์โหลดได้โดยขยายการเชื่อมต่อไปยังโฮสต์พร้อมกันสูงสุด แต่ไม่สามารถทำได้ในวันนี้

— Lèsemajesté

คนสกปรกสับอื่นขึ้นมาด้วยคือการใช้ JS จะแสดงความคิดเห็นออกภาพ JS-ฟรีชอบดังนั้น <script>document.write('<'+'!--');</script><img src=...>(มีอีกรุ่นที่เกี่ยวข้องกับการแยกการเก็งกำไร): คุณจะต้องตัดสินใจด้วยตัวเองว่าเป็นวิธีการที่ยอมรับได้หรือไม่

— Lèsemajesté

2

ฉันเคยเห็นภาพที่เต็มไปด้วยรูปแบบนี้:

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

รับโดย Google และ Google Image Search และคนอื่น ๆ ก็ด่างเกินไป เนื่องจากขณะนี้ Google ดำเนินการจาวาสคริปต์บนหน้าของคุณจึงไม่จำเป็นต้องใส่รูปภาพจริงลงในแอตทริบิวต์ src การละเลยแอตทริบิวต์ src อาจนำไปสู่เส้นขอบสีเทารอบภาพของคุณดังนั้นควรไปกับสิ่งที่ดีที่สุด:

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

nb สิ่งนี้ไม่จำเป็นต้องใช้กับเครื่องมือค้นหาอื่น ๆ

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