এসইওতে অলস লোডিং চিত্র এবং প্রভাব effects

আমাদের সাইটে অলস লোড চিত্রগুলি আমরা নিম্নলিখিত কৌশলটি ব্যবহার করছি:

সমস্ত চিত্রের জন্য আমরা srcএকটি ডিফল্ট img (অর্থাত্ কোনও লোডার) এর জন্য একটি ইউআরএল বৈশিষ্ট্য রেখেছি এবং প্রকৃত চিত্রের ইউআরএলকে data-srcবৈশিষ্ট্যে রেখেছি। তাই ভালো

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

যখন চিত্রটি ভিউপোর্টের বাইরে থাকে তখন কিছুই ঘটে না, তবে চিত্রটি ভিউপোর্টের অভ্যন্তরে চলে গেলে data-srcবৈশিষ্ট্যটি থেকে ইউআরএল লোড হয় এবং চিত্রটি সঠিকভাবে প্রদর্শিত হয়।

এটির ফলস্বরূপ যে গুগল পৃষ্ঠার সমস্ত চিত্র (যেমন একটি অনুসন্ধান ফলাফল পৃষ্ঠা) একই srcবৈশিষ্ট্য হিসাবে দেখেছে । কারণ গুগল বট অবশ্যই ডিফল্টর সাথে 'আনলোডেড' আইএমজি ট্যাগকে বিশ্লেষণ করে src।

আমার প্রশ্ন হ'ল: একই srcবৈশিষ্ট্যযুক্ত অনেকগুলি আইএমজি ট্যাগ থাকা পৃষ্ঠার এসইওকে প্রভাবিত করে ?

— bmenekl
সূত্র

আমি মনে করি উপযুক্ত শিরোনাম এবং Alt 90% কাজ। ফাইল নাম কম। এটি অনুমান করা গুগল চিত্রগুলিতে ফলাফলগুলিকে প্রভাবিত করতে পারে

— মার্টিজন

আরও দেখুন: ওয়েবমাস্টার্স.স্ট্যাকেক্সচেঞ্জ

— সালমান এ

এটি অবশ্যই গুগল ইমেজ অনুসন্ধানে আপনাকে সূচিকৃত চিত্রগুলির সংখ্যাকে প্রভাবিত করতে পারে। আপনি কি সে সম্পর্কে জিজ্ঞাসা করছেন, বা এটি কোনও সাধারণ ওয়েব অনুসন্ধানের জন্য র‌্যাঙ্কিংয়ে পড়তে পারে এমন কোনও প্রভাব সম্পর্কে?

— স্টিফেন অসটারমিলার

@ স্টেফেনঅস্টার মিলার আমার প্রাথমিক উদ্বেগ র‌্যাঙ্কিং, তবে এসইওর কোনও প্রভাব (তাত্ক্ষণিক বা গৌণ) আগ্রহের বিষয়

— বমেঙ্কেল

এই প্রশ্নটি স্ট্যাকওভারফ্লোতে জিজ্ঞাসা করা হয়েছে তবে এটি আমার মতে দুর্দান্ত উত্তর নেই।

— স্টিফেন অসটারমিলার

উত্তর:

আমি কখনও দেখিনি যে চিত্র অলস লোডিংয়ের ওয়েব অনুসন্ধানের র‌্যাঙ্কিংয়ে কোনও নেতিবাচক প্রভাব রয়েছে। ব্যবহারকারীদের জন্য আপনার সাইটের অনুভূত কর্মক্ষমতা উন্নত করা সত্যই আপনার র‌্যাঙ্কিংয়ে সহায়তা করতে পারে। আপনার সাইটের কর্মক্ষমতা সমস্যার কারণে যখন খুব কম লোক অনুসন্ধান ফলাফলগুলিতে ফিরে আসে, তখন আপনার র‌্যাঙ্কিং উন্নত হবে।

গুগল চিত্র অনুসন্ধানের জন্য অলস বোঝা ইমেজ সূচক করতে সক্ষম হবে না। পরিবর্তে কিছু সম্ভাব্য প্রযুক্তিগত সমাধান রয়েছে যেমন:

<noscript>এমন জাভাস্ক্রিপ্ট সক্ষম না করা ব্যবহারকারীদের জন্য চিত্রগুলি প্রদর্শন করে এমন ট্যাগ ব্যবহার করুন (এবং অনুসন্ধান ইঞ্জিনের বটগুলি)
এছাড়াও আপনার ইমেজ লিঙ্ক। চিত্রটি ইমগ এসসিআর বা কোনও এইচআরএফ-এ রয়েছে কিনা তা চিত্র অনুসন্ধানে কিছু মনে হচ্ছে না। সুতরাং নীচের স্নিপেটটি চিত্রটি অলস বোঝাই হয়ে উঠবে এবং চিত্র সন্ধানে পূর্ণ আকারের চিত্রকে সূচিযুক্ত করবে: <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— স্টিফেন অসটারমিলার
সূত্র

আমি "নসক্রিপ্ট" এর উপর নির্ভর করব না - আমরা প্রচুর স্প্যাম এটি ব্যবহারের চেষ্টা করে দেখছি, তাই আমরা সেখানে থাকা সামগ্রীতে আস্থা রাখতে পর্যাপ্ত আত্মবিশ্বাসী নই। আমি ইমেজগুলির লিঙ্কগুলি ব্যবহার করার ধারণাটি পছন্দ করি। সাধারণভাবে, যদি কোনও চিত্র কোনও পৃষ্ঠার প্রাথমিক উপাদানগুলির মধ্যে একটি হয় তবে আমি এখনও প্রাকৃতিকভাবে এটি এম্বেড করার দিকে ঝোঁক ছিলাম (এটির কমপক্ষে একটি সংস্করণ, যদি আপনি বিভিন্ন আকারের ব্যবহার করছেন) যাতে আপনি নিশ্চিত হন যে এটি সূচিবদ্ধ হয়েছে স্বাভাবিকভাবে। আমরা এর জন্য আরও ভাল গল্পে কাজ করছি, তবে আমি আজ বা কাল এটি পরিবর্তন করতে দেখছি না।

— জন মুয়েলার

আপনার কৌশলটি ব্যবহার করে, আপনি যদি কোনও চিত্র বা পণ্যগুলির জন্য কোনও লিঙ্ক দ্বারা ইতিমধ্যে চারপাশে আবদ্ধ থাকে তবে আপনি <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>

অভ্যন্তরীণ লিঙ্কটি ইউআই ক্লিকটি নেয়, যদিও বাইরেরটি এখনও বটগুলি সূচীকরণের জন্য কাজ করতে পারে।

— ধাউপিন

এই উত্তরটি কি 2017 এর জন্যও বৈধ? বিশেষভাবে "গুগল ইমেজ অনুসন্ধানের জন্য অলস বোঝা ইমেজ সূচক করতে সক্ষম হবে না?" অংশ? এমনকি পোস্টে আমাদের 10 টি চিত্র রয়েছে, গুগল কি মনে করে আমাদের কোনও চিত্র নেই?

— আমি সবচেয়ে বোকা ব্যক্তি

এটি এখনও কেস, তবে আপনার চিত্রগুলিকে সূচকযুক্ত করতে আপনি এখনও লিঙ্ক করতে পারেন।

— স্টিফেন অস্টেরমিলার

বেশিরভাগ অনুসন্ধান ইঞ্জিনগুলি এমন চিত্রগুলিকে সূচী করবে যা আপনি লুকানো থাকা অবধি যতক্ষণ না ছবিটি লুকানোর জন্য ইনলাইন স্টাইল ব্যবহার করেন না। বেশিরভাগ ব্রাউজার লুকানো চিত্র লোড করবে না ।

এখানে একটি পরীক্ষা পৃষ্ঠা রয়েছে যা এই দাবিটি যাচাই করতে পারে। কিছু পুরানো মোবাইল ব্রাউজার ব্যতিক্রম, তবে আমি যুক্তি দিয়েছি যে মোবাইল ফোনে অলস লোডিং একটি ভাল ব্রাউজিং অভিজ্ঞতার পক্ষে কার্যকর হতে পারে।

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

আপনার সিএসএস ফাইলে নিম্নলিখিত পরিবর্তনগুলি যুক্ত করুন।

.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> ট্যাগ এবং লিঙ্কের পাঠ্য সহ> ট্যাগকে ঘিরে । অন্যথায় অনুসন্ধান ইঞ্জিনগুলি শব্দটির দূরত্ব দ্বারা চিত্রের সাথে কীওয়ার্ড সংযুক্ত করবে। আপনি এসইওর জন্য এই সমস্ত সমস্যায় যাচ্ছেন আপনি সম্ভবত পুরোপুরি যেতে পারেন।

আপনি উপরের হিসাবে যেমন ব্যবহার করেন। চিত্রগুলি লুকানো থাকায় কিছুই প্রদর্শিত হবে না। আপনি নথির নীচে এই শ্রেণিটি সরাতে চান। এখানে কীটি ইনলাইন খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করা। এই জাভাস্ক্রিপ্ট উপরের উপাদানগুলির বিন্যাস সমাপ্ত হওয়ার সাথে সাথেই কার্যকর করা হয়। আপনি যদি নীচে আপনার সমস্ত বাহ্যিক জেএস ফাইল লোড করেন (আপনার যেমনটি করা উচিত)। আপনার এই জাভাস্ক্রিপ্ট ব্লকটি সেই ফাইলগুলির উপরে রাখা উচিত। যাতে ডিওএম সংশোধন করার ক্ষেত্রে কোনও পিছনে নেই।

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

এখন আমি আই 9 এর জন্য শর্তসাপেক্ষ যুক্ত করেছি যেহেতু এটি getElementsByClassName8 বা তার বেশি বয়সীদের সমর্থন করে না । যা হওয়া উচিত (পরীক্ষিত নয়) তা হ'ল সেই ব্রাউজারগুলি কেবল ইমেজটি লোড করবে।

এই পদ্ধতির সুবিধা হ'ল এটি ওয়েবক্রোলারের দৃষ্টিকোণ থেকে এইচটিএমএলকে পরিষ্কার দেখায়।

— Reactgular
সূত্র

আমি কৌতূহলী ছিলাম এবং পরীক্ষার পৃষ্ঠাটি চেষ্টা করেছিলাম। ম্যাকের সর্বশেষতম ক্রোম এবং সাফারি চিত্রটি লোড করে বলে মনে হচ্ছে। দুর্ভাগ্যক্রমে দুর্ভাগ্যক্রমে ... এটি খুব নির্ভরযোগ্য তাই নিশ্চিত নন ...

— পেভারা

দুর্ভাগ্যক্রমে এই পদ্ধতির সাথে, চিত্রগুলি সমস্ত নথির নীচে অলস-বোঝা (খারাপ নয়), তবে আমি আমার প্রশ্নে ব্যাখ্যা করছি, আমার পদ্ধতির মধ্যে চিত্রগুলি কেবল ভিউপোর্টে প্রবেশের সময়ই অলস লোড হয়। সুতরাং যে কোনও চিত্র যা ভিউপোর্টে প্রবেশ করে না (যেমন এন্ডুয়েজারটি পৃষ্ঠায় নীচে স্ক্রোল করে না) মোটেই লোড হবে না। অনেকগুলি চিত্র সহ একটি পৃষ্ঠায় এটি সত্যিই গুরুত্বপূর্ণ

— bmenekl

@bmenekl না, এই উত্তরটি অলস লোডিং করে না। কোনও জাভাস্ক্রিপ্ট সক্ষম ব্রাউজারে দেখা হলে এটি কেবলমাত্র এইচটিএমএলকে পরিবর্তন করে যাতে তৃতীয় পক্ষের স্ক্রিপ্টটি অলস লোডিং করতে পারে।

— সংঘটিত

গুগল তাদের বট দিয়ে জাভাস্ক্রিপ্ট কার্যকর করার ঘোষণা দিয়েছে, আরও ব্যাখ্যার জন্য এই পোস্টটি দেখুন।

ডকুমেন্ট হিসাবে আপনার গতিশীল ক্রলিংয়ের জন্য স্ট্যাটিক ফাইলগুলিকে গুগলবোটে নিষেধ করা উচিত নয়।

— জুলু
সূত্র