در طراحی سایت و طراحی صفحات وب، تگ head یکی از مهمترین عناصر HTML صفحه است زیرا این تگ هم فایل های css و script های خارجی را فراخوانی می کند و هم به واسطه نگهداری عناصر title و meta در SEO بسیار موثر است. تگ head، عناصر زیر را در خود نگهداری می کند:
<title>, <style>, <meta>, <link>, <script> و <base>.
تگ head در HTML
تگ head یک نگهدارنده برای متا دیتا (metadata) می باشد و بین تگ html و تگ body قرار می گیرد. متا دیتای HTML اطلاعاتی در رابطه با سند HTML می باشد. متا دیتا در صفحه نمایش داده نمی شود. متا دیتا معمولا عنوان، نوع کد گذاری (Charset)، استایل ها، اسکریپت ها و بقیه ی اطلاعات متا را تعریف می کند.
تگ title در HTML
تگ title در HTML عنوان یک سند را تعریف می کند. عنوان باید صرفا تشکیل شده از متن باشد. عنوان در بخش title مرورگر نمایش داده می شود.
استفاده از تگ title در سندهای HTML ضروری است!
به خاطر داشته باشید که محتوای عنوان یک صفحه بسیار در بحث سئو (SEO) یا همان search engine optimization حائز اهمیت است. الگوریتم های موتورهای جستجو از عنوان صفحه برای تصمیم گیری در رابطه با نشان دادن صفحه در نتایج جستجوهای مرورگر استفاده می کنند. در حقیقت title صفحه باید بسیار هوشمندانه و هدفمند تعریف شود تا موتورهای جستجو صفحه سایت شما را در نتایج جستجو بالاتر از دیگر نتایج نمایش دهند.
کاربرد های تگ title:
- یک عنوان را در toolbar مرورگر تعریف می کند.
- یک عنوان را برای صفحه وقتی که صفحه به لیست صفحات مورد علاقه اضافه می شود فراهم کند.
- یک عنوان را در نتایج جستجوی موتور جستجو نمایش دهد.
در نتیجه، سعی کنید که تا جایی که ممکن است عنوان صفحه را مرتبط و معنا دار بنویسید زیرا باعث می شود که کاربران و مرورگر، آن صفحه را بهتر بفهمند!
یک سند ساده HTML:
تگ style در HTML
تگ style در HTML به منظور تعریف کردن اطلاعات استایل دهی مربوط به یک صفحه HTML به کار می رود:
همانطور که در این مثال نمایش داده شده است، درون تگ style، استایل های صفحه قرار می گیرد. از تگ style برای نوشتن کدهای CSS مربوط به سند استفاده می شود. نتیجه کد بالا در زیر قابل مشاهده است:
تگ link در HTML
تگ link در HTML رابطه بین سند فعلی و یک منبع خارجی را تعریف می کند. تگ link اکثر اوقات برای متصل کردن استایل شیت های (فایل های css) خارجی به کار می رود.
نکته مهم: به جهت بهینه سازی صفحه برای موتورهای جستجو، بهتر است که از استایل های خارجی و لینک (link) استفاده کنید و استایل ها را درون تگ style ننویسید.
تگ meta در HTML
تگ meta معمولا به منظور مشخص کردن (نوع کد گذاری) Charset، توضیحات صفحه، کلمات کلیدی، نام نویسنده مطلب و تنظیمات نمایش (viewport) به کار می رود.
متا دیتا روی صفحه نمایش داده نخواهد شد اما توسط مرورگر (چگونگی نمایان شدن محتوا یا ریلود شدن صفحه)، موتورهای جستجو (کلید واژه ها) و بقیه سرویس های وب خوانده شده و به کار می رود.
مثال ها
Charset (نوع کد گذاری) استفاده شده را تعریف می کند:
کلمات کلیدی برای موتورهای جستجو را تعریف می کند که برای SEO بسیار اهمیت دارد. سعی کنید کلمات کلیدی مرتبط و معنی دار برای صفحه خود بنویسید:
توضیحاتی را برای وب سایت تعریف می کند که برای SEO بسیار حائز اهمیت است. سعی کنید چکیده مقاله به همراه کلامات کلیدی خود را در این تگ به کار ببرید و سعی کنید که از 180 کاراکتر بیشتر نشود:
نویسندۀ یک صفحه را تعریف می کند:
سند را هر 30 ثانیه یکبار Refresh می کند:
به منظور تنظیم کردن viewport به کار می رود تا وب سایت شما ریسپانسیو شود و در دستگاه های مختلف مناسب بنظر آید:
مثال تگ های meta:
تنظیم کردن Viewport
Viewport قسمت قابل نمایش برای کاربر در یک وب سایت می باشد. Viewport نسبت به صفحه نمایش های مختلف تغییر می کند – به عنوان مثال در صفحه نمایش موبایل کوچک تر و در صفحه نمایش دسکتاپ بزرگتر نمایش داده می شود.
شما باید تگ meta زیر را در تمام صفحات وب سایت خود قرار دهید:
این کد به مرورگر دستورات لازم برای چگونگی کنترل مقیاس ها و ابعاد صفحه را می دهد. قسمت width=device-width عرض صفحه را بر اساس اندازه عرض صفحه نمایش مورد نظر تنظیم می کند. قسمت initial-scale=1.0 مقدار زوم شدن صفحه هنگامی که صفحه در صفحه نمایش های کوچک تر بارگذاری می شود را تنظیم می کند.
در اینجا یک مثال از یک وب سایت که متا تگ viewport ندارد و یک مثال از همان صفحه که دارای تگ viewport می باشد، بررسی می شود:
بدون متا تگ Viewport
با استفاده از متا تگ Viewport
تگ script در HTML
تگ script در HTML به منظور تعریف کردن جاوا اسکریپت های client-side به کار می رود. جاوا اسکریپت زیر متن "!Hello JavaScript" را درون یک تگ HTML با "id=demo" می نویسد:
همانطور که مشاهده می کنید، با استفاده از تگ script می توان کدهای javascript را درون head صفحه قرار داد. نتیجه کد بالا به شکل زیر است:
تگ base در HTML
این تگ base URL و target برای تمام URL های relative را در یک صفحه مشخص می کند. تگ < base > باید یا دارای href و یا دارای ویژگی target باشد یا هر دوی آن ها را داشته باشد.
نکته: فقط می توان از یک تگ < base > در یک سند HTML استفاده کرد!
مثال:
یک URL پیش فرض و یک target پیش فرض برای تمام لینک ها مشخص کنید:
که نتیجه کد بالا به شکل زیر است:
عناصر تگ head در HTML
