آموزش HTML – تگ meta

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/13 | بخش : آموزش HTML

تعریف و کاربرد تگ meta در HTML

تگ <meta> یا تگ متاداده ها تگی است که با استفاده از آن می توان یکسری اطلاعات را برای داده های موجود در یک صفحه وب ایجاد کرد.

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

برای مثال ما با استفاده از متاداده ( keywords ) می تونیم کلمات کلیدی مربوط به صفحه وبمون رو به مرورگرها و موتورهای جستجوگر بشناسونیم.(برای نمایش بهتر اون صفحه در جستجوها)

HTML5 یک متای جدید به متاداده های HTML اضافه کرده بنام viewport که این متاداده وظیفش مشخص کردن نحوه نمایش یک صفحه وب در دستگاهای مختلف مثله (گوشی های موبایل و..) می باشد. (کمی پایین تر می تونید یک مثال از این متاداده مشاهده نمایید)

  • تگ <meta> اطلاعاتی در مورد سند HTML فراهم می کند. این داده ها در صفحه، نمایش داده نمی شوند اما توسط ماشین قابل خواندن هستند.
  • تگ <meta> نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند.
  • داده های meta توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود.

 

نکته ها و ترفندها

  • تگ <meta> همیشه داخل تگ <head> قرار می گیرد.
  • Metadata همیشه به صورت جفت name و value می آید.
  • اگر ویژگی name یا http-equiv تعریف شده باشد خصوصیت content نیز باید تعریف شود، اگر هیچ یک از این خصوصیت ها تعریف نشده باشند خصوصیت content هم نمی تواند تعریف شود.

 

تفاوت بین HTML 4.01 و HTML5

خصوصیت scheme در HTML5 پشتیبانی نمی شود.

در HTML5 خصوصیت جدید charset اضافه شده است، که تعریف charset را آسانتر می کند:

HTML 4.01: 

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5: 

<meta charset="UTF-8">

 

تفاوت بین HTML و XHTML

  • در HTML تگ <meta> تگ پایانی ندارد.
  • در XHTML تگ <meta> باید با یک تگ پایانی بسته شود.

 

مثال از تگ meta در HTML

<head>
  <meta charset="UTF-8">
  <meta name="description" content="آموزش رایگان برنامه نویسی">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="مرتضی گنج">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

 

  • متای charset برای مشخص کردن نوع کاراکترهای مورد استفاده در صفحه وب (برای نمایش محتوا با زبان فارسی حتما باید از این متا استفاده نمایید)
  • متای description برای ایجاد یک توضیح کوتاه یا شرحی در مورد صفحه وبمان
  • متای keywords برای مشخص کردن کلمات کلیدی صفحه وبمان
  • متای author برای مشخص کردن نام نویسنده محتوای موجود در صفحه وبمان
  • متای viewport برای مشخص کردن نحوه نمایش صفحه وب در دستگاهای مختلف (مثله گوشی های موبایل و..)

 

مثال ۱: مشخص کردن کلمات کلیدی برای موتورهای جستجو:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

 

مثال ۲: توضیحی از محتویات یک صفحه:
<meta name="description" content="سایتکده ، آموزش آنلاین برنامه نویسی">

 

مثال ۳: مشخص کردن نویسنده یک صفحه:
<meta name="author" content="مرتضی گنج">
مثال ۴: Refresh کردن صفحه هر ۳۰ ثانیه یکبار:
<meta http-equiv="refresh" content="30">

 

 

 

پشتیبانی مرورگرها از تگ meta در HTML

Element
<meta> بله بله بله بله بله

 

جدول صفات تگ meta در HTML

نام صفت  مقدار توضیح
charset character_set برای مشخص کردن نوع کاراکترهای مورد استفاده در صفحه وب.
(برای نمایش محتوای فارسی حتما از این صفت استفاده نمایید)
content text برای ایجاد توضیح یا محتوای صفت name
http-equiv content-type
default-style
refresh
برای ایجاد هدر HTTP برای مقدار موجود در صفت content
name application-name
author
description
generator
keywords
viewport
برای مشخص کردن نام متای مورد استفاده.
scheme format/URI تعریف یک فرمت یا URI از مقدار موجود در صفت content