সংক্ষেপে উত্তর
এই লেখায় যা আছে (13)
- ALT text কী এবং কেন দরকার
- ভালো ALT text লেখার নিয়ম
- যা দেখা যাচ্ছে তা-ই সংক্ষেপে লিখুন
- "ছবি" বা "image of" লিখবেন না
- Keyword স্বাভাবিকভাবে, stuffing নয়
- প্রতিটি ছবির জন্য আলাদা ALT
- সাজসজ্জার ছবিতে খালি ALT
- ALT text-এর বাইরে ছবির SEO
- ALT text বাংলায় না English-এ?
- ধাপে ধাপে ALT text ঠিক করুন
- কোথায় ALT text দেবেন ও কীভাবে যাচাই করবেন
- সাধারণ ভুল
- এরপর কী করবেন
আপনার shop-এ হয়তো কয়েক হাজার product ছবি আছে, যেগুলোর নাম IMG_20240512.jpg আর ALT text খালি। Google ছবি "দেখে" কিছুটা বুঝতে পারলেও, ছবিটি কী এবং page-এর সাথে কীভাবে সম্পর্কিত তা বোঝার জন্য এখনো লেখার উপর অনেকটা নির্ভর করে। ALT text সেই লেখার সবচেয়ে সরাসরি জায়গা।
এই লেখায় জানবেন ALT text কী, কেন e-commerce-এ দরকার, কীভাবে ভালো ALT লিখবেন (বাংলা ও English উদাহরণসহ), আর file name ও ছবির আশেপাশের লেখা কীভাবে কাজে লাগাবেন।
ALT text কী এবং কেন দরকার
ALT text (alternative text) হলো HTML-এ ছবির সাথে যুক্ত একটি ছোট বিবরণ: <img src="panjabi.webp" alt="নেভি ব্লু কটন পাঞ্জাবি">। সাধারণ visitor এটি দেখেন না, কিন্তু তিনটি জায়গায় এটি কাজ করে:
- Screen reader: দৃষ্টিপ্রতিবন্ধী ব্যবহারকারীর জন্য ছবির বর্ণনা পড়ে শোনায়।
- ছবি load না হলে: ধীর mobile data-তে ছবি না এলে ওই জায়গায় লেখাটি দেখা যায়।
- Google: ছবির বিষয় ও page-এর সাথে সম্পর্ক বুঝতে ALT text, file name, caption ও আশেপাশের লেখা ব্যবহার করে। এতে Google Images ও সাধারণ সার্চে ছবি দেখানোর সুযোগ বাড়ে।
পোশাক, গয়না, home decor-এর মতো product-এ অনেকে ছবি দেখে কেনার সিদ্ধান্ত নেন এবং Google Images-এ খোঁজেন। তাই ছবির SEO এখানে বাড়তি সুযোগ।
ভালো ALT text লেখার নিয়ম
যা দেখা যাচ্ছে তা-ই সংক্ষেপে লিখুন
নিজেকে জিজ্ঞেস করুন: ছবিটি দেখতে না পেলে কাউকে এক বাক্যে কীভাবে বর্ণনা করতাম? Product type, রং, material, এবং ছবিটি কোন দিক বা কোন বিশেষ অংশ দেখাচ্ছে — এটুকুই যথেষ্ট।
"ছবি" বা "image of" লিখবেন না
Screen reader নিজেই জানিয়ে দেয় এটি একটি ছবি। "Image of red saree" না লিখে সরাসরি "লাল জামদানি শাড়ি, আঁচলের নকশা" লিখুন।
Keyword স্বাভাবিকভাবে, stuffing নয়
Product-এর মূল keyword স্বাভাবিকভাবে এলে ভালো, কিন্তু "saree শাড়ি jamdani saree bd best saree" ধরনের ALT text Google-এর spam নির্দেশনার বিরুদ্ধে যায় এবং screen reader ব্যবহারকারীর জন্য বিরক্তিকর।
প্রতিটি ছবির জন্য আলাদা ALT
একটি product-এর ৫টি ছবি থাকলে সবগুলোতে হুবহু একই ALT না দিয়ে প্রতিটি কী দেখাচ্ছে তা যোগ করুন: সামনের দিক, পেছনের দিক, কাপড়ের কাছ থেকে ছবি, মডেল পরে আছেন, box-এর ভেতরে কী আছে।
সাজসজ্জার ছবিতে খালি ALT
Divider, background pattern বা শুধু সাজানোর icon-এর মতো ছবির কোনো তথ্যমূল্য নেই। এগুলোতে alt="" (খালি) দিন, যাতে screen reader এড়িয়ে যায়। ALT attribute একেবারে বাদ দেবেন না।
ALT text-এর বাইরে ছবির SEO
| উপাদান | কী করবেন |
|---|---|
| File name | ছোট, অর্থবহ, English/Banglish, hyphen দিয়ে: navy-cotton-panjabi-front.webp |
| আশেপাশের লেখা | ছবির কাছেই product-এর নাম ও বিবরণ রাখুন; Google প্রসঙ্গ বুঝতে এটি ব্যবহার করে |
| Format ও size | WebP/AVIF, প্রয়োজনমতো resize — ধীর ছবি page-এর মান কমায় |
| Width/height | img tag-এ width ও height দিন, যাতে load-এর সময় layout না লাফায় |
| HTML <img> | গুরুত্বপূর্ণ product ছবি CSS background হিসেবে না দিয়ে <img> tag-এ দিন; Google CSS background ছবি index করে না |
| Image sitemap/schema | Product schema-র image field-এ মূল ছবির URL দিন |
ছবি হালকা করার পদ্ধতি নিয়ে বিস্তারিত আছে WebP image optimization গাইডে, আর কোন ছবি lazy load করবেন তা lazy loading গাইডে।
ALT text বাংলায় না English-এ?
Page-এর মূল ভাষার সাথে মিল রাখুন। বাংলা page-এ বাংলা ALT স্বাভাবিক, তবে product type বা brand-এর English নাম (leather, handbag, cotton) রাখা যায় — যেভাবে মানুষ সার্চ করে। File name-এ বাংলা অক্ষর না দিয়ে English/Banglish ব্যবহার করুন, কারণ বাংলা file name URL-এ encode হয়ে লম্বা ও অপাঠ্য হয়ে যায়।
ধাপে ধাপে ALT text ঠিক করুন
- 1বর্তমান অবস্থা দেখুন: কয়েকটি product page-এ right-click → Inspect করে img tag-এর alt দেখুন, অথবা কোনো SEO crawler দিয়ে "missing alt" তালিকা বের করুন।
- 2অগ্রাধিকার ঠিক করুন: প্রথমে সেরা product-এর মূল ছবি, তারপর category banner ও বাকি ছবি।
- 3Template বানান: [রং] + [material] + [product type] + [কোন দিক/অংশ]।
- 4প্রতিটি ছবিতে ALT লিখুন: product admin panel-এ ছবি upload-এর সময়ই ALT field পূরণ করুন।
- 5File name ঠিক করুন: নতুন upload-এর আগে ছবির নাম বদলান।
- 6সাজসজ্জার ছবিতে alt="" দিন: theme-এর icon ও divider সহ।
- 7নিয়ম চালু রাখুন: নতুন product upload-এর checklist-এ ALT ও file name যোগ করুন।
কোথায় ALT text দেবেন ও কীভাবে যাচাই করবেন
বেশিরভাগ e-commerce platform-এ ছবি upload-এর সময়ই ALT দেওয়ার জায়গা থাকে। WooCommerce/WordPress-এ Media Library-তে ছবি খুললে "Alternative Text" field পাবেন। Shopify-তে product-এর ছবিতে click করে "Add alt text" অপশন আছে। নিজস্বভাবে বানানো (যেমন Laravel বা custom) website-এ admin panel-এ ALT field না থাকলে developer-কে বলুন product image-এর সাথে একটি ALT field যোগ করতে এবং theme-এ তা img tag-এ বসাতে।
যাচাই করার সহজ উপায়:
- Desktop browser-এ: ছবির উপর right-click → Inspect করলে img tag-এ alt="..." দেখা যাবে।
- পুরো page একসাথে: Chrome-এর Lighthouse (DevTools → Lighthouse → Accessibility) ALT ছাড়া ছবির তালিকা দেখায়।
- পুরো website: কোনো SEO crawler দিয়ে "missing alt" report বের করুন।
Theme-এর ভেতরের ছবি (banner, slider) অনেক সময় admin থেকে ALT নেয় না, সরাসরি code-এ থাকে। Home page-এর বড় banner-এ যদি অফারের লেখা থাকে, তাহলে সেই লেখা ALT-এ সংক্ষেপে দিন, কারণ এটিই অনেক সময় page-এর সবচেয়ে বড় ছবি।
সাধারণ ভুল
এরপর কী করবেন
আজ আপনার ৫টি সবচেয়ে বেশি বিক্রি হওয়া product-এর সব ছবির ALT ও file name ঠিক করুন — ৩০ মিনিটের কাজ। তারপর নতুন product upload-এর নিয়মে এটি যোগ করুন। ALT text-এ ব্যবহৃত শব্দ description-এর সাথে মিল রাখতে product description SEO গাইড দেখুন।
ছবির মান নিজেই দুর্বল হলে ALT text একা সাহায্য করবে না। Mobile দিয়ে পরিষ্কার product ছবি তোলার পদ্ধতি পাবেন দুর্বল product ছবি ঠিক করার গাইডে।
Checklist: Image ALT Text SEO: Product ছবির ALT Text কীভাবে লিখবেন