آموزش HTML – متا تگ در html

در جلسه قبلی آموزش HTML با کاربرد تگ head آشنا شدیم. در این بخش قصد داریم متا تگ در html را یاد بگیریم.

المان های meta برای ارایه داده های متا ساختاربندی شده در مورد صفحه وب استفاده می شوند.

المان متا تگ در html

المان <meta> معمولا داده های meta مثل کلمه کلیدی سند, توضیحات, اخرین ویرایش نویسنده و دیگر داده های متا را ارایه می دهد. هر تعداد از متاتگ می تواند در بخش head داکیومنت HTML یا XHTML قرار گیرد.

ویژگی name متاتگ امکان قرار دادن نام ویژگی و خصوصیت content نیز مقدار مربوط به همان متا را قبول می کند.

مقدار خصوصیت content می تواند شامل متن و enity های html باشد, اما امکان قرار گیری تگ HTML وجود ندارد. لیست استاندارد خاصی برای ویژگی های متا تگ در HTML وجود ندارد, بنابراین می توانید هر تعداد دلخواه از داده های متا را ایجاد کنید

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="John Carter">
    <title>Defining Document's Author</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Defining Document's Author</title>

</head>

<body>

Hello World!

</body>

</html>

تگ <meta> در مثال بالا نویسنده این سند را مشخص می کند.

نکته: داده های متا (metadata) در صفحه نمایش داده نمی شود ولی توسط ماشین یا ربات های موتور جستجو قابل خواندن است و این اطلاعات می تواند توسط مرورگر, موتور جستجو یا دیگر وب سرویس ها مورد استفاده قرار بگیرد.

تعریف اینکد کاراکتری صفحه

این متا تگ در html معمولا برای مشخص کردن اینکد کاراکتری (character encoding) در صفحه HTML بکار می رود.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Declaring Character Encoding</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Declaring Character Encoding</title>

</head>

<body>

Hello World!

</body>

</html>

به هر حال, برای ست کردن رمزنگاری کاراکترها داخل سند CSS می توانید از @charset هم بهره ببرید.

نکته: UTF-8 خیلی همه کاره و پیشنهاد شده برای اینکد کاراکتری است و برای زبان فارسی بسیار مناسب می باشد. به هرحال, اگر مشخص نشود, بر اساس اینکد کاراکتری پلتفرمی که استفاده شده است, مشخص خواهد شد.

کلمه کلیدی و توضیحات برای موتور جستجو (سئو)

بعضی موتورهای جستجو مثل گوگل از داده های متا (metadata) , مخصوصات کلمات کلیدی و توضیحات برای ایندکس صفحه وب استفاده می کند; به هر حال این مورد ضرورا صحیح نیست.

کلمات کلیدی حجم اضافی را به کلمات کلید سند می دهند و توضیحات نیز یک خلاصه کوتاه از صفحه را ارایه می دهند. این متا تگ در html در مثال زیر به عنوان keyword و description استفاده شده است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="HTML, CSS, References">
    <meta name="description" content="Tutorials on HTML and CSS"> 
    <title>Defining Keywords and Description</title>        
</head>
<body>
    <p>Hello World! Www.NetParadis.com</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Defining Keywords and Description</title>

</head>

<body>

Hello World! Www.NetParadis.com

</body>

</html>

کته: موتورهای جستجو از متاتگ description برای ساخت یک خلاصه کوتاه از صفحه هنگام نمایش نتایج جستو استفاده می کند

فعال کردن قابلیت بزرگنمایی در موبایل

شما می توانید با متا تگ viewport برای فعال سازی قابلیت بزرگنمایی (zooming) وب سایت روی دیوایس موبایل استفاده کنید. این تگ برای واکنشگرایی (responsive) به این جهت استفاده می شود.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Enable Zooming in Mobile Devices</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Enable Zooming in Mobile Devices</title>

</head>

<body>

Hello World!

</body>

</html>

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

لیست کلیه متاتگ ها مجاز را از اینجا می توانید مشاهده کنید. به هرحال اگر از همین متاتگ هایی که در این آموزش ارایه شد استفاده کنید, کافی است.

در دوره آموزش طراحی وب بطور کامل در مورد انواع متاتگ ها, کاربرد آن, موارد توصیه شده و همچنین واکنشگرایی صحبت و کار عملی انجام دادیم.

امیدوارم در این بخش آموزش HTML , از توضیحات ارایه شده برای متا تگ در html نهایت استفاده را برده باشید.

در بخش بعدی در مورد استفاده اسکریپت ها در صفحات وب یاد می گیریم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.