title: همون چیزی که رو تب مرورگر می‌بینی
احتمالاً همین الان که داری این متن رو می‌خونی، بالای تب مرورگرت یه اسم کوتاه نوشته شده. اون دقیقاً کار تگ <title> هست. با اینکه فقط یه خط کوچیکه، یکی از تأثیرگذارترین تگ‌های کل صفحه‌ست، هم برای کاربر و هم برای گوگل. بیا کامل بررسیش کنیم.
title چیه و کجا قرار می‌گیره؟
تگ title همیشه باید داخل head قرار بگیره و هر صفحه دقیقاً باید یک title داشته باشه، نه بیشتر و نه کمتر:
<head>
<meta charset="UTF-8">
<title>آموزش HTML5 از صفر تا صد</title>
</head>برخلاف تگ meta که یه تگ خالیه، title یه تگ باز و بسته‌ست و متن داخلش همون چیزیه که به‌عنوان عنوان صفحه در نظر گرفته می‌شه.
title دقیقاً کجاها نمایش داده می‌شه؟
خیلی‌ها فکر می‌کنن title فقط رو تب مرورگر دیده می‌شه، اما در واقع سه‌جای مهم ازش استفاده می‌شه:
- تب مرورگر: همون متنی که بالای هر تب باز می‌بینی.
- نتایج جستجوی گوگل: title معمولاً همون لینک آبی‌رنگ بزرگیه که تو نتایج جستجو می‌بینی.
- نشانک‌ها (Bookmarks): وقتی یه صفحه رو بوکمارک می‌کنی، مرورگر از title به‌عنوان اسم پیش‌فرض اون نشانک استفاده می‌کنه.
یه مثال واقعی
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>خرید آنلاین کتاب - فروشگاه کتاب پارسی</title>
</head>
<body>
<h1>به فروشگاه کتاب پارسی خوش آمدید</h1>
</body>
</html>تو این مثال، اگه این فایل رو تو مرورگر باز کنی، رو تب مرورگر دقیقاً همون متن «خرید آنلاین کتاب - فروشگاه کتاب پارسی» رو می‌بینی؛ نه متن h1، نه هیچ متن دیگه‌ای از body. این نکته‌ی مهمیه که خیلی از تازه‌کارها باهاش اشتباه می‌گیرن: title و h1 دو چیز کاملاً جدا هستن.
تفاوت title و h1
| ویژگی | title | h1 |
|---|---|---|
| محل قرارگیری | داخل head | داخل body |
| محل نمایش | تب مرورگر و نتایج گوگل | داخل خود صفحه |
| هدف | معرفی کلی صفحه به مرورگر و گوگل | عنوان اصلی محتوای قابل‌مشاهده برای کاربر |
نکته‌ی مهم اینه که این دو می‌تونن متفاوت هم باشن، هرچند بهتره از نظر معنایی هم‌راستا باشن. مثلاً title می‌تونه شامل نام برند هم باشه («خرید آنلاین کتاب - فروشگاه کتاب پارسی»)، در حالی که h1 می‌تونه ساده‌تر باشه («به فروشگاه کتاب پارسی خوش آمدید»).
چطور یه title خوب بنویسیم؟
چند تا قانون ساده برای نوشتن title خوب وجود داره:
- طولش رو معمولاً بین ۵۰ تا ۶۰ کاراکتر نگه دار؛ طولانی‌تر از این ممکنه تو نتایج گوگل قطع بشه.
- مهم‌ترین کلمه یا موضوع صفحه رو نزدیک ابتدای title بذار.
- برای هر صفحه از سایتت یه title منحصربه‌فرد بنویس؛ استفاده از یه title تکراری برای همه‌ی صفحات، هم برای کاربر گیج‌کننده‌ست، هم برای سئو ضعیفه.
- title رو خالی نذار؛ تب مرورگر بدون title معمولاً یا آدرس فایل رو نشون می‌ده یا کلاً خالی می‌مونه.
چند اشتباه رایج
- خالی گذاشتن تگ title یا فراموش‌کردن کامل اون.
- استفاده از یه title یکسان برای تمام صفحات یک سایت.
- پر کردن title با کلمات کلیدی تکراری و بی‌معنی (مثلاً «کتاب، خرید کتاب، فروش کتاب، کتاب ارزان، کتاب آنلاین...») که به‌جای کمک، تجربه‌ی کاربری و سئو رو خراب می‌کنه.
- گیج‌شدن title با h1 و تصور اینکه این دو باید دقیقاً یک متن داشته باشن.
بهترین روش‌ها
- برای هر صفحه، یه title کوتاه، دقیق و مرتبط با محتوای همون صفحه بنویس.
- اگه سایتت برند مشخصی داره، می‌تونی اسم برند رو انتهای title بیاری، مثل: «مقاله درباره‌ی HTML5 - وبلاگ فلان».
نکته‌ی سئو
title یکی از قوی‌ترین سیگنال‌های سئو برای گوگل محسوب می‌شود؛ همان متنی است که به‌عنوان لینک اصلی در نتایج جستجو نمایش داده می‌شود و مستقیماً روی نرخ کلیک کاربران تأثیر می‌گذارد. عنوانی که هم دقیق باشد و هم جذاب، شانس کلیک‌خوردن صفحه را به‌شدت افزایش می‌دهد.
نکته‌ی دسترسی‌پذیری
title اولین چیزیست که صفحه‌خوان‌ها هنگام باز شدن یک صفحه یا سوییچ بین تب‌ها برای کاربر می‌خوانند؛ بنابراین باید به‌اندازه‌ی کافی گویا باشد که کاربر بدون دیدن صفحه هم بفهمد وارد چه بخشی شده است.
جمع‌بندی
تگ title عنوان رسمی هر صفحه‌ی HTML است که در تب مرورگر، نتایج جستجوی گوگل و نشانک‌ها نمایش داده می‌شود. این تگ کاملاً مستقل از h1 عمل می‌کند و باید برای هر صفحه به‌صورت منحصربه‌فرد، کوتاه و گویا نوشته شود.