اصطلاحهای متادیتا و ابَر اطلاعات در مقاله تگ head در html کامل توضیح داده شدن. meta tag یک تگ خالیست پس تگ پایانی نداره، اما اطلاعات اون از طریق ویژگیهاش منتقل میشه. میتوان از چندین متا برای منظورهای مختلف استفاده کرد. مثل تگ title نیست که شما فقط مجاز به استفاده از یک title باشین.
در مقاله head خدمتتون عرض کردم که متا دیتاها باید داخل تگ head نوشته بشن. درواقع تگ head مسئول حمل و نقل متادیتا هاست. پس همه تگهای meta باید داخل تگ head نوشته بشن. head عین یه کامیون میمونه و متادیتاها بار این کامیونن. metaها معمولا بعد از تگ title نوشته میشن.
این تگها چون تگهای خالی هستن و اطلاعاتشون داخل ویژگیهاشونه پس تگ پایانی یا بسته ندارن. اغلب متاها یک ویژگی به اسم name دارن و یک مقدار برای اون که به content مشهوره. در عکس زیر میتونین مکان متاها و طرز نوشتن اونا رو ببینین:
اگه خوب دقت کنین میبینین که هیچکدوم از تگهای meta رو با تگ پایانی یعنی <meta/> نبستیم. اما در بعضی از منابع و مراجع آموزشی نظیر .tutorialspoint متا رو در آخر با یک اسلش تموم کردن که کاملا هم صحیحه:
در بخشهای زیر میخوام درمورد تک تک تگهای بالا توضیح بدم:
تمامی متاتگها و متادیتاها برای کاربر قابل نمایش نیستن. این اطلاعات در مرورگر به کاربر نمایش داده نمیشه. بهتر بگم اینا مال کاربر نیستن و فقط و فقط اطلاعاتی هستن که به درد مرورگر و موتور جستجو میخورن.
تمامی مرورگرها و موتورهای جستجو، به صورت پیش فرض از انکودینگ (ISO-8859-1 (Latin1 برای نمایش کاراکترهای صفحات اچ تی ام ال استفاده میکنن. اما این نوع از encoding در صفحات html فارسی مشکل ساز میشن و باعث میشن کلمات، عبارات و کلا صفحه وب به خوبی نمایش داده نشه. بهترین encoding برای صفحات وب فارسی UTF-8 هستش. ما میتونیم با استفاده از متا تگ charset، به مرورگرها و جستجوگرها دستور بدیم که از utf-8 برای تجزیه تحلیل و نمایش صفحاتمون استفاده کنه.
هرچند در بعضی از سایتها، روشهای دیگهای از نحوه نوشتن این متا وجود داره اما، استانداردترین روش، روشیه که سایت w3schools در اختیارمون قرار میده :
البته در بعضی منابع هم، متا charset رو اینجوری هم نوشتن ولی بهتره از روش اول استفاده کنیم:
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" >
قبلاها که گوگل اینقدر زرنگ نبود، محتوا نویسها و صاحبان سایت برای جلب توجه گوگل و بالا بردن سئوی خودشون، این تگ واسشون خیلی مهم بود و از اون برای شناساندن کلمات کلیدی استفاده میکردن. اما خوب میدونین که کلمات کلیدی جزو اون دسته از اطلاعاتیه که واسه موتور جستجو میتونه مهم باشه نه کاربر. پس فکر کنم حدس بزنین که کلمات کلیدی هم نوع دیگهای از متادیتاها هستن. پس حتما که یه تگ متایی هم داره دیگه. نه؟
آره و دقیقا بهش میگن متای کلمات کلیدی. یادتونه گفتم اکثر متاها یه name دارن و یه content ؟ واسه نوشتن یه متای keywords کافیه یه تگ متا باز کنین، در ویژگی name بنویسین keywords و در قسمت content، به ترتیب کلمات کلیدی مهمتون را تایپ بفرمایین :
یکی از مهمترین متاهای اچ تی ام ال تگ description هستش. این تگ توضیحات مختصری از صفحه وب شما ارائه میده. اکثر موتورهای جستجو مثل گوگل، این توضیح رو در صفحه جستجو زیر عنوان مطلب نشون میده که میتونه در جذب کاربر و نرخ کلیک روی اون تاثیر مثبت یا منفی بزاره. کافیه در قسمت name عبارت description و در قسمت content توضیحات ارزنده خودتونو تایپ بفرمایین. در زیر یه نمونه از این متا رو مشاهده میفرمایین:
با این تگ نام نویسنده صفحه و سند رو ارائه میدن. نحوه نوشتن این متا اینجوریه که در قسمت name مینویسین author و در قسمت content نام نویسنده رو تایپ میکنین و تمام. مثلا:
viewport قسمت قابل مشاهده یک صفحه وب برای کاربره. شما وقتی یه سایت و یک صفحه رو باز میکنین، اولین چیزی که مشاهده میکنین رو بهش میگن viewport. قبل از عمومی شدن موبایل و تبلت و … رسم براین بود که صفحات وب غیر قابل انعطاف و صرفا واسه نمایش توی کامپیوترها طراحی میشدن. واسه همین مرور یک سایت در موبایل کار مشکلی بود. واسه تماشای یه صفحه معمولی، هی باید اونو به چپ و راست اسکرول میکردین. چون اندازه صفحات وب بزرگتر از موبایل و تبلت بودن.
اما امروزه صفحات وب منعطفتر و مناسب برای هر دستگاهی ساخته میشن که بهش میگن ریسپانسیو کردن سایت. یکی از کارهایی که سایت نویسا واسه ریسپانسیو سایت انجام میدن، استفاده از متای viewport هستش:
این دستور، زوم اولیه و عرض صفحه وب رو با عرض دستگاه (موبایل، تبلت، لب تاب یا هرچیز دیگهای) برابر میکنه. همیشه بهخاطر داشته باشین که استفاده از این تگ از نون شب هم واجبتره.
از این متا میتوان برای مشخص کردن تاریخ آخرین بازبینی و تغییرات در صفحه، استفاده کرد. طرز نوشتنش هم اینجوریه که در قسمت name باید بنویسین revised و در قسمت content تاریخ آپدیت و تغییرات رو درج کنین:
<!-- متا تگ تغییرات --> <meta name="revised" content="05/12/2013" /> <!-- متا تگ تغییرات -->
این تگ برای خزندگان یا رباتهای گوگل تگ مهمیه. درواقع خزندههای گوگل بوسیله این تگ از آخرین تغییرات باخبر میشن. اگر یک سئوی خوب میخواین حتما از این متا هم استفاده کنین.
از این متا برای رفرش یک صفحه واسه چند ثانیه یکبار استفاده میشه. اگه در یک صفحهای نیاز داشتین هر چند ثانیه یکبار، صفحهتون refresh بشه میتونین از این متا استفاده کنین:
<!-- متای رفرش صفحه --> <meta http-equiv = "refresh" content = "5" /> <!-- صفحه هر 5 ثانیه رفرش خواهد شد -->
حتی میتونیم بگیم بعد از 5 ثانیه برو به فلان آدرس:
<!-- متای ریدایرکت صفحه --> <meta http-equiv = "refresh" content = "5; url = https://programstore.ir/" /> <!-- صفحه بعد از 5 ثانیه، آدرس https://programstore.ir/ را باز خواهد کرد -->
همه مرورگرها از متاتگها حمایت میکنند:
| نام مرورگر | Chrome | Firefox | Safari | Opera | Internet Explorer |
| پشتیبانی میکند؟ | بله | بله | بله | بله | بله |
در پایان، اگه قصد آموزش HTML به صورت ویدیویی رو دارین، پکیج بی نظیر و جامع زیر رو معرفی میکنم:
فیلم آموزش HTML به صورت ساده، کامل، از صفر تا صد در قالب سه ویدیو جمعا به اندازه 3 ساعت و 30 دقیقه مناسب برای تمام سنین.
