क्या यह SEO के लिए Lazy Loading की छवि के लिए एक अच्छा तरीका है?

14

AJAX के माध्यम से भरी हुई छवियों के लिए, या कि मैं अनुक्रमित नहीं करना चाहता, डेटा का उपयोग करें- * विशेषता दृष्टिकोण:

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

ऐसा लगता है कि एसईओ (उम्मीद) को प्रभावित किए बिना सूचकांक-क्षमता और पृष्ठ (पहुंच के लिए) के इरादे को संरक्षित करेगा । लेकिन एक दूसरी राय पसंद करेंगे।

संपादित करें: कैसे इस दृष्टिकोण पर कोई प्रतिक्रिया - इनलाइन IMG टैग के साथ छवियों बनाम पेज के लिंक वाले पृष्ठ - पेज रैंक के संबंध में तुलना करेंगे। मुझे लगता है कि इनलाइन IMG टैग बेहतर होगा क्योंकि प्रत्येक आउटगोइंग लिंक समग्र पेज रैंक से अलग हो जाएगा (जब तक कि उनके पास = "nofollow" जो काउंटर उत्पादक होगा)।

seo google javascript

— Aeron
स्रोत

आउटगोइंग लिंक आपके पेज रैंक से अलग नहीं होते हैं। पीआर काम नहीं करता है।

— लेसे मेजेस्टे

क्या प्रत्येक लिंक में पीआर से आउटगोइंग लिंक की कुल संख्या होगी? तो अगर मूल रूप से पृष्ठ में 5 लिंक थे - प्रत्येक 20% पीआर के साथ - लेकिन इस दृष्टिकोण के साथ 50 होगा - क्या प्रत्येक में अब 2% होगा?

— एरॉन

यह सही है। पीआर की मात्रा जो बीत चुकी है , वह पृष्ठ पर मौजूद लिंक की संख्या से विभाजित होती है, लेकिन पीआर स्कल्पिंग के कारण nofollowलिंक के बीच पीआर को विभाजित करते समय लिंक को भी शामिल किया जाता है। तो भले ही आपके पास 45 nofollow लिंक और 5 नियमित लिंक हैं, फिर भी 5 नियमित लिंक अभी भी केवल 2% लिंक जूस पास करेंगे। यद्यपि यदि Google स्मार्ट थे, तो वे HTML लिंक की तुलना में छवि लिंक को अलग तरह से व्यवहार करेंगे, क्योंकि आपका समाधान प्रयोज्य और पहुंच के लिए एक वैध है, और इसे आपके पीआर प्रवाह को कम करके हतोत्साहित नहीं किया जाना चाहिए।

— लेसे मेजेस्टे

10

यह एक अच्छा तरीका है। एक और तरीका जो आप अपना सकते हैं वह है टैग <noscript />के सामान्य संस्करण को संग्रहीत करने के लिए तत्व का उपयोग imgकरना, जिसे Google द्वारा अनुक्रमित किया जाएगा, और आलसी लोडिंग संस्करण बनाने के लिए JS का उपयोग किया जाएगा।

वैकल्पिक रूप से, आप बुकमार्क और इंडेक्स-सक्षम पेज स्टेट्स बनाने के लिए HTML5 के इतिहास API के साथ संयुक्त Google के हैशबैंग AJAX सम्मेलनों का उपयोग कर सकते हैं। यह विशेष रूप से बेहतर है यदि आप किसी प्रकार के अनंत स्क्रॉल पृष्ठ पर काम कर रहे हैं, क्योंकि यह छद्म पृष्ठांकन का एक रूप प्रदान करता है - ऐसा कुछ जो सबसे अनंत स्क्रॉल कार्यान्वयन की सख्त आवश्यकता है ( :: खांसी :: Google छवियां :: खांसी ::) ।

संपादित करें: छवियों के लिए प्लेसहोल्डर के रूप में लिंक का उपयोग कर सकता है पेज से पीआर प्रवाह का कारण है, और अधिक लिंक के बीच विभाजित करने की हालांकि पीआर हमेशा संरक्षित है जब तक आप का उपयोगnofollow सिद्धांत रूप में तो यह छवि खोज के लिए उन छवियों के पीआर में वृद्धि होगी।

यदि आप ऐसा नहीं चाहते हैं, या आप चाहते हैं कि पृष्ठ नॉन-जेएस उपयोगकर्ताओं के लिए इनायत से नीचा दिखाए, तो आप विपरीत मार्ग पर जा सकते हैं और नियमित छवियों के साथ शुरू कर सकते हैं, लेकिन पेज लोड (या यहां तक कि छवियों की विशेषता को बदलने के लिए जेएस को अवरुद्ध करके उपयोग करsrc सकते हैं) बस छवि तत्वों को हटा दें और srcअपनी आलसी लोडिंग कतार में विशेषताओं को संग्रहीत करें )। यदि आप इसे सही ढंग से करते हैं, तो आप वास्तव में डाउनलोड होने वाली किसी भी छवि को शुरू करने से पहले इसे प्राप्त कर सकते हैं।

— लेसे मेजेस्टे
स्रोत

2

मुझे यह देखना अच्छा लगेगा - Google नहीं दिखता है <noscript>और मुझे अभी तक फ़ायरफ़ॉक्स में इमेज लोडिंग को ब्लॉक करने का कोई तरीका नहीं मिला है; प्रतिस्थापन src( <script>टैग के तुरंत बाद एक टैग के साथ भी <img>) छवि को फ़ायरफ़ॉक्स के नवीनतम संस्करण में डाउनलोड करने से रोकने के लिए प्रतीत नहीं होता है। अगर आपको ऐसा करने का कोई और तरीका पता है, तो कृपया साझा करें!

— mindplay.dk

@ mindplay.dk: Google noscriptस्निपेट्स में टेक्स्ट का उपयोग नहीं करने का विकल्प चुन सकता है , लेकिन मैंने जो कुछ भी पढ़ा है वह मुझे विश्वास दिलाता है कि यह noscriptसामान्य रूप से सूचकांक सामग्री करता है । हालाँकि, आप प्रतिस्थापन के बारे में सही हैं src। मेरा मूल विचार पहली छवि script से पहले रखा गया था , ताकि यह स्क्रिप्ट लोड होने और निष्पादित होने तक छवियों के लोडिंग को अवरुद्ध करे। लेकिन अधिक परीक्षा के बाद, यह काम नहीं करेगा क्योंकि चित्र उस बिंदु पर DOM में दिखाई नहीं देंगे। आप होस्ट के समवर्ती कनेक्शन को अधिकतम करके डाउनलोडिंग को अवरुद्ध कर सकते हैं , लेकिन यह इन दिनों अव्यवहारिक है।

— लेज़े मेजेस्टे

किसी अन्य व्यक्ति के साथ आने वाली एक गंदी हैक जेएस का उपयोग करके जेएस-मुक्त छवियों को टिप्पणी करने के लिए है (इसलिए एक लंबा संस्करण है जो सट्टा पार्सिंग से संबंधित है) <script>document.write('<'+'!--');</script><img src=...>। आपको खुद तय करना होगा कि क्या यह एक स्वीकार्य तरीका है।

— लेज़े मेजेस्टे

2

मैंने इस पैटर्न से भरी हुई तस्वीरें देखी हैं:

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

Google और Google छवि खोज द्वारा उठाया गया और अन्य लोगों ने इसे देखा है। चूंकि Google अब आपके पृष्ठ पर जावास्क्रिप्ट निष्पादित करता है , इसलिए वास्तविक छवि को src विशेषता में डालने की आवश्यकता नहीं हो सकती है। एक src विशेषता की उपेक्षा करने से आपकी छवि के चारों ओर एक ग्रे बॉर्डर हो सकता है, इसलिए संभवतः कुछ इस तरह से जाना चाहिए:

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

नायब। यह आवश्यक रूप से अन्य खोज इंजनों पर लागू नहीं होता है।

— Willster
स्रोत