آموزش HTML - متاداده
تگ HTML <meta> به ما امکان می‌دهد متاداده یا همان داده‌نما (اطلاعات مهم و تکمیلی درباره یک سند) را به روش‌های گوناگونی مشخص کنیم. المان‌های META می‌توانند برای درج جفت‌های name و content استفاده شوند که ویژگی‌های سند HTML مانند نویسنده، تاریخ انقضا، فهرستی از کلمات کلیدی، پدیدآورنده سند و غیره را توصیف می‌کنند.
تگ HTML <meta> می‌تواند برای ارائه اطلاعات اضافی استفاده شود. این یک المان خودبسته (self-closing) است، به این معنی که نیازی به تگ پایانی ندارد اما اطلاعات را در قالب ویژگی‌های (attributes) خود حمل می‌کند. شما می‌توانید بسته به اطلاعاتی که می‌خواهید در سند خود نگه دارید، یک یا چند تگ متا را در سند خود بگنجانید، اما به‌طور کلی تگ‌های متا تأثیری بر ظاهر بصری سند ندارند؛ بنابراین از نظر ظاهری، شامل کردن یا نکردن آن‌ها تفاوتی ایجاد نمی‌کند.
افزودن متاداده به صفحات وب با استفاده از تگ‌های متا
شما می‌توانید با قرار دادن تگ‌های <meta> در داخل بخش هدر سند که با تگ <head> نشان داده می‌شود، متاداده را به صفحات وب خود اضافه کنید.
متاداده‌های زیر را می‌توان با استفاده از تگ <meta> اضافه کرد:
- تعیین کلمات کلیدی
- تاریخ تجدید نظر سند
- هدایت مجدد (ریدایرکت) صفحه
- تنظیم نام نویسنده
- توضیحات سند
- بارگیری مجدد (رفرش) سند
- تنظیم کوکی‌ها
- تعیین مجموعه کاراکترها (Character Set)
در ادامه، می‌توانید تمام نمونه‌هایی را که همراه با کد به خوبی توصیف شده‌اند بررسی کنید تا نحوه استفاده از هر یک از آن‌ها را در وب‌سایت خود بیاموزید.
تعیین کلمات کلیدی
شما می‌توانید از تگ <meta> برای تعیین کلمات کلیدی مهم مرتبط با سند استفاده کنید و بعداً این کلمات کلیدی توسط موتورهای جستجو هنگام ایندکس کردن صفحه وب شما برای اهداف جستجو مورد استفاده قرار می‌گیرند.
مثال
در ادامه مثالی آمده است که در آن عبارات "HTML, Meta Tags, and Metadata" را به عنوان کلمات کلیدی مهم درباره سند اضافه می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>توضیحات سند
شما می‌توانید از تگ <meta> برای ارائه یک توضیح کوتاه درباره سند استفاده کنید. این بخش نیز می‌تواند توسط موتورهای جستجوی مختلف هنگام ایندکس کردن صفحه وب شما برای اهداف جستجو به کار رود.
مثال
مثال زیر نحوه تعریف متای توضیحات (meta description) را برای یک صفحه وب نشان می‌دهد:
<!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." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>تاریخ تجدید نظر سند
شما می‌توانید از تگ <meta> برای ارائه اطلاعاتی درباره آخرین زمانی که سند به روزرسانی شده است استفاده کنید. این اطلاعات می‌تواند توسط مرورگرهای مختلف وب هنگام به روزرسانی صفحه شما مورد استفاده قرار گیرد.
مثال
مثال زیر نحوه تعریف تاریخ تجدید نظر را نشان می‌دهد:
<!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="revised" content="Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>بارگیری مجدد (رفرش) سند
تگ <meta> می‌تواند برای تعیین مدت زمانی استفاده شود که پس از آن صفحه وب شما به صورت خودکار به رفرش شدن ادامه می‌دهد.
مثال
اگر می‌خواهید صفحه شما هر ۵ ثانیه یک‌بار به رفرش شدن ادامه دهد، از سنتکس زیر استفاده کنید:
<!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="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>هدایت مجدد (ریدایرکت) صفحه
شما می‌توانید از تگ <meta> برای انتقال کاربر از صفحه فعلی به هر صفحه وب دیگری استفاده کنید. همچنین اگر می‌خواهید ریدایرکت پس از چند ثانیه مشخص انجام شود، می‌توانید یک مدت زمان تعیین کنید.
مثال
در ادامه مثالی از ریدایرکت کردن صفحه فعلی به صفحه‌ای دیگر پس از ۵ ثانیه آمده است. اگر می‌خواهید صفحه بلافاصله ریدایرکت شود، ویژگی content را مقداردهی نکنید:
<!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="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="refresh" content="5; url=http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>تنظیم کوکی‌ها
کوکی‌ها داده‌هایی هستند که در قالب فایل‌های متنی کوچک روی رایانه شما ذخیره می‌شوند و بین مرورگر وب و سرور وب مبادله می شوند تا بر اساس نیازهای برنامه وب شما، اطلاعات مختلف را پیگیری کنند.
شما می‌توانید از تگ <meta> برای ذخیره کوکی‌ها در سمت کلاینت استفاده کنید و بعداً این اطلاعات می‌تواند توسط سرور وب برای ردگیری بازدیدکننده سایت مورد استفاده قرار گیرد. اگر تاریخ و زمان انقضا را شامل نکنید، کوکی به عنوان کوکی جلسه (session cookie) در نظر گرفته می‌شود و با خروج کاربر از مرورگر حذف خواهد شد.
مثال
در ادامه مثالی از ریدایرکت کردن صفحه فعلی به صفحه‌ای دیگر پس از ۵ ثانیه آمده است. اگر می‌خواهید صفحه بلافاصله ریدایرکت شود، ویژگی content را مقداردهی نکنید.
<!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="revised" content="Tutorialspoint, 3/7/2014" />
<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>توجه: برای جزئیات کامل درباره کوکی‌ها می‌توانید آموزش PHP و کوکی‌ها را بررسی کنید.
تنظیم نام نویسنده
شما می‌توانید با استفاده از تگ <meta> نام نویسنده را در یک صفحه وب تنظیم کنید. نام نویسنده با اختصاص دادن مقدار "author" به ویژگی "name" مشخص می‌شود.
مثال
مثال زیر نحوه تنظیم نام نویسنده را نشان می‌دهد:
<!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>تعیین مجموعه کاراکترها (Character Set)
شما می‌توانید از تگ <meta> برای تعیین مجموعه کاراکترهای مورد استفاده در صفحه وب استفاده کنید. به‌طور پیش‌فرض، سرورهای وب و مرورگرهای وب از رمزگذاری ISO-8859-1 (Latin1) برای پردازش صفحات وب استفاده می‌کنند.
مثال
در ادامه مثالی برای تنظیم رمزگذاری UTF-8 آمده است:
<!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" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>مثال
برای ارائه صفحه استاتیک با کاراکترهای چینی سنتی، صفحه وب باید شامل یک تگ <meta> برای تنظیم رمزگذاری Big5 باشد:
<!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" />
<meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>ویدیو: تگ‌های متای HTML
پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.