কম্পিউটার

কিভাবে HTML এলিমেন্ট ব্যবহার করবেন

কিভাবে HTML <meta> ব্যবহার করতে হয় তা জানুন উপাদান।

<meta> উপাদান HTML নথি সম্পর্কে বিভিন্ন ধরনের মেটাডেটা সংজ্ঞায়িত করতে ব্যবহৃত হয়। মেটাডেটা মানে শুধু তথ্য। অথবা আরও নির্দিষ্টভাবে মেটাডেটা হল এমন ডেটা যা বর্ণনা করে এবং অন্যান্য ডেটা সম্পর্কে তথ্য দেয়।

<meta> উপাদানটির বেশ কয়েকটি বৈশিষ্ট্য এবং মান রয়েছে৷

name বৈশিষ্ট্য হল সবচেয়ে গুরুত্বপূর্ণ এক।

name বেশ কিছু মান লাগে। যেমন description , যা content এর সাথে একত্রে ব্যবহৃত হয় একটি পৃষ্ঠা বর্ণনা করার জন্য বৈশিষ্ট্য:

<head>
  <meta name="description" content="Learn about the HTML meta element" />
</head>

<meta> উপাদানগুলি শুধুমাত্র <head> এর ভিতরে থাকে উপাদান।

আপনার ওয়েব পৃষ্ঠায় মেটাডেটা দৃশ্যমান নয় কিন্তু সার্ভার, ব্রাউজার এবং সার্চ ইঞ্জিনের মতো মেশিন দ্বারা পার্স করা (পড়া) এবং প্রক্রিয়া করা হয়৷

এটি <meta> তৈরি করে উপাদান হল এসইও-এর জন্য সবচেয়ে গুরুত্বপূর্ণ HTML উপাদানগুলির মধ্যে একটি কারণ এটি সার্চ ইঞ্জিন যেমন Google অতিরিক্ত ডেটা (আপনার ওয়েবসাইটের বিষয়বস্তু ছাড়াও) প্রদান করে যা তাদের বলে যে আপনার ওয়েবসাইটটি কী এবং লোকেরা কী অনুসন্ধান করে তার তুলনায় এটি কতটা প্রাসঙ্গিক৷

মেটা description কখনও কখনও হয় SERPs (সার্চ ইঞ্জিন ফলাফল পৃষ্ঠাগুলিতে) আপনার ওয়েবসাইটের জন্য একটি পৃষ্ঠার বিবরণ তৈরি করতে সার্চ ইঞ্জিনগুলি ব্যবহার করে যদি এটি আপনার অন-পেজ বিষয়বস্তুর চেয়ে ভাল মনে করে৷

ভিউপোর্ট ট্যাগ

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

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • width=device-width ব্রাউজারকে ব্যবহারকারীর ডিভাইসের প্রস্থের উপর ভিত্তি করে পৃষ্ঠার প্রস্থ সেট করতে বলে।
  • initial-scale প্রাথমিক পৃষ্ঠা লোডে জুম স্তর নিয়ন্ত্রণ করে। initial-scale-1 মানে এর জুম লেভেল 100%। আপনি যদি এটি initial-scale-2 এ সেট করেন , প্রথম পৃষ্ঠা লোড হলে পৃষ্ঠাটি 200% জুম হবে।

viewport আরও উন্নত <meta> এর মধ্যে একটি উপাদান ট্যাগ, যা আপনি ডিফল্ট কাস্টমাইজ করা শুরু করার আগে সাবধানে অধ্যয়ন করা উচিত।

মজিলার ভিউপোর্ট ট্যাগে শক্ত ডক্স রয়েছে।

রোবট মেটা ট্যাগ

robots মেটা ট্যাগ (যাকে "রোবট মেটা নির্দেশিকা"ও বলা হয়) অ্যাট্রিবিউট মান index ব্যবহার করে সার্চ ইঞ্জিনগুলিকে বলে যে তারা আপনার পৃষ্ঠাকে ইন্ডেক্স করবে কি না। অথবা noindex .

ডিফল্টরূপে, এটি index এ সেট করা আছে , তাই আপনি যদি আপনার ওয়েবসাইটকে ইন্ডেক্স করতে না চান, তাহলে আপনি এটিকে একটি content হিসেবে উল্লেখ করেন মান noindex

<meta name="robots" content="noindex" />

robots follow ব্যবহার করে সার্চ ইঞ্জিনগুলিকে আপনার ওয়েবসাইটের কোনও লিঙ্ক অনুসরণ করা উচিত নয় কিনা তা জানাতেও ব্যবহার করা যেতে পারে অথবা nofollow মান।

<meta name="robots" content="nofollow" />

এছাড়াও আপনি noindex একত্রিত করতে পারেন এবং nofollow একক উপাদানে:

<meta name="robots" content="noindex, nofollow" />

সাবধানে চলুন আপনার <meta> দিয়ে robots কনফিগারেশন।

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

noindex-এর জন্য একটি সাধারণ ব্যবহারের ক্ষেত্রে যদি আপনার ওয়েবসাইটটি এখনও বিকাশের অধীনে থাকে এবং জনসাধারণের জন্য প্রস্তুত না হয়। ওয়ার্ডপ্রেসের অস্থায়ীভাবে পৃষ্ঠা ইন্ডেক্সিং অক্ষম করার একটি বিকল্প রয়েছে (nofollow ) সেই উদ্দেশ্যে।

এবং লিঙ্কগুলির জন্য, nofollow প্রয়োগ করার পরিবর্তে বিশ্বব্যাপী (সমস্ত লিঙ্কের জন্য), একটি আরও ব্যবহারিক ব্যবহারের ক্ষেত্রে হল nofollow ব্যবহার করা নির্দিষ্ট আউটবাউন্ড (বাহ্যিক) লিঙ্কগুলিতে, যেমন অর্থপ্রদত্ত লিঙ্কগুলির জন্য, যেগুলি অনুসন্ধান ইঞ্জিন দ্বারা অনুসরণ করার কোন কারণ নেই। আপনি এটি সরাসরি অ্যাঙ্কর উপাদানে করবেন:

<a href="#" rel="nofollow">Click to see our sponsor</a>

ডিফল্টরূপে, হাইপারলিঙ্কগুলি follow এ সেট করা থাকে .


  1. এইচটিএমএল পেজে href এট্রিবিউট কিভাবে ব্যবহার করবেন?

  2. HTML পৃষ্ঠায় শিরোনাম ট্যাগ কিভাবে ব্যবহার করবেন?

  3. কিভাবে HTML পৃষ্ঠায় একটি অ্যানিমেটেড ছবি ব্যবহার করবেন?

  4. কিভাবে HTML এ প্রয়োজনীয় বৈশিষ্ট্য ব্যবহার করবেন?