সিএসএস স্প্রাইটস কি এসইও-র পক্ষে খারাপ?


18

আজকাল প্রায়শই একটি <img>ট্যাগ দিয়ে যা করা হয়েছিল তা এখন <div>সিএসএস 'স্প্রাইট' এবং অফসেট ব্যবহার করে সিএসএস ব্যাকগ্রাউন্ড ইমেজ সেট এর মতো কিছু দিয়ে করা হয় ।

আমি ভাবছিলাম যে এসইও-তে তাঁর কী ধরনের প্রভাব রয়েছে, কার্যকরভাবে আমরা altগুণটি (যা গুগল দ্বারা সূচিত হয়) হারাতে পারি এবং 'শিরোনাম' বৈশিষ্ট্যটির সাথে আটকে থাকি (যা আমি যতটা বুঝতে পারি তত্ক্ষণিকভাবে নয়)।

এটি কি একটি উল্লেখযোগ্য অসুবিধা?

উত্তর:


25

সিএসএস স্প্রিটগুলি কেবলমাত্র এই কারণে আলংকারিক উপাদানের জন্য ব্যবহার করা উচিত - যে <img>পৃষ্ঠাগুলির সাথে সুনির্দিষ্ট উপাদানগুলির জন্য ব্যবহার করুন এবং প্রসাধনী উপাদানগুলির জন্য স্প্রাইট ব্যবহার করুন যা উপস্থাপিত সামগ্রীর সাথে প্রাসঙ্গিকভাবে প্রাসঙ্গিক নয়।

আপনার ন্যাভিগেশন আইটেমগুলির জন্য আপনার যদি একটি বোতামের চিত্রের প্রয়োজন হয় তবে এটির মতো মার্কআপের চেয়ে নেভিগেশন লিঙ্কটিতে একটি চিত্রটিকে ব্যাকগ্রাউন্ড হিসাবে যুক্ত করা আরও বেশি অর্থবোধ করে:

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

(উদাহরণস্বরূপ, যেখানেই পৃষ্ঠার লিখিত সামগ্রীতে চিত্রের বিষয়বস্তু অপ্রয়োজনীয় বা চিত্রের বিষয়বস্তু সর্বোত্তমভাবে "সজ্জা" হিসাবে বর্ণনা করা যেতে পারে)

সাইট টেমপ্লেট উপাদানগুলিকে স্প্রিট হিসাবে পৃথক করার অতিরিক্ত বোনাস হিসাবে, আপনি পরে পুরানো নকশা চিত্র ফাইলগুলি ওভাররাইট করার পরিবর্তে বা আপনার সমস্ত এইচটিএমএল মার্কআপকে পুনরায় লেখার পরিবর্তে স্টাইলশিট পরিবর্তন করে সাইটের "ত্বক" পরিবর্তন করতে সক্ষম হবেন।


আমি আপনার পয়েন্টগুলির সাথে একমত এবং যোগ করব যে স্প্রেটসের অন্যতম প্রধান উদ্দেশ্য / সুবিধা হ'ল সামগ্রিক সাইটের পারফরম্যান্সের জন্য তাদের দ্রুত লোড গতি। দ্রুত পৃষ্ঠা লোডগুলি এসইও র‌্যাঙ্কিংয়ে সহায়তা করার জন্য প্রস্তাবিত, তাই আমি মনে করি এটি সঠিক কাজের জন্য সঠিক সরঞ্জামের বিষয়।
Digit1001

@ Digit1001 - গুগলবোটের মতো বটগুলি আসলেই কোনও পৃষ্ঠার সাথে যুক্ত সমস্ত সম্পদ লোড করে?
আপক্রিক

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ট্যাগগুলি রাখুন।


আমি নিশ্চিত যে গুগল 30 ট্রিলিয়ন পৃষ্ঠাগুলি র‌্যাঙ্ক এবং সূচীকরণের জন্য জটিল প্রক্রিয়াগুলি সহ কোনও অনুসন্ধান ইঞ্জিন রচনা করতে পারে তবে এটি 1x1 পিক্সেল ইএল সূত্র সনাক্ত করতে পারে।
রিকি বয়েস 12

1
@ রিকি বি তারা এটি সনাক্ত করতে পারে কিনা তা নয়, তবে তারা যদি এর জন্য আপনাকে বিচিত্রভাবে দণ্ড দেয় তবে এটি পৃষ্ঠপোষকতার সময় এবং অনুরোধের সংখ্যা হ্রাস করার জন্য আপনাকে দণ্ডিত করে যাচ্ছুক হবে, যা তারা উত্সাহিত করার ঝোঁক: )
জনিফাল্ডো

1

altট্যাগ সমধিক করা হয়। আমি মনে করি যে altতাদের পৃষ্ঠায় ট্যাগ রয়েছে তা নিশ্চিত করার জন্য অনেক লোক তাদের পথ ছেড়ে চলে গেছে । আমি বিশ্বাস করি না যে এটি না পেয়ে আপনার কষ্ট হয়। এটি নিশ্চিত করার বিষয় যদি আপনার কাছে একটি থাকে img, আপনার altকাছে এটি ট্যাগ দেওয়া আছে।

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


5
altটেক্সট এছাড়াও স্ক্রীন রিডার দ্বারা ব্যবহৃত হয়। আমি মনে করি আপনি অন্ধ হলে আপনার কাছে আল পাঠের ভিন্ন মতামত থাকতে পারে।
মাইক দ্য লাইয়ার

1

আমি আলংকারিক আইকনগুলির জন্য স্প্রিট ব্যবহার করি, এ ক্ষেত্রে SEO এর জরিমানার জন্য সামগ্রিকভাবে পৃষ্ঠার সাথে তাদের কোনও সম্পর্ক নেই। আপনার কাছে থাকা চিত্রগুলির যে কোনও সেট হ'ল সমস্ত একই মাত্রা যা পৃষ্ঠার অর্থকে অবদান রাখে না সিএসএস স্প্রাইটের জন্য ভাল প্রার্থী।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.