تگ متا در HTML

تگ متا در HTML

تگ متا در HTML 800 450 نویسنده

تگ متا در HTML چیست؟

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

 این تگ و یا همان متا دیتا باعث می شود که آن کلمه ی مورد علاقه ی ما در وب سایت مان به خوبی نمایش داده شود. البته در اچ تی ام ال 5 یک متا دیتا در مدل های دیگر اضافه شده است. نام این متا دیتا viewport است. که با آن می توان دقیقا تعیین نمود که متون در دیوایس های متفاوت چگونه نمایش داده شوند. چیزی مانند همان حالت ریسپانسیو بودن. منظور ما از این دستگاه ها شامل گوشی های موبایل و کامپیوتر و نظایر آن ها می باشد که در هر صورت مرورگر دارند و می توانند فضای وب را به نمایش بگذارند.

متا تگ

متا تگ

مثالی اضافه و واقعی در مورد تگ متا در HTML

حال با توجه به مطالبی که در پارامتر های قبلی خوانده اید، بیایید ببینیم که چطور می توان چنین دستوراتی را داد:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="description" content="آموزش رایگان طراحی وب">

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

  <meta name="author" content="Mahdi mr">

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

</head>

<body>




<p>Salam Chetori? Man ghassem Hastam.</p>




</body>

</html>

تازه این اول کار است. می توان از تگ های دیگری هم نام برد مانند تگ هازیر که می بینید:

  • Charset نوعی متا می باشد که سریعا جنس کاراکتر ها را شنا سایی و طبقه بندی می کند. تا بهتر بتوان آن ها را در یک صفحه وب نمایش داد.البته من و شما که محتوایی با زبان فارسی تولید می کنیم هم حتما باید از همین متا تگ استفاده کنیم.
  • متای بعدی را description می نامیم. که کارش این است تا کلیت مطلب ما را در یک کادر کوچک تر نمایش بدهد. مانند همان شرح مختصری که در بالای متون به صورت چکیده در برخی وب سایت ها ممکن است با آن مواجه باشیم.
  • نوع دیگری از متا وجود دارد که مانند مورد بالا به آن keywords می گوییم. و همان طور که گفتیم برای مشخص نمودن کلمه ای می باشد که برای ما واقعا مهم است.
  • تگ بعدی را author می نامند که در حقیقت به اسم نگارش کننده ی مطالب و محتوای درون صفحه اشاره می کند.
  • و آخرین تگی که می خواهیم در این قسمت به آن اشاره نماییم، viewport می گویند که همان عمل ریسپانسیو بودن متون در دستگاه های مختلف را به ما نشان می دهد.

حالا ببینیم کدام یک از مرورگر ها از تگ متا پشتیبانی می کنند؟

به صورت کلی مرورگر هایی مانند مرورگر Chrome  و Firefox و Opera و Safari و IE. حالا یک سوال دیگر. چه صفاتی را می توان در کنار مقدار مختلف در این تگ ها به کار برد؟ زمانی که در اچ تی ام ال 5 با علامت ضرب در مواجه شدید. به این معنا می باشد که این پارامتر در این ورژن از اچ تی ام ال پشتیبانی نمی گردد. و خود نماد اچ تی ام ال 5 را زمانی که در هر یک از این حالات مشاهده فرمودید به این معنا می باشد که پارامتر به خوبی کار می کند و اضافه شده است. در این حالت بیایید سری هم به صفت ها و مقادیر موجود بینداریم:

  • صفتی با نام charset که مقدار آن را با character_set می نمایانند. این نوع صفت برای مشخص کردن نوع کاراکتر موجود در وب کافی می باشد. مخصوصا این که محتوای شما در آن صفحه ی به خصوص به زبان فارسی هم باشد.
  • صفت بعدی را content می نماند. که با مقدار text مشخص می گردد. از این صفت هم برای توضیح صفت استفاده می کنند.
  • http-equiv صفت بعدی ای است که با مقدار content-type و default-style و refresh مشخص می گردد. می توان برای ساختن یک هدر در این صفخات از چنین صفت هایی و مقادیری استفاده نمود.
  • نام صفت چهارم name می باشد. که مقادیر بسیار متنوع تری مانند application-name و author و description و generator و  keywords و در آخر با viewport مشخص می گردد. کار آن هم این است که دقیقا مشخص کند نام متای مورد نظر ما چه است.
  • Schemeنیز به نوبه ی خود مقداری به نام format/URI دارد. که همان طور که مشخص می باشد فرمت و یو آر ال را بیان می کند.

بررسی نکات مهم

یکی از نکات مهم در استفاده از چنین تگی می تواند این باشد. که باید همیشه آن را در بین تگ هد قرارش بدهید. دومین نکته این است که تگ متا در HTML همیشه دارای دو قسمت می باشد. اول این که نام خود متا تگ چه باشد؟ و دوم این که مقدار آن چه قدر است؟ حال بیایید برای هر چه روشن تر شدن ماجرا مثال های بیشتر و بیشتری را بزنیم. حالا می خواهیم ببینیم که چه طور می توان کاری کرد که گوگل مطلبی را که ما نوشته ایم ایندکس نکند. اما خود خزنده های گوگل آن را بیابند؟ به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<head>

 <meta name="robots" content="noindex, follow">

</head>

<body style="text-align:center;">




<h4>این صفحه در نتایج گوگل نمایش داده نمی شود ولی توسط ربات یا خزنده های گوگل دنبال می شود</h2>




</body>

</html>

مثال دیگر درست بر عکس مثال قبلی خواهد بود. پس به آن توجه کنید:

<!DOCTYPE html>

<html>

<head>

 <meta name="robots" content="index, nofollow">

</head>

<body style="text-align:center;">




<h4>این صفحه در نتایج گوگل نمایش داده می شود ولی توسط ربات یا خزنده های گوگل دنبال نمی شود</h4>




</body>

</html>

 

خب از متا چنان که گفتیم تنها برای توصیف سند استفاده می کنیم. به مثال زیر که توصیفی از این دست است توجه کنید:

<!DOCTYPE html>

<html>

<head>

<meta name="author" content="Hege Refsnes" />

<meta name="revised" content="2010/06/20" />

</head>




<body>

<p>The meta elements on this page identifies the author and the revise date.</p>

</body>

</html>

یک نکته ی مهم دیگر که در این باره وجود دارد این است که اگر چنان چه  name یا  http-equiv در متن تعریف گردد. مجبوریم، شاخص content را نیز تعریف کنیم. و بر عکس. اگر دو بارزه ای که گفته شد را تعریف نکنیم. مجبور هم نمی شویم تا ویژگی content را دوباره تعریف کنیم.

کلیت تگ ها

کلیت تگ ها

چیز هایی که شاید نمی دانستید

یکی از چیز هایی که شاید نمی دانستید این است که ویژگی scheme به هیچ عنوان در اچ تی ام ال 5 قابلیت پشتیبانی را ندارد. ولی ویژگی دیگری تحت عنوان charset در اچ تی ام ال 5 تعریف شده است کارایی بیشتری را به آن بخشیده است. یک نکته ی جالب دیگر در این باره این می باشد که تگ متا در HTML محدودیت ندارد. در صورتی که در XHTML باید حتما بسته شده باشد. حال مجددا بیایید ببینیم که نمایش کلمات کلیدی را چگونه می توان انجام داد؟

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

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

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

 

این ها یک مرور مجدد می باشد. نام نویسنده ی صفحه را چگونه مشخص می کردیم؟

<meta name="author" content="Hege Refsnes">

 

به این یک مورد تا کنون اشاره ای ننموده بودیم. چگونه می شود که کاری کنیم تا کل صفحه ی وب ما مثلا هر نیم دقیقه یک مرتبه به روزرسانی گردد؟ به مثال زیر توجه کنید:

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

 

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

Accesskey , class , contenteditable , contextmenu , data-* , dir , draggable , dropzone , hidden , id , lang , spellcheck , style , tabindex , title , translate.