تگ meta در HTML

  /  فرانت اند   /  HTML   /  تگ meta در HTML

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

مثال

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Matin Boronsi">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


تعریف و کاربرد

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

تگ <meta> همیشه درون تگ <head> قرار میگیرد و معمولاً برای مشخص کردن کلمات کلیدی صفحه ، توضیحات در رابطه با سند ، نویسنده سند ، مشخص کردن کاراکتر ها ، تنظیمات viewport و… استفاده می کنیم.

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


پشتیبانی مرورگر ها

عنصر
<meta>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیحات
charsetcharacter_setبرای مشخص کردن نوع کاراکتر های مورد استفاده در سند استفاده می شود (برای نمایش محتوای فارسی حتما از این صفت استفاده نمایید)
contenttextبرای ایجاد محتوا یا توضیح برای صفت name استفاده می شود
http-equivcontent-security-policy
content-type
default-style
refresh
ویژگی HTTP در محتوا و اطلاعات درون content را مشخص می کند
nameapplication-name
author
description
generator
keywords
viewport
یک نام برای meta دیتا مشخص می کند

خواص عمومی

تگ meta از خواص عمومی در HTML پشتیبانی میکند.

مثال های بیشتر

در مثال زیر کلمات کلیدی سند را برای موتور های جستجو مشخص می کنیم:

<meta name="keywords" content="HTML, CSS, JavaScript">

در مثال زیر یکسری توضیحات در رابطه با سند برای موتور های جستجو می دهیم:

<meta name="description" content="Free Web tutorials for HTML and CSS">

مثال زیر نویسنده یک صفحه را تعریف می کند:

<meta name="author" content="Matin Boronsi">

در مثال زیر هر 30 ثانیه سند را تازه سازی ( Refresh ) می کنیم:

<meta http-equiv="refresh" content="30">

برای ریسپانسیو سازی یا همان واکنش گرا کردن سند که در تمامی دستگاه ها با سایز های مختلف ساختار خود را از دست ندهد از تنظیمات متای زیر استفاده می کنیم:

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

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر