این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ meta در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ meta در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Meta در HTML
تگ meta یا متاداده ها یا به انگلیسی metadata در واقع اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهد.
این اطلاعاتی که میگیم در یک صفحه نمایش برای کاربران قابل مشاهده نیست، یعنی نمای ظاهری یا بصری نداره ولی توسط مرورگرها و موتورهای جستجوگر قابل تجزیه و تحلیل می باشد، که این اطلاعات میتونه به یک وبسایت برای نمایش هرچه بهتر در مرورگرها و موتورهای جستجوگر کمک کند.
Free-Learn
متاداده های مختلفی وجود داره ولی خب خیلی هاشون اصلا نیاز نیستن یا ضروری نیستن یاهم خیلی کاربردی نیستن، ولی بعضی هاشونم خیلی مهم و پراستفاده هستند که در ادامه باهاشون آشنا خواهید شد.
- <meta charset=”UTF-8″>
|
1 2 3 |
<head> <meta charset="UTF-8"> </head> |
بصورت پیش فرض اگه از این متاداده استفاده نکرده باشیم، میبینی حروف فارسی در صفحه بصورت عجیب غریب نشون داده میشن، پس برای نمایش صحیح زبان فارسی در یک صفحه وب باید از این متاداده استفاده کرد.
- <meta name=”author”>
|
1 2 3 |
<head> <meta name="author" content="Sadegh Asadi"> </head> |
برای مشخص کردن نام نویسنده اون مطلب یا درکل اون صفحه ( برای نمایش در موتورهای جستجوگر و بحث سئو )
- <meta name=”keywords”>
|
1 2 3 |
<head> <meta name="keywords" content="HTML ,CSS ,JavaScript"> </head> |
برای مشخص کردن کلمات کلیدی مرتبط با اون مطلب یا صفحه ( برای نمایش در موتورهای جستجوگر و بحث سئو )
- <meta name=”description”>
|
1 2 3 |
<head> <meta name="description" content="آموزش رایگان طراحی وب"> </head> |
برای مشخص کردن یه توضیح یا شرح کوتاه درباره اون مطلب یا صفحه ( برای نمایش در موتورهای جستجوگر و بحث سئو )
- <meta name=”viewport”>
|
1 2 3 |
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> |
برای واکنش گرایی یک صفحه وب در گوشی های موبایل ، تبلت ها و.. ( برای بحث واکنش گرایی صفحه خیلی مهمه )
- <meta http-equiv=”refresh”>
|
1 2 3 |
<head> <meta http-equiv="refresh" content="5 , https://free-learn.ir/"> </head> |
تغییر مسیر صفحه بعد از ۵ ثانیه به صفحه دیگر
- <meta http-equiv=”refresh”>
|
1 2 3 |
<head> <meta http-equiv="refresh" content="5"> </head> |
صفحه هر ۵ ثانیه یکبار رفرش میشود
- <meta name=”robots”>
|
1 2 3 4 5 6 |
<head> <meta name="robots" content=" noindex , nofollow "> <meta name="robots" content=" index , follow "> <meta name="robots" content=" noindex , follow "> <meta name="robots" content=" index , nofollow "> </head> |
مشخص میکند که آیا یک صفحه وب در موتورهای جستجوگر ایندکس شود یا خیر و توسط ربات های خزنده دنبال شود یا خیر
وقتی یک نتیجه ( یا یک مطلب از سایت یا حالا هرچی ) در نتایج گوگل قرار بگیرد، میگیم فلان مطلب در گوگل ایندکس ( Index ) شده، و وقتی ربات های جستجوگر میان داخل یک سایت شروع میکنن به تحلیل و بررسی اون سایت، حال وقتی یک صفحه یا یک لینک قابلیت دنبال کردن ( follow ) داشته باشه میگیم دنبال کردن.
- index (یعنی ایندکس کن)
- noindex ( یعنی ایندکس نکن )
- follow ( یعنی دنبال کن )
- nofollow ( یعنی دنبال نکن )
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ meta در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ meta در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| charset | character_set | برای مشخص کردن کاراکترهای مورد استفاده در صفحه |
| content | text | برای مشخص کردن مقدار متا |
| http-equiv | content-type default-style refresh |
برای ایجاد هدر HTTP برای مقدار موجود در صفت content |
| name | application-name author description generator keywords viewport |
برای مشخص کردن نام متای مورد استفاده |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ meta تنها از صفات عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- از تگ
metaهمیشه باید در بین تگ head استفاده کرد. - برای واکنش گرا کردن صفحه وب شما در دستگاه های مختلف مثه موبایل ، تبلت و.. باید از متای viewport استفاده کرد.
