HTML এর <head> এলিমেন্টসের একটি সাধারন গাইড

সুচিপত্র

🤯 HEAD

যা লাগবেই

নিচের ট্যাগগুলো একটি HTML পেজের জন্য অনেক গুরুত্বপুর্ণ, যা লাগবেই।:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  উপরের দুইটি মেটা ট্যাগ <head> এর সবার  উপরে থাকা উচিৎ 
  যেন প্রতিটি HTML ফাইল ঠিমভাবে রেন্ডার হয়। বাকি যেকোন হেড 
  এলিমেন্ট এই দুইটি ট্যাগের পরে আসবে।
 -->
<title>পাতার টাইটেল</title>

meta charset - ওয়েবসাইটের এনকোডিং কি সেটা বলে দেয়, সাধারনত utf-8 ব্যবহার করা হয়।

meta name="viewport" - মোবাইল ট্যাব ইত্যাদি ভিন্ন ভিন্ন ডিসপ্লে সাইজের জন্য সেটিংস যেন সকল সাইজের স্ক্রিনে ঠিকভাবে দেখা যায়।

width=device-width - ডিসপ্লের ফিজিক্যাল প্রশস্তা অনুসারে কনেন্ট ডিজাইনের জন্য ( মোবাইল ডিভাইসগুলোর জন্য ভাল) ।

initial-scale=1 - সাইটলোড হবার পর প্রথম কেমন জুম থামবে সেটা। ১ থাকা মানে কোন জুম হবেনা।

⬆ সুচিপত্রে যান

এলিমেন্টস

<head> এর এলিমেন্টসগুলো হল meta, link, title, style, script, noscript, ও base ।

এই এলিমেন্টস গুলো একটি HTML পেজকে কিভাবে রিসিভ করে কিভাবে দেখানো উচিৎ সেই সম্পর্কে ব্রাউজার, সার্র্চ ইঞ্জিণ, বটস ইত্যাদিকে তথ্য প্রদান করে।

<!--
  নিচের ট্যাগটি ব্রাাউজারকে HTML ডকুমেন্টটির ক্যারেকটার সেট কে UTF-8 হিসাবে চিন্হিত করতে বলে 
  যেন ইমোজি সহ বাকি সব ক্যরেক্টার ঠিকভাবে দেখা যায়।
  আরো জানতে এখানে দেখুন। https://en.wikipedia.org/wiki/Character_encodings_in_HTML
-->
<meta charset="utf-8">
<!-- পেজের টাইটেল সেট করতে -->
<title>Page Title</title>
<!-- এই ডকুমেন্টের যত লিংক আছে তার একটি বেজ লিংক -->
<base href="https://example.com/page.html">
<!-- পেজের সাথে এক্সটার্নাল CSS এর সম্পর্ক স্থাপন করে -->
<link rel="stylesheet" href="styles.css">
<!-- পেজের মধ্যে CSS ডিজাইন এড করার জন্য -->
<style>
  /* ... */
</style>
<!-- পেজে এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইল করতে -->
<script src="script.js"></script>
<!-- পেজে জাভাস্ক্রিপ্ট করতে -->
<script>
  // function(s) go here
</script>
<!-- ব্রাউজার জাভাস্ক্রিপ্ট সাপোর্ট না করলে কি দেখাবে সেটা লেখার জন্য -->
<noscript>
  <!-- No JS alternative -->
</noscript>

⬆ সুচিপত্র

মেটা

>  <meta name="rating" content="General">  <meta name="referrer" content="no-referrer">  <meta name="format-detection" content="telephone=no">  <meta http-equiv="x-dns-prefetch-control" content="off">  <meta http-equiv="Window-Target" content="_value">  <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <meta name="geo.region" content="country[-state]"> <meta name="geo.placename" content="city/town">  <meta name="monetization" content="$paymentpointer.example">

⬆ back to top

লিংক

<!-- এক্সটার্নাল CSS স্টাইলশিট লিংক করার জন্য -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- ডুপ্লিকেট কনটেন্ট রোধ করার জন্য -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- বর্তমান ভার্শনের AMP ভার্শনের লিংক বুঝানোর জন্য -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- যদি ওয়েব এপ্লিকেশন হিসাবে ইউঝ করা হয় তবে তার জন্য  ইন্সটালেশন ফাইল -->
<link rel="manifest" href="manifest.json">
<!-- ডকুমেন্টের লেখক সম্পর্কে তথ্য -->
<link rel="author" href="humans.txt">
<!-- ডকুমেন্টের কপিরাইট সম্পর্কিত তথ্যের জন্য -->
<link rel="license" href="copyright.html">
<!-- ডকুমেন্টের অন্য ভাষার একটি ডকুমেন্টের সাথে লিংক দেখানোর জন্য -->
<link rel="alternate" href="https://bn.example.com/" hreflang="bn">
<!-- লেখক সম্পর্কে আরো তথ্য দেয়ার জন্য -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- আর্কাইভ সম্পর্কে তথ্য দিতে -->
<link rel="archives" href="https://example.com/archives/">
<!-- এই ডকুমেন্টের উচ্চতর লেভেলের কোন লিংক দেয়ার জন্য -->
<link rel="index" href="https://example.com/article/">
<!-- সেল্ফ রেফারেন্সের জন্য -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">
<!-- ঐকই কমেন্টের প্রথম শেষ আগের ও পরের আর্টিকেলের লিংক দেয়ার জন্য -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">
<!-- Used when a 3rd party service is utilized to maintain a blog -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!--যখন আপনার ওয়ার্ডপ্রেস পোস্ট লিংক অন্য কোন ওয়ার্ডপ্রেসে ইউজ করা হয় তখন তার লিংক পিং করার জন্য -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- আপনি যখন আপনার ডকুমেন্টে এটি যুক্ত করেন তখন যেখানে পিং করবে  -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Enables posting to your own domain using a Micropub client -->
<link rel="micropub" href="https://example.com/micropub">
<!-- ওপেন সার্চ -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- ফিড -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- প্রিফেচিং, প্রিলোডিং, প্রিব্রাউজিং -->
<!-- আরো জানতে: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">

📖 লিংক রিলেশন

⬆ সুচিপত্র

আইকন

<!-- Internet Explorer ১০ বা  এর নিচের জন্য -->
<!-- আপনার সাইটের মুল ফোল্ডারে favicon.ico রাখলেই হবে -->
<!-- আইকনের সর্বোচ্চ রেজুলেশন -->
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
<!-- এপল টাচ আইকন (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- সাফারি পিন ট্যাব আইকন -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

⬆ উপরে যান

সোশ্যাল

ফেসবুক ওপেন গ্রাথ

বেশিরভাগ আর্টিকেলই ফেসবুকে শেয়ার হয়, তাই ফেসবুক অপেন গ্রাফকে এমনভাবে আপনার পেজের হেডে ভালভাবে প্রতিস্থাপন করা উচিৎ More about Facebook Open Graph Markup

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

📖 [ওপেন গ্রাফ প্রটোকল(http://ogp.me/)
🛠 আপনার ডকুমেন্টকে টেস্ট করুনFacebook Sharing Debugger

টুইটার কার্ড

টুইটার কার্ড দিয়ে আপনার লিংকের টুইটার শেয়ারের মান উন্নত করতে পারেন। More about Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">

📖 Getting started with cards — Twitter Developers
🛠 আপনার পেজকে টেস্ট করুন Twitter Card Validator

টুইটার প্রাইভেসি

আপনি যদি আপনার সাইটে টুইট ইউজ করেন তাহলে সেখানে টুইটার তার প্রাইভেসি পলিসি এপ্লাই করতে পারে More about Twitter privacy options.

<!-- আপনার সাইটের তথ্য টুইটারকে ব্যবহার করতে মানা করুন -->
<meta name="twitter:dnt" content="on">