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

  • منتشر شده در تاریخ

آموزش HTML - مقدمه

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

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    آموزش افزایش امنیت وردپرس
    با راهکارهای عملی

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

    تخفیف 50درصدی
    فقط 32.500 تومان
    همین الان می خرم!
    close-link

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link