HTML meta ট্যাগ ও meta ট্যাগের ব্যবহার

সাধারণত meta ট্যাগ ব্যবহার করে ব্রাউজারকে অতিরিক্ত তথ্য প্রধান করা হয়ে থাকে।  meta ট্যাগের কোন ক্লোজিং ট্যাগ নেই।  আপনি একটি ওয়েব পেজ তৈরি করার সময় এক বা একাধিক meta tag ব্যবহার করতে পারেন। html এর head ট্যাগের ভিতরে বসানো হয় meta ট্যাগ । তবে meta ট্যাগের কোন তথ্য ওয়েব ব্রাউজারে প্রর্দশিত হয় না। নিচের অংশে meta ট্যাগের ব্যবহার দেখে নেয়া যাক।


একটি ওয়েবসাইটের ক্ষেত্রে meta ট্যাগ ব্যপক ভূমিকা পালন করে। কারণ meta ট্যাগ ব্যবহারে ওয়েবসাইটি SEO ফ্রেন্ডলি হয়ে থাকে। meta ট্যাগ HTML ট্যাগ

HTML meta ট্যাগ এর ব্যবহার এবং উদাহরণ

<head>
    <meta charset="UTF-8">
    <meta name="description" content="A tutorial about how to learn HTML meta tag">
    <meta name="keywords" content="HTML,CSS,JavaScript, kivabe">
    <meta name="author" content="Imran Hossain">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

নিজে চেষ্ঠা করুন

Meta Tag এর বেশ কিছু Attribute ও Attribute Value  আছে । এবং সেই Attribute Value  গুলোর উপর নির্ভর করে বিভিন্য তথ্য দেয়া হয়ে থাকে Search Engine গুলো কে । এই এট্ট্রিবিউট ভেলু গুলো name attributes এ বসে । নিচে সে সব  attribute value নিয়ে আলোচনা করা হল ।

meta charset:

Web page এর Character Set কি হবে সেটি ঠিক করে দেয়  meta charset. charset ব্যবহার করে HTML এ বাংলা লেখা ও হয়।

meta keywords:

meta কিওয়ার্ড ব্যবহারের ক্ষেত্রে ওয়েবপেজের পরিচিত কি এর মাধ্যেমে। কোন ওয়েব পেজে meta tag keywords ব্যবহার করলে সার্চ ইঞ্জিলে তা ভালো ভাবে পায়। যেমনঃ  আপনার ওয়েবপেজে meta keywords ব্যবহার করলেন, সেই কিওয়ার্ড দিয়ে যদি কোন ভিজিটর সার্চ করে তাহলে তার কাছে আপনি সাইট বা ব্লগ চলে যাবে।

meta keywords এর উদাহরণঃ

<head>
     <meta name="keywords" content="HTML,CSS,Bootstrap,JavaScript, php">
</head>

উপরের কোডটি head ট্যাগের ভিতরে দেয়া রয়েছে। তার মধ্যে meta ট্যাগ meta name, keywords দেয়া রয়েছে। এরপর content প্রারটির মধ্যে পরিচিত কিওয়ার্ডগুলো তুলে দিনে। ঠিক উপরের মতো ।

meta description :

meta description সার্চ ইঞ্জিনের জন্য বেশ গুরুত্বপূর্ণ ভূমিকা পালন করে থাকে। আপনি কি বিষয়ে ওয়েবপেজ তৈরি করেছেন তার মূল বিষয়গুলো description এর মধ্যে রাখতে হয়। এতে করে আপনার ওয়েবপেজ সার্চ ইঞ্জিনে ভালো ভাবে পায়। যেমনঃ আপনার ওয়েবপেজটি HTML5 সর্ম্পকে তা meta description তুলে ধরুন।

meta description এর উদাহরণঃ

<head>
     <meta name="description " content="A web page about HTML5 and we are here to share some awesome tutorial on this topic">
</head>

উপরের অংশে meta এর attribute name ভেলু দেয়া হয়েছে description আর  content attribute  এর মধ্যে দেয়া হয়েছে তার বিস্তারিত বর্ননা । এরপরের অংশে দেখুন।

meta author :

author মানে লেখক। meta author ব্যবহার করে আপনি ওয়েবপেজ নিজের সম্পর্ক লেখতে পারেন। এতে করে ভিজিটরা সহজেই আপনার সম্পর্কে জেনে নিতে পারবে।

meta author এর উদাহরণঃ

<head>
     <meta name="author" content="Imran Hossain">
</head>

meta viewport:

HTML ওয়েবপেজে viewport একটি ওয়েব পেজের ব্যবহারকারীর জন্য দৃশ্যমান করে থাকে।  viewport এর উপর নির্ভর করে একটি ওয়েব পেজ রিসপন্সিভ হবে কিনা । আগের দিনে ওয়েব পেজ গুলো শুধু Computer Screen এর জন্য তৈরি করা হত । কিন্তু দিনে দিনে মোবাইল ডিভাইস যেমন ফোন ও ট্যাব এর ব্যবহার কারি বেড়ে যাওয়ায় এখন ওয়েব পেজ গুলোকে এমন ভাবে করা হয় যেন যেকোন ডিভাইসেই ফিট হয় । আর সেই সাপোর্ট টি দেয়া হয় meta name=”viewport” এর মাধ্যমে এবং পরবর্তিতে তাতে CSS ও যোগ করা হয় ।

meta viewport এর উদাহরনঃ

<head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

width=device-width এটি ঠিক করে দেয় ওয়েব পেজটির ওয়াইড কতো হবে । এটি ডিভাইস ভেদে আলাদা আলাদা হয় । আর

initial-scale=1.0 এটি ঠিক করে দেয় শুরুতে ওয়েব পেজটির zoom কত হবে । 1.0 মানে 100%, কেউ যদি মনে করেন যে আপনার ওয়েব পেজ কে 200% zoom করে দেখাবেন তো initial-scale=2.0  দিতে পারেন কিন্তু সেটা না করাই ভালো ।

You may also like...

3 Responses

  1. sajedul islam says:

    wonderful

  2. Md Anowar Hossin says:

    Khub vlo laglo

  3. Pinak says:

    আমি ব্লগার ওয়েবসাইটেক এক টি html বসিয়ে ছি

    কিন্তু অই খানে লিখা ৭১ কলাম ৩ সংখ্যা বসাতে বলতেছে কিন্তু ৭১ /৩ এই গুলি কি আমি বুঝতে পারছি না 🙁🙁🙁

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!