HTML – متاتگ ها (Meta Tags)

Meta tag یک تگ HTML است که اطلاعات متا دیگری را درباره صفحه وب فراهم می‌کند. این اطلاعات متا معمولاً برای موتورهای جستجو، شبکه‌های اجتماعی و مرورگرها مفید هستند. این اطلاعات شامل اطلاعاتی مانند توضیحات صفحه، کلمات کلیدی، متا دیتای ارتباطی، اطلاعات نویسنده و سایر اطلاعات مهم دیگر می‌شود. Meta tagها معمولاً در قسمت head اسناد HTML قرار می‌گیرند و از ویژگی‌هایی مانند name یا property برای تعیین نوع اطلاعات و content برای مقدار آن استفاده می‌کنند. استفاده صحیح از meta tagها می‌تواند در بهبود SEO، بهبود قابلیت اشتراک گذاری صفحه در شبکه‌های اجتماعی و سایر امور مرتبط با وب سایت مفید باشد.

اضافه کردن تگ Meta به صفحه (Adding Meta Tags to Your Documents)

برای اضافه کردن meta tag به صفحه وب، شما باید این تگ‌ها را در قسمت <head> اسناد HTML صفحه خود قرار دهید. مثالی از اضافه کردن meta tag به صفحه وب به شکل زیر است:

در این مثال، meta tagها با استفاده از تگ <meta> و با ویژگی‌های مختلفی مانند name (نام متا) و content (محتوای متا) به صفحه اضافه شده‌اند. اطلاعاتی مانند توضیحات صفحه، کلمات کلیدی، نام نویسنده و تنظیمات مربوط به موبایل در این مثال قرار داده شده است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="توضیحات مربوط به صفحه شما">
    <meta name="keywords" content="کلمات کلیدی مربوط به صفحه شما">
    <meta name="author" content="نام نویسنده یا ارگانی که صفحه را ایجاد کرده است">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان صفحه شما</title>
</head>
<body>
    <!-- محتوای صفحه شما در اینجا قرار می‌گیرد -->
</body>
</html>

گروه‌بندی محتوا (Specifying Keywords)

تعیین کلمات کلیدی یا Specifying Keywords یکی از مهم‌ترین مواردی است که در SEO (بهینه‌سازی موتورهای جستجو) مورد توجه قرار می‌گیرد. کلمات کلیدی، کلمات یا عباراتی هستند که بهترین تطابق را با موضوع یا محتوای صفحه شما دارند و افرادی که این کلمات را جستجو می‌کنند، ممکن است به صفحه شما هدایت شوند.

برای اضافه کردن کلمات کلیدی به صفحه وب، شما می‌توانید از meta tag به نام “keywords” استفاده کنید.

مثالی از استفاده از این meta tag به شکل زیر است:

<meta name="keywords" content="کلمه کلیدی ۱, کلمه کلیدی ۲, کلمه کلیدی ۳">

در این مثال، شما کلمات کلیدی مرتبط با موضوع یا محتوای صفحه خود را در مقدار content این meta tag مشخص می‌کنید. مهم است که کلمات کلیدی انتخاب شده مرتبط با موضوع صفحه شما باشند و معمولاً باید به تنوع و گستردگی موضوع صفحه اشاره داشته باشند. اما توجه داشته باشید که استفاده از این meta tag برای تعیین کلمات کلیدی دیگر به‌طور گسترده مورد استفاده نیست و اهمیت آن در SEO در حال کاهش است، اما همچنان می‌تواند برای برخی موارد مفید باشد.

توضیحات سند (Document Description)

توضیحات سند یا Document Description به عنوان یکی دیگر از متا داده‌هایی است که می‌توانید به صفحات وب خود اضافه کنید. این توضیحات معمولاً در meta tag با نام “description” قرار می‌گیرد و شرحی کوتاه و مفید از محتوای صفحه را فراهم می‌کند.

وظیفه توضیحات سند این است که به موتورهای جستجو و کاربران اطلاعاتی درباره محتوای صفحه شما را ارائه دهد. این توضیحات معمولاً در نتایج جستجو نمایش داده می‌شوند، بنابراین باید مفید و جذاب باشند تا کاربران را به جذب محتوای شما ترغیب کنند.

مهمترین نکته در نوشتن توضیحات سند این است که آنها باید مرتبط، خلاصه، و جذاب باشند. باید سعی کنید که محتوای مهم و ممیز از صفحه را در توضیحات سند جای دهید تا کاربران به سرعت متوجه شوند که آیا محتوای صفحه شما با نیازها و موارد جستجوی آنها هماهنگ است یا خیر.

مثالی از توضیحات سند به شکل زیر است:

<meta name="description" content="این یک صفحه معرفی محصول است که جزئیات فنی و قابلیت‌های منحصر به فرد آن را در اختیار شما قرار می‌دهد.">

در این مثال، توضیحات سند به طور خلاصه و مفید محتوای صفحه را توصیف می‌کند تا کاربران و موتورهای جستجو بتوانند بازدید از صفحه را پیش بینی کنند.

تاریخ بازبینی سند (Document Revision Date)

تاریخ بازبینی سند یا Document Revision Date، به تاریخی اشاره دارد که آخرین باری است که محتوای یک صفحه یا سند وب بازبینی و ویرایش شده است. این متا داده معمولاً در meta tagها با نام “last-modified” قرار می‌گیرد.

استفاده از تاریخ بازبینی سند می‌تواند برای موتورهای جستجو و کاربران مفید باشد تا بفهمند که آیا اطلاعات موجود در صفحه به‌روز است یا نه. همچنین، این اطلاعات می‌تواند در مواردی که محتوای صفحه به‌طور دوره‌ای به‌روز می‌شود، مفید باشد.

معمولاً، تاریخ بازبینی سند به صورت زیر در meta tag قرار می‌گیرد:

در اینجا، “YYYY-MM-DD” نمایانگر تاریخ آخرین بازبینی سند است که به شکل سال-ماه-روز مشخص می‌شود. استفاده از این متا داده نه تنها به بهبود قابلیت دسترسی به اطلاعات صفحه کمک می‌کند بلکه به بهبود عملکرد SEO نیز کمک می‌کند.

<meta name="last-modified" content="YYYY-MM-DD">

تازه‌سازی سند (Document Refreshing)

این ویژگی به ما اجازه می‌دهد که دستورات خاصی را به مرورگر ارسال کنیم که برخی از آن‌ها نحوه رفتار مرورگر را متناسب با آن دستور تغییر می‌دهد.

یک استفاده رایج از http-equiv برای تعیین محتوای صفحه است. به عنوان مثال، می‌توانید از آن برای مشخص کردن نوع محتوای صفحه استفاده کنید، که این به مرورگر بگوید که چگونه صفحه را نمایش دهد. برای مثال، تعیین محتوای صفحه به زبان فارسی با استفاده از http-equiv می‌تواند به صورت زیر باشد:

<meta http-equiv="Content-Language" content="fa">

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

استفاده از http-equiv برای تنظیم دیگر پارامترها نیز ممکن است. به عنوان مثال، شما می‌توانید از آن برای تنظیم دستورات refresh برای انتقال صفحه یا به روزرسانی صفحه به صورت خودکار استفاده کنید.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

انتقال صفحه (Page Redirection)

تغییر مسیر یا Page Redirection در HTML به معنای ارسال کاربر از یک صفحه به صفحه دیگری است. این کار معمولاً با استفاده از تگ <meta> و ویژگی http-equiv به شکل زیر انجام می‌شود:

در این مثال، کاربر بعد از 5 ثانیه به آدرس https://example.com هدایت می‌شود. مقدار 5 در ویژگی content به معنای زمانی است که پس از آن کاربر هدایت می‌شود و url=https://example.com آدرس مقصد است.

<meta http-equiv="refresh" content="5;url=https://example.com">

این روش اغلب برای انتقال کاربران به صفحه‌های دیگر یا به‌روزرسانی خودکار صفحات در زمان‌های مشخص استفاده می‌شود. اما مهم است به‌خاطر داشته باشید که استفاده از تغییر مسیر خودکار ممکن است تجربه کاربر را تحت تاثیر قرار دهد، بنابراین باید با دقت و با توجه به استانداردها و نیازهای کاربران از آن استفاده کنید.

تنظیم نام نویسنده (Setting Author Name)

“تنظیم نام نویسنده” یک کاریست که می‌توانید در متا داده‌های HTML صفحات وب انجام دهید. این کار معمولاً با استفاده از متا تگ author صورت می‌گیرد.

با اضافه کردن تگ زیر به قسمت <head> اسناد HTML خود، می‌توانید نام نویسنده صفحه را تعیین کنید:

در اینجا، شما می‌توانید جزئیات نویسنده صفحه را قرار دهید، مثلاً اسم یک فرد، یک سازمان یا یک شرکت. این اطلاعات معمولاً توسط موتورهای جستجو برای نمایش در نتایج جستجو یا توسط مرورگرها برای اطلاعات کاربران استفاده می‌شود.

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="author" content="Mahnaz Mohtashim" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

تعیین مجموعه نویسه (Specify Character Set)

تعیین مجموعه کاراکتر یا Specify Character Set، به معنای تعیین مجموعه کاراکتری است که برای کدگذاری محتوای صفحه استفاده می‌شود. این مجموعه کاراکتر مشخص می‌کند که چه نوع کاراکترها و نوع کدگذاری‌هایی در محتوای صفحه استفاده شده است. این اطلاعات برای مرورگرها و موتورهای جستجو مهم است تا بتوانند محتوای صفحه را به درستی نمایش دهند.

برای تعیین مجموعه کاراکتر، معمولاً از تگ <meta> و ویژگی charset استفاده می‌شود. در زیر، دو مثال از تعیین مجموعه کاراکتر با استفاده از این تگ آورده شده است:

۱. مثالی از تعیین مجموعه کاراکتر UTF-8:

<meta charset="UTF-8">

۲. مثالی از تعیین مجموعه کاراکتر ISO-8859-1:

در هر دو مثال، ما با استفاده از ویژگی charset در تگ <meta>، مجموعه کاراکتر مورد استفاده برای کدگذاری محتوای صفحه را تعیین کرده‌ایم. این اطلاعات به مرورگرها کمک می‌کند تا محتوای صفحه را به درستی تفسیر و نمایش دهند.

<meta charset="ISO-8859-1">

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.