HTML এর <head> অংশে এমন বিভিন্ন উপাদান থাকে যা ওয়েব পেজের মেটাডেটা এবং ব্রাউজারের উপস্থাপনা নিয়ন্ত্রণ করে। এর মধ্যে গুরুত্বপূর্ণ উপাদানগুলো হলো:
১. ডকুমেন্টের শিরোনাম (<title>)
পেজের টাইটেল ব্রাউজারের ট্যাবে প্রদর্শিত হয়।
<title>My Awesome Web Page</title>
২. মেটা ট্যাগ (<meta>)
ওয়েব পেজ সম্পর্কিত অতিরিক্ত তথ্য প্রদান করে। যেমন:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a demo page">
<meta name="author" content="Your Name">
৩. স্টাইলশিট লিংক (<link>)
CSS ফাইল সংযুক্ত করতে ব্যবহৃত হয়।
<link rel="stylesheet" href="styles.css">
৪. স্ক্রিপ্ট ট্যাগ (<script>)
JavaScript কোড বা ফাইল লিঙ্ক করতে ব্যবহৃত হয়।
<script src="script.js" defer></script>
.png) |
৫. ফেভিকন (<link>)
ব্রাউজারের ট্যাবে পেজ আইকন সেট করতে ব্যবহৃত হয়।
<link rel="icon" href="favicon.ico" type="image/x-icon">
৬. SEO ও সোশ্যাল মিডিয়া ট্যাগ
ওপেন গ্রাফ এবং টুইটার কার্ডের জন্য ট্যাগ।
<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="This is an awesome page description.">
<meta property="og:image" content="thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">
৭. ফন্ট ইম্পোর্ট
গুগল ফন্ট বা কাস্টম ফন্ট ইম্পোর্ট।
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
৮. প্রগ্রেসিভ ওয়েব অ্যাপ (PWA)
ম্যানিফেস্ট এবং সার্ভিস ওয়ার্কার।
<link rel="manifest" href="/manifest.json">
৯. Canonical ট্যাগ
ডুপ্লিকেট URL সমস্যার সমাধান করতে।
<link rel="canonical" href="https://example.com/page">
সংক্ষেপে:
<title>,<meta>,<link>,<script>,<style>,<base>
আপনার প্রয়োজনে বিভিন্ন উপাদান যোগ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> My First Assignment </title>
<meta name="keywords" content=" Dev Joynal, Joynal Abdin, Joynal Abdin, Web Developer Joynal">
<meta name="description" content="Joynal Abdin is Wp Developer. He is Page Speed Expert.">
<meta name="author" content="Joynal Abdin">
<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="This is an awesome page description.">
<meta property="og:image" content="thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" href="img/devjoynal.jpeg" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="canonical" href="https://devjoynal.com/page">
</head>
<body>
</body>
</html>
