درس سیزدهم: افزودن متا تگ‌ها و تنظیمات در HTML
مقدمه
وقتی یک صفحه وب رو باز می‌کنی، ممکنه فکر کنی همه چیز فقط همونیه که توی <body> می‌بینی، ولی بخش خیلی مهمی از هر صفحه HTML توی قسمت <head> قرار می‌گیره.
تگ‌های داخل head رو کاربر توی صفحه نمی‌بینه، ولی برای موتور جست‌وجو (مثل گوگل)، مرورگرها و شبکه‌های اجتماعی خیلی مهم هستن!
تگ <head> چیه و چی توش می‌ذاریم؟
تگ <head> در واقع اتاق فرمان صفحه است؛ بخشی که اطلاعات و توضیحات درباره صفحه به مرورگر می‌گه. چندتا از مهم‌ترین چیزها توی head:
- عنوان صفحه (توی تب مرورگر دیده میشه)
- متاتگ‌ها (meta tags) برای توضیحات، کلیدواژه‌ها و سئو
- لینک استایل (CSS)
- آیکون سایت (Favicon)
- تنظیمات واکنش‌گرا (Responsive)
- لینک فونت‌ها
معرفی مهم‌ترین متا تگ‌ها
۱. تگ <title>
چه کار می‌کند؟
متنی که داخل این تگ می‌نویسی، عنوان صفحه‌ی سایت تو است. این عنوان در نوار بالای مرورگر یا در تب صفحه دیده میشه و وقتی کسی سایت تو را بوکمارک می‌کنه، همین نوشته ذخیره میشه.
مثال:
<title>آموزش HTML قدم به قدم</title>این نوشته بالا – آموزش HTML قدم به قدم – در بالای مرورگر (تب) نمایش داده می‌شود.
چرا مهم است؟
- عنوان صفحه اولین چیزی است که در نتایج گوگل نمایش داده می‌شود.
- باعث می‌شود کاربر بفهمد صفحه درباره چیست.
۲. متاتگ Charset
چه کار می‌کند؟
کدگذاری یا graphic character set صفحه را مشخص می‌کند. با charset=”UTF-8″ از نمایش صحیح حروف فارسی، انگلیسی، عدد، علامت و … مطمئن می‌شوی.
مثال:
<meta charset="UTF-8">توصیه:
همیشه این خط را اول head بنویس!
۳. متاتگ Description
چه کار می‌کند؟
یک توضیح کوتاه درباره محتوای صفحه به موتورهای جست‌وجو (مثل گوگل) می‌دهد. گوگل معمولاً همین متن را زیر عنوان سایت در نتایج سرچ نمایش می‌دهد.
مثال:
<meta name="description" content="آموزش کامل و رایگان HTML ایرانی مخصوص مبتدی‌ها با مثال و تمرین.">نکته:
- طول متن بهتر است کمتر از ۱۶۰ کاراکتر باشد تا کامل نمایش داده شود.
- سعی کن خلا‌قه و دقیق باشی تا کاربران بیشتری جذب شوند.
۴. متاتگ Keywords
چه کار می‌کند؟
کلماتی را که فکر می‌کنی جست‌وجوگران برای رسیدن به این صفحه استفاده می‌کنند، لیست می‌کنی. قدیم گوگل به این خیلی اهمیت می‌داد اما الان چندان مهم نیست، هرچند بد نیست قرار بدی.
مثال:
<meta name="keywords" content="HTML, آموزش, وب, طراحی سایت, ساده, ایرانی">۵. متاتگ viewport
چه کار می‌کند؟
این تگ خیلی برای موبایل و تبلت مهمه! به مرورگر می‌گه سایت رو چطور در صفحه دستگاه‌های مختلف نشون بده.
بدون این تگ، سایتت در موبایل جمع و جور نمی‌شه (یا اسکرول افقی می‌خواد).
مثال:
<meta name="viewport" content="width=device-width, initial-scale=1.0">- width=device-width: عرض صفحه هم اندازه صفحه گوشی باشه
- initial-scale=1.0: اولین بزرگنمایی ۱ باشه
۶. لینک استایل (CSS)
چه کار می‌کند؟
یک فایل CSS را به صفحه لینک می‌کند تا بتوانی تمام استایل‌ها و زیباسازی‌ها را از یک فایل جداگانه به همه صفحات اعمال کنی.
مثال:
<link rel="stylesheet" href="style.css">یعنی فایل style.css (که تو پوشه سایتت گذاشتی) را به این صفحه وصل می‌کنی.
۷. آیکون سایت (favicon)
چه کار می‌کند؟
یک تصویر کوچک (معمولاً ۱۶x۱۶ پیکسل) که در کنار عنوان تب مرورگر نمایش داده می‌شود. باعث حرفه‌ای‌تر شدن و قابل تشخیص شدن سایتت می‌شود.
مثال:
<link rel="icon" href="favicon.ico">(فایل favicon.ico باید در پوشه سایتت باشد)
نمونه کامل head
<head>
<meta charset="UTF-8">
<title>سایت تمرینی من</title>
<meta name="description" content="صفحه تمرینی برای یادگیری HTML و طراحی وب ایرانی">
<meta name="keywords" content="آموزش HTML, آموزش وب, طراحی سایت">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
</head>تمرین کوچک
یک فایل HTML نمونه بساز و فقط head رو مثل بالا پر کن. بدنه رو خالی بذار یا فقط یه جمله ساده بنویس!
