آشنایی با خواص متا تگ و کاربردهای آن در زبان HTML

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

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

متا تگ همیشه داخل تگ قرار می گیرد.

عنصر نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند.

داده های meta توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود. در ادامه این مطلب می خواهیم با انواع خواص متا تگ آشنا خواهیم شد.

خواص متا تگ ها و کاربرد آنها در HTML

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

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

نکته : 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 4.01: meta http–equiv=“content-type” content=“text/html; charset=UTF-8”>

HTML5: meta charset=“UTF-8”>

تفاوت بین HTML و XHTML

نکته : در HTML تگ تگ پایانی ندارد.

نکته : در XHTML تگ باید با یک تگ پایانی بسته شود.

ویژگی های عمومی تگ meta در HTML

تگ از ویژگی های عمومی در HTML پشتیبانی می کند.

مثال : در اینجا مثالی از کاربرد متا تگ را مشاهده می کنید :

charset=“UTF-8”>

name=“description” content=“Free Web tutorials”>

name=“keywords” content=“HTML,CSS,XML,JavaScript”>

name=“author” content=“Hege Refsnes”>

انواع تگ های Meta

در اینجا به سه نوع از تگ های Meta که بیشترین کاربرد رو دارند اشاره میکنیم :

تگ متای کلمات کلیدی (Keywords meta Tags) :

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

در این تگ باید از کلیدی ترین واژه های مرتبط با موضوع صفحه استفاده بشه . مثلا اگر وبلاگ یا سایت شما در مورد دانلود برنامه هست می تونید از واژه هایی مثل ” دانلود ، دانلود برنامه های روز ، دانلود برنامه به همراه کرک و …” استفاده کنید .

یا اگه در مورد موزیک مطلب می نویسید می تونید از کلمات ” دانلود موزیک ، آهنگ و موسیقی ، جدیدترین آلبوم ها و …” استفاده کنید .

مثال : این تگ هم به صورت زیره :

NAME=“Keywords” CONTENT=“واژه ها و کلمات کلیدی “>

تگ متای توصیفی (Description meta Tags) :

در این گونه تگ های Meta شما در مورد صفحه ی وب ، وبلاگ و یا سایتتون توصیفی رو قرار میدین . شاید بپرسید که این به چه دردی می خوره ؟ خوب باید بگم که موتور های جستجوگر نظیر Google و Yahoo به این تگ اهمیت میدن.

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

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

مثال : این تگ به شکل زیره :

NAME=“Description” CONTENT=“توصیفی در مورد صفحه “>

تگ های متای HTTP-EQUIV :

این تگ ها از پرکاربرد ترین تگ های Meta هستند. اهمیت این تگ ها برای سایت های فارسی و کلا جاهایی که متن فارسی درون صفحه وجود داره خیلی زیاده.

چون این تگ های متا به مرورگر می فهمونن که این یک صفحه به زبان فارسی هست و مرورگر اونو درست نمایش میده .

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

مثال : دو تا از این تگ های مهم به شکل زیرن :

http-equiv=“Content-Language” content=“fa”>

http-equiv=“Content-Type” content=“text/html; charset=utf-8”>

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

دومی هم نوع نمایش متون رو تعیین می کنه که اینجا به صورت UTF-8 هست که برای زبان فارسی مناسب ترینه.

انواع خواص تگ متا

در این بخش با خواص متا تگ و توضیح عناوینی که تگ متا به خود اختصاص می دهد آشنا می شوید :

خواص مهم
نام خاصیت	نوع خاصیت	شرح
content	متن Text	اطلاعات مربوط به خاصیت تعیین شده در قسمت name یا http-equiv را نگهداری می کند.
http – equiv	content-type	اطلاعات درون content خود را به سرور اتقال می دهد .
name	auther description keywords generator revised others	اطلاعات درون content خود را به نام تعیین شده ارتباط می دهد که می تواند یکی از حالت های زیر را داشته باشد : – auther : نام نویسنده یا گروه نویسندگان و طراحان صفحه وب را مشخص می کند. – description : توضیح مختصری راجع به محتویات درون صفحه ارائه می دهد. – keywords : کلیدواژه های مورد استفاده موتورهای جستجو را تعیین می کند. – generator : مشخصاتی راجع به نرم افزاری که صفحه با آن طراحی و تولید شده است را ارائه می دهد . – revised : برای اعمال آخرین تاریخ به روز رسانی سایت استفاده می شود. – others : برای ذرج سایر اطلاعات مورد نظر استفاده می شود.
scheme	متن Text	قالبی را برای تفسیر و اجرای اطلاعات درون خاصیت content مشخص میکند.

مثال هایی کاربردی از خواص متا تگ

در ادامه مثال هایی رو از استفاده متا تگ در تگ

را مشاهده خواهید کرد که می توانید از آنها هم استفاده کنید :

تعیین کلیدواژه ها برای موتورهای جستجو

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

meta name =“keywords” content=“Html,CSS,XML,Java Script,VB Script” />

تعیین یک توضیح درباره مطالب صفحه

meta name =“discription” content=“Free web teaching on Html,CSS,XML”/>

تعیین آخرین زمان بازبینی و به روز کردن صفحه

meta name =“rivised” content=“6/11/07” />

این متا تگ به مرورگر خواهد گفت که صفحه شما از چه ساختاری استفاده می کند و کاراکترهای آن از چه یونیکدی (یونیکد به زبان ساده یعنی روشی استاندارد که با آن کاراکترهای به فرض زبان فارسی، برای سیستم یا مرورگر تبدیل به کد و قابل فهم می شوند) پیروی می کنند.

meta http–equiv=“Content-Type” content=“text/html; charset=utf-8” />

متا تگ robots

این متاتگ برای اعمال دستوراتی روی ربات های جستجوگر است، البته همه ی ربات ها از این متاتگ پیروی نمی کنند، اما بد نیست که در صفحه اول سایت خود آن را به صورت زیر استفاده کنید:

meta name=“robots” content=“index, follow” />

با تکه کد بالا، به ربات ها خواهید گفت که صفحه شما را index (ذخیره شدن در لیست جستجو) کرده و از لینک های موجود در آن پیروی (follow) کنند؛ چند نمونه دیگر از این متاتگ که تنها در موارد خاصی مورد استفاده قرار می گیرد

meta name=“robots” content=“noindex, follow” />

meta name=“robots” content=“noindex, nofollow” />

meta name=“robots” content=“index, nofollow” />

متا تگ generator

از generator برای مشخص کردن اینکه صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند، استفاده می شود؛ به کار بردن این متاتگ اختیاری است و تاثیر زیادی در رتبه و عملکرد شما در موتورهای جستجو ندارد

meta name=“generator” content=“Dreamweaver CS” />

متا تگ author

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

meta name=“author” content=“name family” />

متا تگ expires

تاریخ انقضای یک صفحه را مشخص می کند، کاربرد آن اختیاری است و تاثیر زیادی بر روی عملکرد سایت یا وبلاگ شما در موتورهای جستجو ندارد

meta name=“expires” content=“tue, 21 Jun 1999” />

meta name=“expires” content=“never” />

متا تگ copyright

برای مشخص کردن اینکه محتوای صفحات شما دارای کپی رایت یا حقوق مولف است، از این متاتگ در کدهای خود استفاده کنید، البته استفاده از آن هیچ تضمینی برای سوء استفاده نکردن دیگران از محتوای شما ایجاد نمی کند و متاسفانه همواره هستند کسانی که می خواهند نابرده رنج گنج میسر کنند!

meta name=“copyright” content=“your copyright text here” />

متا تگ refresh

از refresh برای انتقال یک کاربر از صفحه ای به صفحه ای دیگر یا همان صفحه، به طور خودکار می توانید استفاده کنید، به این عمل در اصطلاح ریدایرکت (redirect) می گویند

meta http–equiv=“refresh” content=“10; URL=http://youcode.ir/>

عددی که در این متاتگ ملاحظه می کنید، مقدار زمان به ثانیه ای است که بعد از آن کاربر به آدرس جدید منتقل خواهد شد.

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

به این پست امتیاز دهید.

بازدید : 592 views بار دسته بندی : آموزش زبان HTML تاريخ : 23 آوریل 2021 به اشتراک بگذارید :