🔖 এসইও এবং অ্যাক্সেসিবিলিটি (SEO & Accessibility)
একটি ভালো ওয়েবসাইট শুধু সুন্দর দেখতে হলেই হয় না, এটিকে গুগলে খুঁজে পাওয়া যেতে হবে (SEO) এবং সব ধরনের মানুষের জন্য ব্যবহারযোগ্য হতে হবে (Accessibility)।
📌 SEO-র জন্য গুরুত্বপূর্ণ Meta Tags
<head> সেকশনে মেটা ট্যাগগুলো পেজের বিভিন্ন তথ্য সার্চ ইঞ্জিনকে জানায়।
<head>
<meta charset="UTF-8">
<!-- মোবাইলে রেসপন্সিভ ডিজাইনের জন্য অবশ্যই দরকার -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- পেজের শিরোনাম — সার্চ রেজাল্টে দেখায় (৫০-৬০ ক্যারেক্টার) -->
<title>HTML সম্পূর্ণ গাইড | MEST</title>
<!-- পেজের বিবরণ — সার্চ রেজাল্টে শিরোনামের নিচে দেখায় (১৫০-১৬০ ক্যারেক্টার) -->
<meta name="description" content="বাংলায় সম্পূর্ণ HTML শেখার গাইড, শুরু থেকে অ্যাডভান্সড লেভেল পর্যন্ত।">
<!-- সোশ্যাল মিডিয়ায় শেয়ার করলে কেমন দেখাবে (Open Graph) -->
<meta property="og:title" content="HTML সম্পূর্ণ গাইড | MEST">
<meta property="og:description" content="বাংলায় HTML শেখার সেরা রিসোর্স।">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:type" content="website">
</head>📌 সঠিক হেডিং হায়ারার্কি
সার্চ ইঞ্জিন হেডিং ট্যাগগুলো দেখে পেজের মূল বিষয় বোঝে।
প্রতিটি পেজে শুধুমাত্র একটি <h1> থাকা উচিত, যা পেজের মূল বিষয়কে নির্দেশ করে। এরপর <h2>, <h3> ইত্যাদি ব্যবহার করুন।
<h1>বাংলায় HTML শেখার গাইড</h1> <!-- শুধু ১টি -->
<h2>বেসিক HTML</h2>
<h3>ট্যাগ কী?</h3>
<h3>অ্যাট্রিবিউট কী?</h3>
<h2>অ্যাডভান্সড HTML</h2>
<h3>Canvas API</h3>📌 Accessibility (ARIA)
সকলের জন্য ওয়েবসাইট ব্যবহারযোগ্য করতে ARIA (Accessible Rich Internet Applications) ব্যবহার করা হয়।
alt টেক্সট দিন
সব ছবিতে বর্ণনামূলক alt টেক্সট দিন। দৃষ্টি প্রতিবন্ধীরা স্ক্রিন রিডারের মাধ্যমে এটি শুনতে পায়।
<!-- ❌ খারাপ উদাহরণ -->
<img src="logo.png" alt="image">
<!-- ✅ ভালো উদাহরণ -->
<img src="logo.png" alt="MEST ওয়েবসাইটের লোগো">label ব্যবহার করুন
প্রতিটি ফর্ম ইনপুটের জন্য লেবেল দিন।
<label for="email">ইমেইল ঠিকানা:</label>
<input type="email" id="email" name="email">ARIA Roles যুক্ত করুন
যেখানে Semantic ট্যাগ ব্যবহার করা সম্ভব না, সেখানে role অ্যাট্রিবিউট ব্যবহার করুন।
<div role="navigation" aria-label="প্রধান মেনু">
...
</div>
<button aria-label="সার্চ বাটন">🔍</button>Keyboard Navigation নিশ্চিত করুন
tabindex ব্যবহার করে নিশ্চিত করুন যে কীবোর্ড দিয়ে সব কন্ট্রোলে পৌঁছানো যায়।
<div tabindex="0" role="button" onclick="handleClick()">
আমাকে ক্লিক করুন
</div>