تگ head در زیر تگ HTML و بالای تگ body قرار می‌گیرد و اطلاعاتی دارد که در خروجی صفحه مرورگر قابل‌مشاهده نیستند. در تگ head معمولاً عناصری مانند عنوان صفحه، توضیحات متا، استایل‌های CSS صفحه، لینک به فونت‌ها، فایل‌های جاوا اسکریپت و... یافت می‌شود. حال اگر کنجکاو هستید تا در مورد تگ هد اطلاعات بیشتری کسب کنید و با کاربرد آن در html آشنا شوید؛ تا پایان این بخش از سایت وب 24 همراه ما باشید.
تگ head چیست؟
پیش از اینکه مروری بر ماهیت تگ head داشته باشیم، بهتر است ابتدا نگاهی به کد زیر بیندازید:
<html>
<head>
<meta charset="---">
<meta name="---">
<title>JETSEO</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
همان‌طور که مشاهده کردید، در این مثال تگ هد پایین‌تر از html قرار دارد و حاوی زیر تگ‌های متا، تایتل، استایل، اسکریپت و... است. با اینکه داده‌های موجود در این تگ، داخل صفحه‌نمایش داده نمی‌شود؛ اما وجود آن ماهیت صفحه را تعیین می‌کند و از نظر سئو و بهینه‌سازی وب‌سایت نیز ضروری است. همچنین ناگفته نماند که اگر در html5 مورداستفاده قرار نگیرد، از نظر نمایش اطلاعات در صفحه، تغییر چندانی رخ نخواهد داد؛ اما در نسخه‌های پایین‌تر، حتماً باید آن را در تگ html ذکر کنید تا ساختار صفحه برای گوگل واضح‌تر باشد.
کاربرد تگ head در html چیست؟
اگر این سؤال برایتان پیش بیاید که چرا این تگ و اِلمان‌های زیر مجموعه آن برای گوگل اهمیت دارند؟! در پاسخ باید بگوییم که وقتی ربات‌های موتور جستجو به وب‌سایت شما سر می‌زنند؛ اولین مواردی که بررسی خواهند کرد، متادیتاهای مربوط به هر صفحه است که باید در تگ head جای‌گذاری شوند. به همین دلیل اگر تگ مذکور و زیر تگ‌های مربوطه را به‌درستی نوشته باشید، وب‌سایت شما حین ارزیابی و تحلیل توسط خزنده‌های موتور جستجو، امتیاز بهتری دریافت خواهد کرد.
همچنین نکته دیگری که راجع‌به این تگ وجود دارد، مربوط به عدم نمایش داده‌های آن، در خروجی صفحه مرورگر است. پس باید دقت کنید که اگر می‌خواهید یک اِلمان در صفحه وب‌سایت شما برای کاربرها قابل نمایش باشد (مانند تصویر، پاراگراف، ویدئو)، نباید آن را در تگ هد قرار دهید. به‌طورکلی برخی از رایج‌ترین عناصری که معمولاً داخل تگ هد قرار داده می‌شوند؛ به شرح زیر است:
- متاتگ <title>: عنوان صفحه
- متاتگ <style>: تعریف دستورات CSS
- متاتگ <base>: تعیین یک آدرس پایه برای تمامی لینک‌های موجود در یک صفحه
- متاتگ <link>: فراخوانی فایل‌های CSS خارجی
- متاتگ <meta>: ارائه اطلاعات صفحه به موتورهای جستجو
- متاتگ <script>: تعریف دستورات جاوا اسکریپت
- متاتگ <noscript>: جایگزین نمایش محتوا برای مرورگرهایی با ویژگی script غیرفعال
تگ ها و زیر تگ هایی که بین تگ head قرار می گیرند
در قسمت قبل بر مفهوم متاتگ‌هایی که زیر تگ head جای‌گذاری می‌شوند، نیم‌نگاهی داشتیم؛ اما در این بخش قصد داریم هر یک را به طور مفصل مورد بررسی قرار دهیم تا ویژگی و کاربردشان را بشناسید.
متاتگ <title>
عنوان صفحه شما که در نتایج جستجو به کاربر نمایش داده می‌شود، متاتگ <title> است. هر چه در نوشتن متا تایتلِ محتوای خود خلاقیت بیشتری داشته باشید، شانس خود را برای جلب‌توجه کاربران افزایش خواهید داد. به طور معمول طول این متاتگ باید حداکثر ۶۰ کاراکتر باشد و کلمه کلیدی اصلی در ابتدای آن قرار بگیرد.
نکته مهم در این مورد این است که اگر طول متاتگ تایتل از ۶۰ کاراکتر بیشتر باشد، عنوانی که در نتایج جستجو برای کاربر نمایش داده می‌شود، به‌جای جمله کامل، پس از ۶۰ کاراکتر سه‌نقطه قرار خواهد گرفت. حالا شاید این سؤال برایتان پیش بیاید که چطور باید یک متا تایتل جذاب بنویسیم؟ در پاسخ به پرسش مطرح شده، چند راهکار ساده و کاربردی را در ادامه خدمت شما عزیزان معرفی خواهیم کرد:
- بررسی متا تایتل‌های مشابه
- استفاده از نام برند در انتهای جمله
- نوشتن جملات سؤالی یا خبری جذاب
- استفاده از کلمه کلیدی اصلی در ابتدا تایتل
- بهره‌گیری از تعداد (مانند تاریخ، درصد تخفیف و...)
متاتگ <style>
یکی دیگر از اِلمان‌های موجود در تگ head، متاتگ <style> است که به‌منظور تعریف دستورات CSS در html جای‌گذاری می‌شود. این متاتگ از تمام ویژگی‌های عمومی در سند html پشتیبانی می‌کند و حتماً باید داخل تگ هد نوشته شود. متاتگ‌های استایل منحصر به هر صفحه هستند و به عبارتی فقط برای صفحه‌ای خوانده می‌شوند که متاتگ مذکور در هدِ آن نوشته شده باشد. برای مثال در یک سایت ۱۰ صفحه‌ای، اگر شما بخواهید دستورالعمل css موردنظرتان برای هر ۱۰ صفحه اعمال شود، باید به‌صورت جداگانه متاتگ مربوطه را در هر ۱۰ صفحه جای‌گذاری کنید.
متاتگ <base>
هنگام مشخص‌کردن یک آدرس پایه برای تمام لینک‌های موجود در صفحه از متاتگ <base> در تگ head استفاده می‌شود. دررابطه‌با ماهیت آدرس پایه هم باید بگوییم که به‌عنوان مرجعی برای آدرس‌های نسبی در صفحه موردنظر به کار می‌رود. به یاد داشته باشید که در هر صفحه فقط از یک متاتگ base می‌توانید استفاده کنید و در زبان html، این متاتگ پایانی ندارد و اصطلاحاً به‌عنوان یک متاتگ تنها شناخته می‌شود.
متاتگ <link>
متاتگ لینک فایل‌های CSS خارجی را فراخوانی می‌کند و حتماً باید زیرِ تگ head (بین تگ body و html) قرار بگیرد. به طور معمول اغلب مرورگرهای اینترنتی (مانند Edge، Opera، Chrome، Safari و Firefox) از آن پشتیبانی می‌کنند و نکته مهم این است که هر چه تعداد منابع خارجی که از طریق این تگ به صفحه فراخوانی می‌شوند، کمتر باشد؛ سرعت بارگذاری صفحه بهتر خواهد بود.
متاتگ <meta>
برای ارائه یک‌سری از اطلاعات کاربردی در مورد صفحه به موتورهای جستجو از متاتگ <meta> استفاده می‌شود و همان‌طور که می‌دانید، به دلیل جای‌گذاری آن در قسمت تگ head، برای کاربران قابل‌مشاهده نیست. به طور معمول برای مشخص‌کردن نام نویسنده یا کلمه کلیدی محتوا، توضیحات کوتاه در مورد محوریت موضوع مطلب، تغییر مسیر صفحه بعد از ۵ ثانیه به صفحه دیگر و... مورداستفاده قرار می‌گیرد.
متاتگ <script>
برای اجرای دستورات اسکریپت در یک صفحه از متاتگ <script> استفاده می‌شود. این متاتگ معمولاً برای ایجاد تغییرات پویا در صفحه، نگهداری تصاویر یا تعیین اعتبار فرم و... کاربرد دارد و توسط اغلب مرورگرها نیز پشتیبانی می‌شود.
متاتگ <noscript>
اگر در مرورگر یک دستگاه، ویژگی اسکریپت غیرفعال شده باشد یا متاتگ <script> پشتیبانی نشود، می‌توان از متاتگ <noscript> به‌عنوان یک راه‌حل برای اعلام عدم پشتیبانی از جاوا اسکریپت استفاده کرد. این متاتگ فقط می‌تواند شامل زیر تگ‌های <link> , <style> و <meta> باشد. همچنین صرفاً زمانی می‌توان از آن استفاده کرد که اسکریپت‌ها غیرفعال باشند یا توسط مرورگر پشتیبانی نشوند.
جمع‌بندی
در این مقاله به بررسی ماهیت تگ head در html پرداختیم و توضیح دادیم اطلاعاتی که در این تگ قرار می‌گیرند، در خروجی صفحه مرورگر قابل‌مشاهده نخواهند بود. همچنین با کاربرد آن آشنا شدیم و نگاهی بر زیر تگ‌های مربوطه کردیم. پس حالا دیگر به‌خوبی می‌دانید هدف از قرارگرفتن تک مذکور در html چیست و در چه مواقعی مورداستفاده قرار می‌گیرد؛ بنابراین امیدواریم با مطالعه این مقاله نیز اطلاعات مفیدی کسب کرده باشید و به پاسخ سؤالات موجود در ذهن خود برسید. لطفاً شما عزیزان هم تجربیات و پیشنهادهای خود را پیرامون موضوع مطرح شده با ما و سایر کاربران سایت وب 24 به اشتراک بگذارید. از اینکه تا پایان همراه ما بودید، صمیمانه سپاسگزاریم.
پست قبلی
