एसईओ पर आलसी लोडिंग चित्र और प्रभाव

हम अपनी साइट में छवियों को लोड करने के लिए निम्न तकनीक का उपयोग कर रहे हैं:

सभी छवियों के लिए हम srcविशेषता में एक डिफ़ॉल्ट img (यानी एक लोडर) के लिए एक url डालते हैं और वास्तविक छवि url को data-srcविशेषता में रखते हैं। इस तरह

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

जब छवि व्यूपोर्ट के बाहर होती है तो कुछ भी नहीं होता है, लेकिन जब छवि व्यूपोर्ट के अंदर जाती है, तो data-srcविशेषता से यूआरएल लोड होता है और छवि को सही तरीके से दिखाया जाता है।

इसका परिणाम यह हुआ है कि Google पृष्ठ की सभी छवियों (यानी एक खोज परिणाम पृष्ठ) को एक ही srcविशेषता के रूप में देखता है । क्योंकि गूगल बॉट ऑफ कोर्स डिफ़ॉल्ट रूप से केवल 'अनलोड' इमग टैग देता है src।

मेरा सवाल है: क्या एक ही srcविशेषता वाले कई आईएमजी टैग पेज के एसईओ को प्रभावित करते हैं ?

— bmenekl
स्रोत

मुझे लगता है कि उचित शीर्षक और ऊंचाई नौकरी का 90% है। फिल्म का नाम कम। यह Google छवियों में परिणामों मुझे लगता है कि प्रभावित कर सकते हैं

— मार्टिन

इन्हें भी देखें: webmasters.stackexchange.com/questions/26190/…

— सलमान ए

यह निश्चित रूप से Google छवि खोज में आपके द्वारा अनुक्रमित छवियों की संख्या को प्रभावित कर सकता है। क्या आप उस बारे में पूछ रहे हैं, या किसी भी प्रभावित के बारे में जो सामान्य वेब खोज के लिए रैंकिंग पर होगा?

— स्टीफन Ostermiller

@StephenOstermiller मेरी प्राथमिक चिंता रैंकिंग है, लेकिन एसईओ के लिए कोई प्रभाव (तत्काल या माध्यमिक) ब्याज की है

— bmenekl

यह सवाल StackOverflow पर पूछा गया है, लेकिन मेरी राय में इसके शानदार जवाब नहीं हैं।

— स्टीफन Ostermiller

जवाबों:

मैंने कभी नहीं देखा है कि आलसी लोडिंग का वेब खोज रैंकिंग पर कोई नकारात्मक प्रभाव पड़ता है। उपयोगकर्ताओं के लिए अपनी साइट के कथित प्रदर्शन में सुधार करना वास्तव में आपकी रैंकिंग में मदद कर सकता है। जब आपकी साइट पर प्रदर्शन समस्याओं के कारण कम लोग खोज परिणामों पर वापस लौटते हैं, तो आपकी रैंकिंग में सुधार होगा।

Google छवि खोज के लिए आलसी लोड की गई छवियों को अनुक्रमणित करने में सक्षम नहीं होगा। इसके बजाय कुछ संभावित तकनीकी सुधार हैं:

उन <noscript>टैग का उपयोग करें जो उन उपयोगकर्ताओं के लिए चित्र दिखाते हैं जिनके पास जावास्क्रिप्ट सक्षम नहीं है (और खोज इंजन बॉट)
अपनी छवियों के लिए लिंक भी। यह छवि खोज से कोई फर्क नहीं पड़ता है कि क्या छवि img src में है या href में है। तो निम्न स्निपेट से छवि आलसी लोड हो जाएगी और छवि खोज में पूर्ण आकार की छवि अनुक्रमित हो जाएगी: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— स्टीफन ओस्टरमिलर
स्रोत

मैं "noscript" पर भरोसा नहीं करूंगा - हम इसे उपयोग करने के लिए बहुत सारे स्पैम देख रहे हैं, इसलिए हम हमेशा वहाँ रखी गई सामग्री पर भरोसा करने के लिए पर्याप्त आश्वस्त नहीं हैं। मुझे छवियों के लिंक का उपयोग करने का विचार पसंद है। सामान्य तौर पर, यदि किसी पृष्ठ पर एक छवि प्राथमिक तत्वों में से एक है, तो मैं अभी भी इसे स्वाभाविक रूप से एम्बेड करने की दिशा में हूं (यदि आप विभिन्न आकारों का उपयोग कर रहे हैं तो कम से कम एक संस्करण), ताकि आप सुनिश्चित करें कि यह अनुक्रमित है सामान्य रूप से। हम इसके लिए एक बेहतर कहानी पर काम कर रहे हैं, लेकिन मैं इसे आज या कल बदलते नहीं देख रहा हूं।

— जॉन म्यूलर

यदि आप अपनी छवियों को पहले से ही उत्पादों या कुछ और के लिए एक लिंक से घिरे हुए हैं, तो अपनी रणनीति का उपयोग करके, आप एक <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 क्लिक को लेता है, जबकि बाहरी को अभी भी बॉट्स इंडेक्सिंग छवियों के लिए काम करना चाहिए।

— धापिन d

क्या यह उत्तर 2017 के लिए भी मान्य है? विशेष रूप से "Google छवि खोज के लिए आलसी लोड की गई छवियों को अनुक्रमित करने में सक्षम नहीं होगा।" भाग? तो क्या हमारे पास भी पोस्ट में 10 छवियां हैं, Google को लगता है कि हमारे पास कोई चित्र नहीं है?

— मैं

यह अभी भी मामला है, लेकिन आप अभी भी अपनी छवियों को उन्हें अनुक्रमित करने के लिए लिंक कर सकते हैं।

— स्टीफन 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> टैग और लिंक टेक्स्ट के साथ> टैग को घेरते हैं । अन्यथा सर्च इंजन शब्द दूरी के आधार पर कीवर्ड को इमेज के साथ जोड़ देगा। आप एसईओ के लिए यह सब मुसीबत के लिए जा रहे हैं आप सभी तरह से जा सकते हैं।

यदि आप उपरोक्त का उपयोग करें। कुछ भी नहीं दिखाएगा क्योंकि चित्र छिपे हुए हैं। आप दस्तावेज़ के निचले भाग में इस वर्ग को हटाना चाहते हैं। यहाँ कुंजी इनलाइन शुद्ध जावास्क्रिप्ट का उपयोग करना है। उपरोक्त तत्वों के लेआउट समाप्त होने के तुरंत बाद इस जावास्क्रिप्ट को निष्पादित किया जाता है। यदि आप अपनी सभी बाहरी जेएस फाइलों को नीचे की ओर लोड करते हैं (जैसा कि आपको करना चाहिए)। आपको उन फ़ाइलों के ऊपर इस जावास्क्रिप्ट ब्लॉक को रखना चाहिए। ताकि 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 के लिए सशर्त जोड़े क्योंकि यह getElementsByClassName8 और पुराने में समर्थन नहीं करता है । क्या होना चाहिए (परीक्षण नहीं किया गया) यह है कि उन ब्राउज़रों को छवि को बस के रूप में लोड किया जाएगा।

इस दृष्टिकोण का लाभ यह है कि यह HTML को वेबक्रॉलर के दृष्टिकोण से साफ दिखता है।

— Reactgular
स्रोत

मैं उत्सुक था और परीक्षण पृष्ठ की कोशिश की। मैक पर नवीनतम क्रोम और सफारी छवि लोड करने के लिए लगता है। इतना निश्चित नहीं है कि यह बहुत विश्वसनीय है, दुर्भाग्य से ...

— पावरा

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

— bmenekl

@bmenekl नहीं, यह उत्तर आलसी लोडिंग नहीं करता है। यह केवल जावास्क्रिप्ट को सक्षम करता है जब एक जावास्क्रिप्ट सक्षम ब्राउज़र में देखा जाता है ताकि एक तृतीय-पक्ष स्क्रिप्ट आलसी लोडिंग कर सके।

— रिएक्टगुलर

Google ने अपने बॉट्स के साथ जावास्क्रिप्ट को निष्पादित करने की घोषणा की, अधिक विवरण के लिए इस पोस्ट को देखें ।

जैसा कि प्रलेखित किया गया है, आपको गतिशील रेंगने के लिए GoogleBot पर स्थिर फ़ाइलों को मना नहीं करना चाहिए।

— ज़ुलु
स्रोत