آموزش تگ meta در HTML

6 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ 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 پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی مرورگر هار از تگ table

جدول صفات تگ meta در HTML

جدول زیر به شما کمک میکند تا صفات تگ meta را به همراه مقادیری را که میتوانیم در این تگ استفاده کنیم را مشاهده نماییدم.

 

جدول صفات تگ meta در HTML

پشتیبانی تگ meta از صفات و رویدادهای عمومی

تگ meta قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

  • جایگاه تگ meta همیشه در بین تگ head قرار دارد.
برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید