متا تگ
متا تگ ها به صورت مستقیم نمایش داده نمی شوند. بلکه اطلاعاتی درباره سایت به مرورگر و ربات ها نمایش می دهند.
تگ متا در داخل تگ head قرار دارد و معمولا شامل دو ویژگی
- name: نام داده متا
- content: محتوا و مقدار داده متا
است.
متا کلمات کلیدی (meta keywords): تعریف کلمه کلیدی برای موتورهای جستجو مانند گوگل. (این داده متا منسوخ شده است)
<meta name="keywords" content="HTML, CSS, JavaScript">
متا توضیحات (meta description): این تگ متا نیز برای موتورهای جستجو کاربرد دارد و شامل توضیحاتی درباره صفحه است.
<meta name="description" content="بزرگ ترین مرجع فارسی رایگان آموزش برنامه نویسی">
متا نویسنده (meta author): این تگ متا نیز برای موتورهای جستجو و ربات ها کاربرد دارد و شامل نام نویسنده وبلاگ است.
<meta name="author" content="Ehsan Eslami">
متا درگاه نمایش (meta viewport): این مت تگ برای مرورگر کاربرد دارد. و تنظیمات viewport را انجام می دهد.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
نکته: به ناحیه قابل دید مرورگر، viewport گفته می شود و تنظیمات آن شامل عرض دستگاه و بزرگنمایی اولیه است. برای اطلاعات بیشتر به آموزش viewport مراجعه کنید.
مجموعه کاراکتر (character set): برای نمایش صحیح متن، باید از مجوعه کاراکتر مناسب استفاده کنیم. توصیه می شود از مجموعه کاراکتری utf-8 استفاده کنید که بیشترین سازگاری را دارد.
<meta charset="UTF-8">
http-equiv: این متا تگ برای ایجاد تغییر در header پاسخ (response header) است.
به طور مثال در نمونه کد زیر با استفاده از ویژگی refresh محتوا را هر 10 ثانیه بروزرسانی می کنیم.
<meta http-equiv="refresh" content="10">
به طور مثال در نمونه کد زیر با استفاده از ویژگی content-type نوع محتوا را html و مجموعه کاراکتر را utf-8 کرده ایم.
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="بزرگ ترین مرجع فارسی رایگان آموزش برنامه نویسی">
<meta name="author" content="Ehsan Eslami">
<meta http-equiv="refresh" content="10">
<meta name="viewport" content="width=device-width, initial-scale=1.0">