تگ meta در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ meta در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

فهرست مطالب

تگ meta چیست؟
صفات تگ meta
مثال تگ meta
سازگاری با مرورگرها

همان طور که در مطلب آموزش تگ head خواندید این تگ در ظاهر برای کاربران قابل مشاهده نیست و در واقع اطلاعات و تنظیماتی را برای مرورگر و موتورهای جستجو ارائه می کند. در این مطلب با تگ کاربردی meta در HTML آشنا خواهید شد.

تگ meta چیست؟

تگ meta که درون تگ head قرار می گیرد تنظیمات و اطلاعاتی را به مرورگر و موتورهای جستجو می فرستد. این اطلاعات می تواند توضیحات در مورد صفحه، نام نویسنده یا تنظیم نمایش صفحه متناسب با نمایشگر باشد.

ساختار این تگ به شکل زیر است:

<meta name="description" content="کدیونی">

این تگ نیاز به بستن ندارد.

صفات تگ meta

در این بخش با صفات تگ meta آشنا خواهید شد.

صفت charset

این صفت برای انتخاب کاراکترهای مورد استفاده به کار می رود.

<meta charset="UTF-8">

صفت content

برای تعیین مقدار صفت به کار می رود.

<meta content="Text">

صفت http-equiv

برای ایجاد هدر HTTP به کار می رود.

<meta http-equiv="content-security-policy|content-type|default-style|refresh">

content-security-policy

برای تعیین خط مشی محتوا در سند به کار می رود.

content-type

Encoding کاراکتر سند را مشخص می کند.

default-style

استایل مورد استفاده را مشخص می کند.

refresh

بازه زمانی را برای Refresh صفحه مشخص می کند.

صفت name

نام متا را می توان با این صفت مشخص کرد.

<meta name="application-name|author|description|generator|keywords|viewport">

application-name

نام برنامه وب را مشخص می کند.

<meta name="application-name" content="App">

author

نام نویسنده را مشخص می کند.

<meta name="author" content="Mohammad">

description

توضیحاتی در مورد صفحه می دهد. پیشنهاد می شود از این مورد حتما استفاده کنید.

<meta name="description" content="توضیحات">

generator

نرم افزار مورد استفاده در تولید صفحه را مشخص می کند.

<meta name="generator" content="Software">

keywords

برای تعیین کلمه کلیدی استفاده می شود. برای جداسازی کلمات کلیدی از کاما استفاده کنید.

<meta name="keywords" content="HTML, meta, tag">

viewport

ناحیه قابل مشاهده در صفحه را مشخص می کند. این مورد در طراحی واکنشگرا کاربرد زیادی دارد.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

مثال تگ meta

کد:

<head>
  <meta charset="UTF-8">
  <title>عنوان</title>
  <meta name="application-name" content="App">
  <meta name="author" content="Mohammad">
  <meta name="description" content="توضیحات">
  <meta name="generator" content="Software">
  <meta name="keywords" content="HTML, meta, tag">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

سازگاری با مرورگرها

تگ meta با مرورگرهای زیر سازگار است:

گوگل کروم
فایرفاکس
اج
اپرا
سافاری
گوگل کروم اندروید
فایرفاکس اندروید
اپرا اندروید
سافاری iOS