آموزش تگ meta در HTML

آموزش تگ meta در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ meta
در HTML به صورت کامل آشنا بشید.
تگ meta در HTML
تگ meta
یا متاداده ها یکی از مهم ترین تگ های HTML محسوب میشود که با استفاده از آن یک سری اطلاعات را در مورد صفحه وبسایت را به موتور های جستجو ارائه میدهد. معادل انگلیسی این تگ metadata می باشد.
اطلاعات ذکر شده در سطر فوق ، برای کاربران سایت قابل نمایش نیست. یعنی در هیچ کجای سایت نمی توانند این اطلاعات را مشاهده کنند. (مگر اینکه که کاربر برنامه نویس یا طراح سایت باشد. که با مراجعه به به بخشی از سایت میتواند این متا ها را مشاهده کند.) و فقط موتور های جستجو میتوانند آن را تحلیل و بررسی کنند. این موضوع به وبسایت کمک میکند که بهترین نتیجه را در موتور های جستوجو مانند گوگل داشته باشد.
چند مثال برای تگ meta
متاداده های زیادی برای وارد کردن به فایل HTML داریم اما بیشتر آنها ضروری نیستند و اصلا نیازی به وارد کردنشان نیست. در این بخش چند تا از مهم ترین meta
ها را بررسی میکنیم که وارد کردن آنها مهم و پر کاربرد که در ادامه دوره آموزشی HTML CSS پروژه محور ، به آنها میپردازیم.
مورد اول: در حالت عادی اگر از این meta
استفاده نکنیم با حروف فارسی عجیب و غریبی مواجه خواهیم شد. بنابراین برای اینکه حروف فارسی را به شکل درست آنها مشاهده کنیم بهتر است از این متاداده حتما استفاده کنیم.
<head> <meta charset="UTF-8"> </head>
دومین مورد: از این meta
برای نمایش نام نویسنده مطلب یا بصورت کلی صفحه مورد نظر استفاده میکنیم که در بحث موتورهای جستجوگر و سئو بسیار مهم و حائز اهمیت است.
<head> <meta name="author" content="milad alizadeh"> </head>
مورد سوم: برای تعیین نمودن کلمات کلیدی از این meta
استفاده میکنیم که همانند مورد قبلی برای سئو اهمیت زیادی دارد.
<head> <meta name="keywords" content="HTML ,CSS ,JavaScript"> </head>
مورد سوم: کاربرد این مورد هم این است که یک توضیح مختصر درباره صفحه وبسایت خود، زیر لینکی که در گوگل آن را مشاهده میکنید قرار میدهیم تا مخاطب خلاصه ای از محتویات سایت را بداند. این مورد برای سئو و رنکینگ خیلی مهم است و جزو متاداده هایی است که نباید هیچ گاه فراموش شود.
<head> <meta name="description" content="آموزش رایگان طراحی وب"> </head>
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید
مورد چهارم: این meta
نیز مربوط به واکنش گرایی وبسایت برای صفحه وب در گوشی های موبایل ، تبلت ها و…
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
پنجمین مورد: این meta
مخصوص تغییر مسیر صفحه بعد از سپری کردن ۵ ثانیه به یک صفحه مجزای دیگر در همان سایت.
<head> <meta http-equiv="refresh" content="5 , https://wppush.ir/"> </head>
ششمین مورد: کاربرد این meta
این است که صفحه بصورت اتوماتیک هر ۵ ثانیه یکبار رفرش میشود.
<head> <meta http-equiv="refresh" content="5"> </head>
آخرین مورد: کاربرد این متاداده نیز بدین صورت است که آیا یک صفحه وب در موتورهای جستجوگر و توسط ربات های خزنده به ترتیب ایندکس و دنبال شود یا خیر…
<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>
پشتیبانی مرورگرها از تگ meta
در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ meta
در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
جدول صفات تگ meta در HTML
جدول زیر به شما کمک میکند تا صفات تگ meta
را به همراه مقادیری را که میتوانیم در این تگ استفاده کنیم را مشاهده نماییدم.
پشتیبانی تگ meta از صفات و رویدادهای عمومی
تگ meta
قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- جایگاه تگ
meta
همیشه در بین تگ head قرار دارد.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید