meta: تگ کوچیکی با کاربردهای بزرگ
تو درس قبل چندبار اسم تگ <meta> رو دیدیم، اما فقط سطحی بهش اشاره کردیم. حالا وقتشه کامل بریم سراغش، چون این تگ یکی از پرکاربردترین و در عین حال کم‌دیده‌شده‌ترین بخش‌های هر صفحه‌ی HTML5 هست.
meta چیه و چرا این‌قدر متفاوت با بقیه‌ی تگ‌هاست؟
تگ meta یه تگ خالی (Empty Element) هست؛ یعنی نه محتوایی داره و نه تگ بسته‌شونده‌ای مثل </meta> نیاز داره. کل کارش از طریق ویژگی‌هاش انجام می‌شه. این تگ همیشه داخل head قرار می‌گیره و کارش دادن اطلاعات فراداده (Metadata) درباره‌ی خود سنده؛ یعنی اطلاعاتی درباره‌ی صفحه، نه خودِ محتوای اصلی صفحه.
نوع اول: مشخص‌کردن کدگذاری کاراکترها
<meta charset="UTF-8">این مهم‌ترین و اولین متایی هست که تو هر صفحه باید بذاری. همون‌طور که تو درس‌های قبل گفتیم، این خط تضمین می‌کنه حروف فارسی و هر کاراکتر خاص دیگه‌ای درست نمایش داده بشه.
نوع دوم: تنظیم نمایش در موبایل (Viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">این تگ به مرورگر موبایل می‌گه عرض صفحه رو برابر عرض واقعی صفحه‌نمایش دستگاه در نظر بگیره (width=device-width) و بزرگ‌نمایی اولیه هم برابر با ۱۰۰ درصد باشه (initial-scale=1.0). بدون این خط، خیلی از سایت‌ها تو موبایل مثل یه نسخه‌ی کوچک‌شده از حالت دسکتاپ دیده می‌شن که خوندنش سخته.
نوع سوم: توضیحات صفحه برای موتورهای جستجو
<meta name="description" content="آموزش کامل HTML5 از صفر تا حرفه‌ای با مثال‌های عملی">این متن معمولاً همون چیزیه که زیر عنوان آبی‌رنگ صفحه تو نتایج گوگل نمایش داده می‌شه. بهتره بین ۱۵۰ تا ۱۶۰ کاراکتر باشه؛ نه خیلی کوتاه که چیزی رو توضیح نده، نه خیلی بلند که گوگل قطعش کنه.
نوع چهارم: کلمات کلیدی (Keywords)
<meta name="keywords" content="HTML5, آموزش HTML, وب‌سایت">این تگ زمانی خیلی مهم بود، اما موتورهای جستجوی امروزی مثل گوگل عملاً دیگه بهش توجهی نمی‌کنن، چون خیلی از سایت‌ها ازش سوءاستفاده می‌کردن. با این حال ممکنه هنوز تو بعضی پروژه‌ها بهش برخورد کنی؛ نوشتنش ضرری نداره، اما نباید روش برای رتبه‌گرفتن حساب کرد.
نوع پنجم: نویسنده‌ی سند
<meta name="author" content="نام نویسنده">مشخص می‌کنه سند رو چه کسی نوشته؛ بیشتر جنبه‌ی اطلاعاتی داره و تأثیر مستقیمی روی سئو یا نمایش صفحه نداره.
نوع ششم: کنترل رفتار موتورهای جستجو (Robots)
<meta name="robots" content="noindex, nofollow">این تگ به ربات‌های موتور جستجو دستور می‌ده که آیا این صفحه رو ایندکس کنن یا نه، و آیا لینک‌های داخلش رو دنبال کنن یا نه. مثلاً برای صفحاتی مثل «پنل مدیریت» که نباید تو نتایج گوگل ظاهر بشن، از noindex استفاده می‌شه.
نوع هفتم: رفرش یا ریدایرکت خودکار صفحه
<meta http-equiv="refresh" content="5; url=https://example.com">این خط باعث می‌شه بعد از ۵ ثانیه، کاربر به‌طور خودکار به آدرس مشخص‌شده منتقل بشه. این روش امروزه چندان توصیه نمی‌شه، چون هم تجربه‌ی کاربری بدی ایجاد می‌کنه، هم روش‌های بهتری مثل ریدایرکت از سمت سرور یا جاوااسکریپت وجود داره.
یه نمونه‌ی جمع‌بندی‌شده
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="آموزش گام‌به‌گام طراحی وب با HTML5">
<meta name="author" content="تیم آموزشی">
<title>آموزش HTML5</title>
</head>تفاوت name و http-equiv
شاید متوجه شده باشی که بعضی تگ‌های meta از ویژگی name استفاده می‌کنن (مثل description و viewport) و بعضی از http-equiv (مثل refresh). تفاوتشون اینه:
name: برای اطلاعات فراداده‌ی عمومی که بیشتر جنبه‌ی توصیفی دارن (مثل توضیحات، نویسنده، کلمات کلیدی).http-equiv: شبیه‌سازی رفتار هدرهای HTTP هست؛ یعنی انگار داری یه دستور سطح پروتکل به مرورگر می‌دی (مثل رفرش خودکار یا تنظیمات امنیتی خاص).
چند اشتباه رایج
- فراموش‌کردن meta viewport، که باعث می‌شه سایت تو موبایل به‌درستی نمایش داده نشه.
- نوشتن meta description یکسان برای تمام صفحات سایت، که فرصت سئوی هر صفحه رو از بین می‌بره.
- تکیه‌کردن روی meta keywords به‌عنوان یه روش مؤثر سئو، در حالی که امروز عملاً بی‌اثره.
- استفاده از meta refresh برای ریدایرکت، به‌جای روش‌های استانداردتر مثل ریدایرکت سمت سرور.
بهترین روش‌ها
- همیشه charset و viewport رو تو هر صفحه داشته باش؛ این دو تا عملاً اجباری حساب می‌شن.
- برای هر صفحه یه description منحصربه‌فرد و مرتبط با محتوای همون صفحه بنویس.
- از meta robots فقط وقتی استفاده کن که واقعاً می‌خوای یه صفحه از دید گوگل مخفی بمونه.
نکته‌ی سئو
meta description به‌تنهایی روی رتبه‌بندی مستقیم گوگل تأثیر نمی‌گذارد، اما روی نرخ کلیک (CTR) کاربران از صفحه‌ی نتایج جستجو تأثیر زیادی دارد؛ توضیحی جذاب و دقیق می‌تواند باعث ورودی بیشتر شود، حتی با رتبه‌ی ثابت.
نکته‌ی دسترسی‌پذیری
تگ‌های meta مستقیماً توسط صفحه‌خوان‌ها خوانده نمی‌شوند (به‌جز title)، اما تنظیم صحیح viewport به کاربرانی که از بزرگ‌نمایی صفحه استفاده می‌کنند نیز کمک می‌کند تا محتوا به‌درستی و بدون بریدگی نمایش داده شود.
جمع‌بندی
تگ meta ابزاری چندمنظوره برای دادن اطلاعات فراداده به مرورگر و موتورهای جستجوست. از کدگذاری کاراکترها و نمایش صحیح در موبایل گرفته تا توضیحات سئو و کنترل ایندکس‌شدن صفحه، همه از طریق همین یک تگ کوچک انجام می‌شن.