क्या सीएसएस स्प्राइट एसईओ के लिए खराब हैं?

18

आजकल अक्सर एक <img>टैग के साथ जो पूरा किया गया था वह अब <div>सीएसएस पृष्ठभूमि छवि के साथ सीएसएस 'स्प्राइट' और एक ऑफसेट का उपयोग करके सेट के साथ किया जाता है ।

मैं सोच रहा था कि SEO पर उसका किस तरह का प्रभाव है, क्योंकि प्रभावी रूप से हम उस altविशेषता को खो देते हैं (जिसे Google द्वारा अनुक्रमित किया जाता है), और 'शीर्षक' विशेषता (जो जहाँ तक मुझे समझ में नहीं आता है, अनुक्रमित नहीं है) के साथ अटका हुआ है।

क्या यह एक महत्वपूर्ण नुकसान है?

seo css

— खाड़ी के ऊपर
स्रोत

25

CSS स्प्राइट्स का उपयोग केवल इस कारण से सजावटी तत्वों के लिए किया जाना चाहिए - उन तत्वों के लिए उपयोग करें <img>जो एक पृष्ठ के लिए विशिष्ट हैं और सजावटी तत्वों के लिए स्प्राइट्स का उपयोग करते हैं जो कि प्रस्तुत सामग्री के लिए प्रासंगिक रूप से प्रासंगिक नहीं हैं।

यदि आपको अपने नेविगेशन आइटमों के लिए एक बटन छवि की आवश्यकता है, तो उस चित्र को जोड़ने के बजाय नेविगेशन लिंक पर एक पृष्ठभूमि के रूप में उस छवि को जोड़ने के लिए बहुत अधिक समझ में आता है:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(यानी जहां पृष्ठ पर पाठ सामग्री के लिए छवि की सामग्री निरर्थक है या छवि की सामग्री को सबसे अच्छी तरह से "सजावट" के रूप में वर्णित किया जा सकता है)

साइट टेम्पलेट तत्वों को स्प्राइट के रूप में अलग करने के अतिरिक्त बोनस के रूप में, आप बाद में पुरानी डिज़ाइन की छवि फ़ाइलों को अधिलेखित करने या अपने सभी HTML मार्कअप को फिर से लिखने के बजाय स्टाइलशीट को बदलकर साइट की "त्वचा" को बदल पाएंगे।

— danlefree
स्रोत

मैं आपकी बातों से सहमत हूं और यह कहना चाहूंगा कि स्प्राइट के मुख्य उद्देश्यों / लाभों में से एक समग्र साइट प्रदर्शन के लिए उनकी तेज गति है। फास्टर पेज एसईओ रैंकिंग के साथ मदद करने के लिए सपोर्टेड है, इसलिए मुझे लगता है कि यह सही काम के लिए सही टूल की बात है।

— digit1001

@ digit1001 - क्या googlebot जैसे बॉट वास्तव में एक पेज से जुड़े सभी संसाधनों को लोड करते हैं?

— उपराष्ट्रपति

4

आप <img>सीएसएस स्प्राइट के साथ टैग का उपयोग कर सकते हैं :

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png <50 बाइट्स के लिए संकुचित 1x1 पारदर्शी पिक्सेल हो सकता है।

अंदाज:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

इस तरह आपको स्प्राइट से प्रदर्शन अनुकूलन मिलता है - और अपने altटैग रखें ।

— JohnnyFaldo
स्रोत

मुझे पूरा यकीन है कि अगर Google 30 ट्रिलियन पृष्ठों को रैंक और इंडेक्स करने के लिए जटिल प्रक्रियाओं के साथ एक खोज इंजन की रचना कर सकता है, तो यह 1x1 पिक्सेल ऊँचाई का पता लगा सकता है।

— रिकी बॉयस 12

1

@ रेकी बी यह नहीं है कि क्या वे इसका पता लगाएंगे, लेकिन यदि वे इसके लिए आपको दंडित करते हैं, तो यह अजीब होगा, क्योंकि वे आपको पेज लोड समय और अनुरोधों की संख्या को कम करने के लिए दंडित कर रहे होंगे, जो कि उन्हें प्रोत्साहित करने के लिए कुछ है: )

— जॉनीफाल्डो

1

altटैग अहंकारी है। मुझे लगता है कि बहुत से लोग altअपने पृष्ठों पर टैग सुनिश्चित करने के लिए अपने रास्ते से हट जाते हैं । मेरा मानना है कि यह आपको एक नहीं करने के लिए दर्द होता है। यह सुनिश्चित करने की बात है कि यदि आपके पास एक है img, तो आपके पास एक altटैग है जो उसे सौंपा गया है।

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

— ब्रैंडन बटर्स
स्रोत

5

altपाठ स्क्रीन रीडर द्वारा प्रयोग किया जाता है। मुझे लगता है कि अगर आप अंधे थे तो आपके पास ऑल्ट टेक्स्ट की एक अलग राय हो सकती है।

— माइकइलियार

1

मैं सजावटी चिह्नों के लिए स्प्राइट्स का उपयोग करता हूं, उनके पास उस मामले में एसईओ के लिए पृष्ठ के साथ कुछ भी नहीं करना है। आपके पास जो भी छवियां हैं, वे सभी समान आयाम हैं जो पृष्ठ के अर्थ में योगदान नहीं करते हैं, सीएसएस स्प्राइट्स के लिए अच्छे उम्मीदवार हैं।

— चंचल नोब
स्रोत