কীভাবে একটি ছবিতে সঠিকভাবে ALT অ্যাট্রিবিউট যোগ করবেন?

সুচিপত্র:

কীভাবে একটি ছবিতে সঠিকভাবে ALT অ্যাট্রিবিউট যোগ করবেন?
কীভাবে একটি ছবিতে সঠিকভাবে ALT অ্যাট্রিবিউট যোগ করবেন?
Anonim

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

কোড অপ্টিমাইজেশান

ALT বৈশিষ্ট্য সেট করুন
ALT বৈশিষ্ট্য সেট করুন

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

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

ALT অ্যাট্রিবিউট কী?

আসুন প্রথম থেকেই শুরু করা যাক: আমরা এই নিবন্ধটি সম্পর্কে বর্ণনা করববক্তৃতা এবং কেন আমাদের এই বৈশিষ্ট্যটি আদৌ দরকার৷

ALT বৈশিষ্ট্য
ALT বৈশিষ্ট্য

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

ব্যবহারিক মান

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

সমস্ত দৃশ্যমান ছবিতে ALT বৈশিষ্ট্য অনুপস্থিত
সমস্ত দৃশ্যমান ছবিতে ALT বৈশিষ্ট্য অনুপস্থিত

সার্চ ইঞ্জিন থেকে বোনাস

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

কীভাবে ALT অ্যাট্রিবিউট লিখবেন?

প্রযুক্তিগতভাবে, এই বা সেই ছবির নীচে একটি বিবরণ পূরণ করা কঠিন কিছু নেই৷ এটি সুস্পষ্ট: আপনাকে আপনার সাইটের এইচটিএমএল সম্পাদকে যেতে হবে এবং চিত্র কোডটি খুঁজে বের করতে হবে (IMG দিয়ে শুরু হয় এবং একই সাথে শেষ হয়)। কোডের এই ব্লকের ভিতরে, কোড আছে। তারা যখন বলে যে আপনাকে ALT অ্যাট্রিবিউট লিখতে হবে তখন তারা এটাই বোঝায়। এটি এভাবে করা হয়: " alt=""description"।

আপনি যদি বিশুদ্ধ কোডের সাথে কাজ না করেন তবে সাইটের জন্য কিছু আলাদা "ইঞ্জিন" ব্যবহার করেন (উদাহরণস্বরূপ, Wordpress বা জুমলা), এটি " alts" যোগ করার জন্য একটি বিশেষ প্রক্রিয়াকে একীভূত করে যার মাধ্যমে আমাদের সাইটটি মনে রাখা হবে সার্চ ইঞ্জিন দ্বারা আপনি যদি একটি নতুন ALT পূরণ করেন, আপডেটটি আপনার পৃষ্ঠায় রয়েছে৷

তারা অ্যাট্রিবিউটে কী লেখে?

অবশ্যই, যখন আপনার কাছে ALT অ্যাট্রিবিউট লেখার কাজ থাকে, আপনি প্রযুক্তিগত বিষয়ে ভাবছেন নাপাশ প্রায়শই, এই প্রশ্নটি জিজ্ঞাসা করা হয় যদি ওয়েবমাস্টার জানেন না যে তাকে একটি নির্দিষ্ট চিত্র সম্পর্কে কী তথ্য সরবরাহ করতে হবে। এটি সার্চ ইঞ্জিনের দৃষ্টিকোণ থেকে সাইটটিকে কোন তথ্য উপকৃত করবে তা বলা কঠিন করে তোলে৷

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

অনুপস্থিত alt বৈশিষ্ট্য
অনুপস্থিত alt বৈশিষ্ট্য

প্রয়োজনীয়তা

একই সময়ে, বেশ কিছু মৌলিক নিয়ম (অথবা, যদি আপনি চান, প্রয়োজনীয়তা) রয়েছে যা অনুযায়ী প্রত্যেকে তাদের ছবির জন্য আদর্শ বৈশিষ্ট্য যোগ করতে পারে। তারা অল্প সংখ্যক আইটেম নিয়ে গঠিত, যার প্রত্যেকটি সাইটের ফটো এবং ছবির বর্ণনাকে নির্দেশ করে৷

উদাহরণস্বরূপ, এই ধরনের প্রথম প্রয়োজনীয়তা হল সমগ্র পাঠ্যের দৈর্ঘ্য। আপনি যদি ALT বৈশিষ্ট্যটি সঠিকভাবে লিখতে চান তবে সমাধানটি প্রাথমিক: 2-3টির বেশি শব্দ ব্যবহার করবেন না। এই আকারের পাঠ্য, প্রথমত, একটি অনুসন্ধান রোবট দ্বারা আদর্শভাবে পড়া হবে (এবং আপনার সাইটটিকে আরও প্রাসঙ্গিক করে তুলবে); দ্বিতীয়ত, এই ধরনের বর্ণনা ব্যবহারকারীদের নিজেরাই আরও বোধগম্য। সম্মত হন, পুরো বাক্যটি পড়ুন, আপনি যদি কেবল ছবিতে কী দেখানো হয়েছে তা জানতে চান, কেউ করবে না। সংক্ষিপ্ত এবং সুনির্দিষ্ট হতে যথেষ্ট.একটি বিবরণ যা আপনার এবং আপনার গ্রাহকদের উভয়ের জন্যই উপযোগী হবে৷

অর্থ সম্পর্কে ভুলবেন না। আপনি যদি একটি হাতির একটি ছবি পোস্ট করেন, তার বংশ বা ইতিহাস বর্ণনা করতে ভুলবেন না; কেন এটি এই ফটোতে চিত্রিত করা হয়েছে তা উল্লেখ করুন, আপনি এটি দ্বারা কী বলতে চান৷ এই হাতি সম্পর্কে আপনার চিন্তাভাবনা জানা দর্শকদের জন্য সহায়ক হবে।

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

অবশেষে, আপনি যে ছবিগুলিতে ALT অ্যাট্রিবিউট যুক্ত করতে চান তার পরামিতিগুলি মনে রাখবেন৷ ছবির জন্য, অনেকগুলি মানদণ্ড পূরণ করা গুরুত্বপূর্ণ - খুব ছোট না হওয়া, বাস্তবসম্মত দেখতে। অর্থাৎ, যদি আপনি একটি বিবরণ নির্দিষ্ট করেন, তাহলে আরও গুরুতর চিত্রগুলির জন্য এটি করুন যা আরও ওজনদারভাবে বিবেচনা করা হয়। কিছু ছোট ইমোটিকন বা এরকম কিছুর জন্য "ইমেজ" অ্যাট্রিবিউটের যোগ্যতা অর্জন করবেন না।

অনুসন্ধান ALT

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

আপনার কাছে যদি এই ধরনের তথ্য না থাকে এবং আপনি ধীরে ধীরে আপনার সম্পদের প্রচার শুরু করার বিষয়ে একেবারেই চিন্তা না করে থাকেন, তাহলে আমরা আপনাকে এমন “কীওয়ার্ড”-এর ডাটাবেস খোঁজা শুরু করার পরামর্শ দিই যা দিয়ে আপনি সহজেই নতুন সাইট তৈরি করতে পারেন। এর জন্য, Google Keyword Extract Tool বা Yandex. Wordstat এর মতো পরিষেবাগুলি নিখুঁত, যা নির্দিষ্ট বাক্যাংশগুলির জন্য অনুসন্ধান পরিসংখ্যান দেখায়৷ এই সেটিংসের সাথে "খেলা" করে, আপনি আপনার সাইটে সার্চ ট্র্যাফিকের ভাগ উল্লেখযোগ্যভাবে বৃদ্ধি করতে পারেন এবং এর ফলে নতুন সুবিধা পেতে শুরু করতে পারেন৷ প্রধান জিনিসটি হল এমন পরিস্থিতি এড়ানো যেখানে সমস্ত দৃশ্যমান ছবিতে ALT বৈশিষ্ট্যের অভাব রয়েছে৷

সিদ্ধান্ত

তাহলে, এই নিবন্ধে বর্ণিত বৈশিষ্ট্য সম্পর্কে আমরা কী বলতে পারি? এটি সেই ভাষার অংশ যেখানে সবচেয়ে সহজ সাইটগুলি তৈরি করা হয় - HTML। এটি করা খুব সহজ, যেহেতু এটি একটি প্রাথমিক, মৌলিক ভাষা বর্ণনা করে। ছবিগুলিতে ট্যাগটি এখনও নিবন্ধন করার জন্য, আপনাকে সোর্স কোডের মাধ্যমে স্বাধীনভাবে এটি ইস্যু করতে হবে। অথবা, নতুন নির্দেশাবলী ব্যবহার করে, আবার তৈরি করা শুরু করুন। যাই হোক না কেন, "ইমেজ" ট্যাগ করা পারস্পরিক সুবিধার নিখুঁত ক্ষেত্রে যখন দর্শক এবং সম্পদের মালিক উভয়েই সন্তুষ্ট হয়৷

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

প্রস্তাবিত: