কম্পিউটার টিউটোরিয়াল

HTML <title> এলিমেন্টের ব্যবহার পদ্ধতি

HTML <title> এলিমেন্ট কীভাবে ব্যবহার করবেন তা শিখুন।

HTML <title> এলিমেন্টটি আপনার ওয়েবসাইটের পেজ টাইটেল প্রতিনিধিত্ব করে।

আপনি যে ওয়েবসাইটে আছেন তার পেজ টাইটেল দেখতে চাইলে ব্রাউজারের ট্যাবে মাউস নেয়ে কিছুক্ষণ ধরে রাখুন, তাহলে পুরো পেজ টাইটেল পপ-আপ হয়ে দেখাবে।

YouTube-এ এটি কীভাবে কাজ করে তার উদাহরণ:

HTML <title> এলিমেন্টের ব্যবহার পদ্ধতি

টাইটেল এলিমেন্ট তৈরি করতে ওপেনিং এবং ক্লোজিং <title> ট্যাগ ব্যবহার করে টেক্সট লিখতে হয়:

<title>ডকুমেন্ট পেজ টাইটেল</title>

<title> এলিমেন্টে শুধু টেক্সট থাকতে পারে!

<title> এলিমেন্টটি আপনার ডকুমেন্টের <head> এলিমেন্টের ভিতরে থাকে:

<!DOCTYPE html> <html> <head> <title>ডকুমেন্ট পেজ টাইটেল</title> </head> <body> ... </body> </html>

<title> আপনার SEO-কে কীভাবে প্রভাবিত করে

<title> SEO (সার্চ ইঞ্জিন অপ্টিমাইজেশন) এর জন্য সবচেয়ে গুরুত্বপূর্ণ এলিমেন্টের একটি, কারণ সার্চ ইঞ্জিনের অ্যালগরিদম আপনার পেজ টাইটেল ব্যবহার করে (অন্যান্য ফ্যাক্টরের পাশাপাশি) সার্চ রেজাল্টে আপনার র‍্যাঙ্কিং নির্ধারণ করে।

SEO এবং UX-এর জন্য, <title> এলিমেন্টের ভিতরে যা টেক্সট লিখবেন সেটি যতটা সম্ভব আপনার পেজের বর্ণনামূলক হওয়া উচিত। তবে মোট ৬০ ক্যারেক্টারের বেশি না হয় (স্পেস সহ), না হলে সার্চ ইঞ্জিন পুরো টাইটেল দেখাতে পারবে না।

এছাড়া শুধু কীওয়ার্ডের তালিকা ঠেলে দিয়ে SEO ভালো হবে বলে চিন্তা করবেন না। বরং একটি বর্ণনামূলক টাইটেল লিখুন যা সেই পেজের প্রাইমারি কীওয়ার্ড(গুল) অন্তর্ভুক্ত করে।

বর্ণনামূলক পেজ টাইটেলের একটি উদাহরণ:

<title>HTML, CSS এবং JavaScript দিয়ে সিম্পল ওয়েবসাইট তৈরির পদ্ধতি</title>

উপরের টাইটেলটি স্মूद, বর্ণনামূলক এবং TechStacker-এর মতো টিউটোরিয়াল ওয়েবসাইটের জন্য ৪টি প্রাইমারি কীওয়ার্ড অন্তর্ভুক্ত করেছে:

  • ওয়েবসাইট
  • HTML
  • CSS
  • JavaScript

ওয়েবে একটি সাধারণ প্যাটার্ন হচ্ছে পেজের মেইন হেডিং টেক্সট এলিমেন্ট <h1>মেইন হেডিং</h1>-কেও পেজ টাইটেল হিসেবে ব্যবহার করা। WordPress-এর মতো কিছু CMS এটি অটোমেটিক করে দেয়। এই পদ্ধতি সাধারণত ভালো কাজ করে, যদি না আপনাকে মেইন হেডিং এবং পেজ টাইটেলের বর্ণনাকে আলাদা করার প্রয়োজন পড়ে।

  1. HTML পেজে href অ্যাট্রিবিউট ব্যবহার করা

  2. HTML পেজে title ট্যাগ ব্যবহার করা

  3. HTML পেজে অ্যানিমেটেড ইমেজ (Animated Image) ব্যবহার করা

  4. HTML-এ required অ্যাট্রিবিউট কীভাবে ব্যবহার করবেন?