تگ meta در html

تگ meta یکی از مهم‌ترین تگ‌های درون تگ <head> است که برای تعریف فراداده (metadata) درباره سند HTML استفاده می‌شود. این فراداده‌ها به مرورگرها، موتورهای جستجو، و شبکه‌های اجتماعی کمک می‌کنند تا اطلاعات دقیق‌تری درباره صفحه داشته باشند.

نحوه استفاده از تگ <meta>

↑

تگ <meta> بدون تگ پایانی نوشته می‌شود و در داخل تگ <head> قرار می‌گیرد. در ادامه یک نمونه ساده از استفاده این تگ آمده است:

<meta charset="UTF-8">
<meta name="description" content="آموزش HTML برای مبتدی‌ها">

attribute یا ویژگی‌های قابل استفاده در تگ meta

↑

تگ <meta> بسته به نوع استفاده می‌تواند دارای ویژگی‌های مختلفی باشد. در ادامه رایج‌ترین ویژگی‌ها همراه با مثال برای هرکدام آورده شده‌اند:

charset

↑

ویژگی charset مشخص می‌کند که صفحه با چه سیستم رمزگذاری کاراکتری (Character Encoding) تفسیر شود. در پروژه‌های مدرن تقریباً همیشه از UTF-8 استفاده می‌شود، اما مرورگرها هنوز از چندین رمزگذاری مختلف پشتیبانی می‌کنند. در ادامه رایج‌ترین گزینه‌ها و تفاوت‌های آن‌ها را می‌بینید:

  • UTF-8 – استاندارد جهانی و چندبایتی؛ همه نویسه‌های یونیکد (از فارسی و عربی تا ایموجی) را پشتیبانی می‌کند، با URL و فرم‌ها سازگاری کامل دارد و برای سئو توصیه می‌شود.
  • ISO-8859-1 (Latin-1) – رمزگذاری تک‌بایتی ویژه زبان‌های اروپای غربی؛ حروف فارسی و عربی را ندارد و برای وب امروزی منسوخ شده است.
  • Windows-1256 – رمزگذاری تک‌بایتی مایکروسافت برای فارسی و عربی؛ حجم کمتر از UTF-8 در متون کاملاً فارسی، اما ناسازگار با بسیاری از ابزارهای مدرن و مشکل‌زا در ترکیب با زبان‌های دیگر.
  • ISO-8859-5 – تک‌بایتی ویژه الفبای سیریلیک (روسی و …)؛ در پروژه‌های امروزی جای خود را به UTF-8 داده است.
  • KOI8-R – رمزگذاری روسی قدیمی؛ به UTF-8 مهاجرت شده و استفاده از آن توصیه نمی‌شود.
  • EUC-KR – چندبایتی مخصوص کره‌ای؛ به UTF-8 در وب مدرن تغییر یافته است.
  • Shift_JIS و EUC-JP – رمزگذاری‌های متداول ژاپنی؛ به UTF-8 مهاجرت کرده‌اند اما در صفحات قدیمی دیده می‌شوند.
  • GB2312 / GBK و Big5 – رمزگذاری‌های چینِ ساده و چینِ سنتی؛ همچنان در برخی وب‌سایت‌های قدیمی چینی یافت می‌شوند ولی UTF-8 کم‌کم جایگزین آن‌ها شده است.

تفاوت کلیدی: رمزگذاری‌های تک‌بایتی (مانند ISO-8859-1 یا Windows-1256) فقط ۲۵۶ نویسه دارند و برای هر زبان باید نسخه مخصوص خودشان را استفاده کنید؛ درحالی‌که UTF-8 چندبایتی است و بسته به نویسه، ۱ تا ۴ بایت مصرف می‌کند اما پوشش کامل همه زبان‌ها را می‌دهد. به همین دلیل UTF-8 از نظر سازگاری، امنیت، و نگه‌داری ترجیح داده می‌شود.

مثال‌های کاربردی برای تگ meta

↑
<!-- پیشنهاد‌شده در همه پروژه‌های جدید -->
<meta charset="UTF-8">

<!-- صفحه قدیمی فقط با متون اروپای غربی -->
<meta charset="ISO-8859-1">

<!-- پروژه قدیمی فارسی که هنوز UTF-8 نشده است -->
<meta charset="Windows-1256">

توصیه: همیشه از UTF-8 استفاده کنید و فقط در زمانی که باید صفحه‌ای قدیمی یا سیستمی ناسازگار را اجرا کنید سراغ رمزگذاری‌های دیگر بروید.

name / content

↑

زمانی که از ویژگی name در تگ <meta> استفاده می‌شود، در واقع در حال تعریف یک نوع خاص از داده‌های متا هستیم. مقدار content نیز محتوای مربوط به آن نوع داده را تعیین می‌کند. این ترکیب در بهینه‌سازی سئو، اشتراک‌گذاری شبکه‌های اجتماعی، و درک بهتر محتوا توسط مرورگرها و موتورهای جستجو کاربرد دارد.

  • author: نام نویسنده یا ناشر صفحه را مشخص می‌کند.
  • description: توضیحی خلاصه از محتوای صفحه، مهم برای نتایج جستجو و شبکه‌های اجتماعی.
  • keywords: لیستی از کلمات کلیدی مرتبط با محتوای صفحه که با ویرگول جدا می‌شوند (در سئو مدرن نقش کمتری دارند اما هنوز گاهی استفاده می‌شوند).
  • viewport: تنظیم مقیاس و واکنش‌گرایی صفحه در دستگاه‌های مختلف (مخصوص موبایل).
  • robots: به ربات‌های موتور جستجو اعلام می‌کند که چگونه با این صفحه رفتار کنند (نمایش، دنبال کردن لینک‌ها و …).
  • theme-color: رنگ نوار مرورگر را در برخی مرورگرهای موبایل (مثل کروم اندروید) مشخص می‌کند.
  • generator: ابزار یا CMS تولیدکننده صفحه را معرفی می‌کند (مانند WordPress).
  • copyright: اطلاعات مربوط به حقوق مالکیت محتوای صفحه.
  • application-name: نام برنامه یا وب‌اپلیکیشن در صفحه مشخص می‌شود.
  • rating: برای اعلام سطح محتوای صفحه استفاده می‌شود (مثلاً “General” یا “Adult”).
  • distribution: سطح توزیع محتوا (مثلاً global یا local).

در ادامه چند نمونه کاربردی از این ویژگی‌ها را مشاهده می‌کنید:

<meta name="author" content="HamgamWeb">
<meta name="description" content="خدمات طراحی سایت در کرج، سئو و پشتیبانی وردپرس">
<meta name="keywords" content="طراحی سایت, سئو, وردپرس, کرج">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0a74da">
<meta name="generator" content="WordPress 6.5">
<meta name="copyright" content="2025 HamgamWeb">
<meta name="application-name" content="Hamgam Tools">
<meta name="rating" content="General">
<meta name="distribution" content="Global">

http-equiv / content

↑

ویژگی http-equiv معادل هدر HTTP است و می‌تواند تنظیماتی مثل refresh یا Content-Type را مشخص کند. مقدار content وابسته به نوع http-equiv تغییر می‌کند.

  • refresh: بارگذاری مجدد یا هدایت صفحه به آدرس دیگر پس از چند ثانیه.
  • Content-Type: مشخص کردن نوع محتوا و رمزگذاری.
  • X-UA-Compatible: مشخص کردن نوع رندر در اینترنت اکسپلورر.
<meta http-equiv="refresh" content="5; url=https://hamgamweb.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

استفاده‌های مهم و کاربردی از <meta>

↑
  • SEO: توضیحات و کلیدواژه‌ها برای بهبود سئو.
  • Social Sharing: نمایش عنوان و تصویر هنگام اشتراک‌گذاری (با Open Graph).
  • Responsiveness: تنظیم مقیاس‌پذیری صفحه در موبایل با ویژگی viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="آموزش HTML">
<meta property="og:description" content="یادگیری سریع تگ‌های HTML">

ویژگی‌های ظاهری پیشفرض در تگ <meta>

↑

تگ <meta> هیچ نمایشی در مرورگر برای کاربر ندارد. نقش آن تنها انتقال اطلاعات به مرورگر، موتور جستجو یا سرویس‌های خارجی است.

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس

ثبت نامتعرفه آموزش خصوصی