خانه » آموزش طراحی سایت » وبلاگ راسان » تگ head در HTML چیست؟
تگ head در HTML را می‌توان به عنوان بخش متفکر یک صفحه وب در نظر گرفت. این تگ حاوی اطلاعاتی است که به مرورگر و موتورهای جستجو کمک می‌کند تا صفحه را بهتر درک کنند. و نمایش دهند. هنگام طراحی وب سایت این اطلاعات به صورت مستقیم در صفحه نمایش داده نمی‌شوند، اما برای عملکرد صحیح و سئوی وب‌سایت بسیار مهم هستند. برای درک بهتر تصور کنید یک صفحه وب، یک موجود زنده است. این موجود برای اینکه بتواند با دنیای بیرون ارتباط برقرار کند و شناخته شود، به یک مغز قدرتمند نیاز دارد. این مغز در دنیای وب، همان تگ head است! که خود شامل عناصری مانند عنوان صفحه وب ، پیوندهایی به شیوه نامه ها یا اسکریپت ها و متا تگ هایی هستند که اطلاعاتی در مورد محتوا و ساختار سند ارائه می دهند. ساختار کلی تگ به شکل زیر است:
<!DOCTYPE html>
<html>
<head>
<“meta charset=”UTF-8>
<title>My Awesome Website</title>
<“!meta name=”description” content=”Welcome to my website>
<“meta name=”keywords” content=”awesome, website, cool, amazing>
<“link rel=”stylesheet” href=”style.css>
</head>
<body>
<!– The rest of the page content goes here –>
</body>
</html>
تگ head، بخش پنهانی اما حیاتی هر صفحه وب است. که اطلاعات مهمی را درباره آن صفحه در اختیار مرورگرها، موتورهای جستجو و سایر ابزارهای وب قرار می‌دهد. این اطلاعات، مثل یک شناسنامه، به مرورگر کمک می‌کند تا صفحه را به درستی نمایش دهد و به موتورهای جستجو می‌گوید که این صفحه درباره چیست تا بتوانند آن را در نتایج جستجو به کاربران نشان دهند.
در این مقاله، قصد داریم به اعماق تگ head سفر کنیم و با اجزای مختلف آن آشنا شویم. خواهیم دید که چگونه این تگ کوچک، نقش بزرگی در موفقیت یک وب‌سایت ایفا می‌کند. پس اگر می‌خواهید بدانید که چرا برخی از صفحات وب در نتایج جستجو رتبه‌های بهتری دارند و چگونه می‌توانید یک صفحه وب حرفه‌ای‌تر ایجاد کنید، این مقاله را از دست ندهید.
استفاده صحیح از تگ Head به شما کمک می‌کند تا یک وب‌سایت حرفه‌ای‌تر، کاربرپسندتر و با رتبه بهتر در موتورهای جستجو ایجاد کنید. سئو و تجربه کاربری بهتر و سازگاری با مرورگرهای مختلف از دیگر مزیت های استفاده صحیح از این تگ می باشند. به بیان دیگر استفاده تگ هد توسط طراح سایت در نوشتن قالب سایت می تواند نتایج خوبی را در زمینه بهبود رتبه و تجربه کاربری به ارمغان بیاورد. مهمترین کاربردها و عناصر این تگ به شرح زیر است:
1- اطلاعات متا برای موتورهای جستجو:
2- استایل‌دهی صفحه:
3- لینک به فایل‌های دیگر:
4- اطلاعات دیگر:
تصور کن هر صفحه وب یه کارت ویزیت آنلاینه. تگ متا مثل اون اطلاعات پشت کارت ویزیت می‌مونه که به موتورهای جستجو و مرورگرها میگه این صفحه راجع به چیه، چه کسی ساخته‌اش و چه ویژگی‌هایی داره. این اطلاعات مستقیم تو صفحه نمایش داده نمی‌شوند، اما برای سئو (بهینه سازی سایت برای موتورهای جستجو) و عملکرد بهتر سایت خیلی مهم هستند. تگ‌های متا انواع مختلفی دارند که هر کدوم اطلاعات خاصی رو منتقل می‌کنند. چند تا از مهم‌ترینشون اینها هستند:
1- عنوان صفحه Title: مشخص کردن عنوان صفحه و نمایش آن در نوار بالای مرورگر و نتایج جستجو.
2 – توضیحات متا Meta Description : ارائه یک توضیح کوتاه و جذاب درباره محتوای صفحه که در نتایج جستجو نمایش داده می‌شود.
3- کلمات کلیدی Meta Keywords : لیستی از کلمات کلیدی مرتبط با محتوای صفحه که به موتورهای جستجو کمک می‌کند تا موضوع صفحه را بهتر درک کنند.
4-کنونیکال Canonical : مشخص کردن نسخه اصلی یک صفحه و جلوگیری از ایجاد نسخه‌های تکراری یک محتوا.
5- ربات‌ها Robots : دادن دستور به ربات‌های موتورهای جستجو درباره این که کدام بخش‌های صفحه باید ایندکس شوند و کدام بخش‌ها نباید ایندکس شوند.
7- تگ‌های link : اتصال فایل‌های خارجی مانند CSS و JavaScript به صفحه برای طراحی ظاهری و اضافه کردن قابلیت‌های تعاملی
8- تگ style : با استفاده از این تگ می توانیم بدون نیاز به فراخوانی فایل های css ، در خود صفحه ، کدهای css را برای استایل دهی به محتوای خود به کار ببریم.
در ادامه این مقاله با کاربرد ، اهمیت و نحوه استفاده از مهمترین تگ ها بیشتر آشنا خواهیم شد.
تگ Title در head ، نمایشگر عنوان صفحه و یکی از مهمترین عناصر در تگ head است. این عنوان، که معمولاً در نوار بالای مرورگر نمایش داده می‌شود، به کاربران و موتورهای جستجو می‌گوید که این صفحه درباره چیست. از طرفی عنوان صفحه یکی از مهمترین عوامل در سئو است. موتورهای جستجو از عنوان صفحه برای درک محتوا و رتبه‌بندی آن در نتایج جستجو استفاده می‌کنند. یک عنوان خوب و مرتبط می‌تواند به بهبود رتبه صفحه شما در نتایج جستجو کمک کند.
کاربرد مهم دیگری که تگ Title دارد، در زمینه تجربه کاربری است. انتخاب درست عنوان صفحه به کاربران کمک می‌کند تا به سرعت متوجه شوند که آیا این صفحه به موضوع مورد نظر آنها مرتبط است یا خیر. یک عنوان جذاب و توصیفی می‌تواند نرخ کلیک روی لینک صفحه شما را افزایش دهد. عنوان صفحه بین تگ‌های <title> قرار می‌گیرد. و به شکل زیر است:
<title> عنوان صفحه من </title>
نکات مهمی که در انتخاب عنوان صفحه باید رعایت کنید به شرح زیر هستند:
تگ Meta Description یک تگ HTML است که به موتورهای جستجو و کاربران، یک خلاصه کوتاه و جذاب از محتوای یک صفحه وب را نشان می‌دهد. این توضیحات معمولاً در نتایج جستجو زیر عنوان صفحه نمایان می‌شوند و نقش مهمی در جذب کاربران به کلیک روی لینک صفحه شما دارند.
یک توضیحات متای جذاب و مرتبط می‌تواند کاربران را ترغیب کند تا روی لینک صفحه شما کلیک کنند و وارد سایت شوند. و سبب می شود. اگرچه توضیحات متا به طور مستقیم روی رتبه‌بندی صفحه شما در نتایج جستجو تأثیر نمی‌گذارد. اما یک توضیحات خوب می‌تواند به افزایش نرخ کلیک (CTR) و در نتیجه به بهبود سئو سایت شما کمک کند. توضیحات متا به کاربران اطلاعات بیشتری در مورد محتوای صفحه می‌دهد و به آنها کمک می‌کند تا تصمیم بگیرند که آیا این صفحه برای آنها مفید است یا خیر. توضیحات متا به صورت زیر نوشته می‌شود:
<“توضیحات در این قسمت قرار می گیرند.”=meta name=”description” content>
مثال:
برای یک صفحه وبلاگ درباره آموزش برنامه‌نویسی پایتون، توضیحات متا می‌تواند به شکل زیر باشد:
< “آموزش کامل برنامه نویسی پایتون از صفر تا صد.”=meta name=”description” content>
تگ ربات‌ها یا Robots Meta Tag یک تگ HTML است که در head یک صفحه وب قرار می‌گیرد. و به موتورهای جستجو دستورالعمل‌هایی در مورد نحوه رفتار با آن صفحه می‌دهد. به عبارت ساده‌تر، این تگ به موتورهای جستجو می‌گوید که آیا می‌توانند این صفحه را ایندکس کنند، لینک‌های داخل آن را دنبال کنند و یا کار دیگری انجام دهند. با استفاده از این تگ می‌توانیم صفحات خاصی را از نتایج جستجو حذف کنیم . یا از ایندکس صفحات تکراری با محتوای مشابه جلوگیری کنیم. همچنین می توانیم صفحاتی که حاوی اطلاعات حساس هستند را بت این تگ از دسترس موتورهای جستجو خارج کنیم. برای درک دقیق تر به توضیحات و مثال های زیر توجه کنید:
1- این دستور به موتورهای جستجو می‌گوید که صفحه را ایندکس کند اما لینک‌های داخل آن را دنبال نکند.
<“meta name=”robots” content=” index , nofollow >
2- این دستور به موتورهای جستجو می‌گوید که صفحه را ایندکس کند و لینک‌های داخل آن را دنبال کند.
<“meta name=”robots” content=” index , follow >
3- این دستور به موتورهای جستجو می‌گوید که صفحه را ایندکس نکند و لینک‌های داخل آن را دنبال نکند.
<“meta name=”robots” content=” noindex , nofollow >
4- این دستور به موتورهای جستجو می‌گوید که صفحه را ایندکس نکند اما لینک‌های داخل آن را دنبال کند.
<“meta name=”robots” content=” noindex , follow >
5- این دستور از ایجاد نسخه ذخیره از یک صفحه مخصوص جلوگیری می کند.
<“meta name=”robots” content=”noarchive>
تگ ربات‌ها یک ابزار قدرتمند برای کنترل نحوه خزیدن و ایندکس صفحات توسط موتورهای جستجو است. همان اندازه که با استفاده صحیح از این تگ، می‌توانید به بهبود سئو سایت خود و محافظت از محتوای حساس کمک کنید. استفاده نادرست از تگ ربات‌ها می‌تواند به کاهش ترافیک سایت و آسیب رساندن به سئو منجر شود. بنابراین، قبل از استفاده از این تگ، به خوبی در مورد آن مطالعه کرده و یا از یک متخصص سئو کمک بگیرید. بیشترین کاربرد این تگ به شرح زیر می باشد:
تگ link یکی از عناصر کلیدی در ساختار صفحات HTML است. که به شما امکان می‌دهد فایل‌های خارجی مختلفی را به صفحه خود پیوند دهید. این تگ در بخش head یک سند HTML قرار می‌گیرد. و به مرورگر می‌گوید که برای رندر کردن صفحه، از منابع خارجی مشخصی استفاده کند. ساختار کلی تگ link به شکل زیر است:
<“آدرس فایل”=link rel=”stylesheet” hreh
rel: این ویژگی نوع رابطه بین سند فعلی و فایل خارجی را مشخص می‌کند. برخی از مقادیر رایج برای این ویژگی عبارتند از:
stylesheet: برای پیوند دادن به فایل‌های CSSicon: برای تعریف فاویکونalternate: برای تعریف RSS feed یا سایر منابع جایگزینhref: این ویژگی، آدرس فایل خارجی را مشخص می‌کند.
کاربردهای اصلی تگ link:
1- پیوند دادن به فایل‌های CSS
شایع‌ترین کاربرد تگ link، اتصال فایل‌های CSS به صفحه HTML است. این کار باعث می‌شود که سبک‌های طراحی و ظاهر صفحه از فایل CSS جدا و مدیریت آنها آسان‌تر شود.
<“link rel=”stylesheet” href=”styles.css>
2- تعریف فاویکون
فاویکون تصویری کوچک است که در تب مرورگر نمایش داده می‌شود و به شناسایی سایت کمک می‌کند. با استفاده از تگ link می‌توانید فاویکون را به صفحه خود اضافه کنید.
<“link rel=”icon” href=”favicon.ico>
3- تعریف فونت‌های سفارشی
اگر می‌خواهید از فونت‌های خاص و سفارشی در صفحه خود استفاده کنید، می‌توانید با استفاده از تگ link آنها را به صفحه خود پیوند دهید.
4- تعریف RSS feed
با استفاده از تگ link می‌توانید آدرس RSS feed سایت خود را مشخص کنید. تا کاربران بتوانند محتوای جدید سایت را به صورت خودکار دنبال کنند.
<“link rel=”alternate” type=”application/rss+xml” title=”RSS Feed” href=”feed.xml>
تگ style ابزاری در HTML است که به شما اجازه می‌دهد. تا سبک‌های CSS را مستقیماً درون سند HTML خود تعریف کنید. زمانی که می‌خواهید سبک‌های خاصی را فقط برای یک صفحه یا بخش کوچکی از یک صفحه اعمال کنید، تگ style بسیار مفید است. با استفاده از تگ style می‌توانید به سرعت تغییرات را در سبک‌های خود اعمال کنید و نتیجه را ببینید. اما ایراد مهمی که برای قرار گیری این تگ در head ، می توانیم عنوان کنیم، تاثیر منفی این کار در سرعت لود آن صفحه خواهد بود. بنابراین تا مجبور نبودید، این روش را برای استایل دهی به محتوای خود به کار
ساختار کلی تگ style:
html
<head>
<style>
body { background-color: lightblue; } h1 { color: navy; }
</style>
</head>
در داخل تگ style، قوانین CSS را به همان شکلی که در فایل‌های CSS می‌نویسید، وارد می‌کنید. هر قانون CSS شامل یک انتخابگر (selector) و یک بلوک اعلامیه (declaration block) است. اگرچه تگ style می‌تواند برای اعمال تغییرات سریع مفید باشد، اما برای پروژه‌های بزرگ و پیچیده، بهتر است. فایل‌های CSS خارجی را به کار ببرید. این کار باعث می‌شود که کد HTML شما تمیزتر و قابل نگهداری‌تر باشد.
نویسنده: بهار مدرسی