جلسه شصتم: آموزش کامل تگ title در HTML | + سئو
به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! امروز قراره تگ title رو مثل یه حرفه‌ای بترکونی! این تگ ساده ولی قدرتمند تو بخش <head> سند HTML می‌ره و عنوان صفحه رو مشخص می‌کنه. تگ <title> نه‌تنها برای کاربرا، بلکه برای موتورهای جستجو (مثل گوگل) هم نقش حیاتی داره. تو این مقاله، با تمرکز ویژه روی سئو، از صفر تا صد تگ <title> برات آماده کردیم، با مثال‌های کاربردی، ترفندهای پیشرفته، و نکاتی که رتبه سایتت رو تو گوگل به اوج می‌رسونه. آماده‌ای؟ بزن بریم!
آنچه در این مقاله می‌خوانید:
🏷️ تگ title چیه و چرا برای سئو و تجربه کاربری مهمه؟
تگ <title> یه عنصر HTMLه که عنوان صفحه وب رو تعریف می‌کنه و تو بخش <head> سند قرار می‌گیره. این تگ به کاربرا و موتورهای جستجو می‌گه که موضوع اصلی صفحه چیه. از تب مرورگر گرفته تا نتایج جستجوی گوگل، تگ <title> همه‌جا حضور داره!
✏️ چرا تگ <title> مهمه؟ چون:
- نمایش در مرورگر: عنوان صفحه تو تب مرورگر، نوار عنوان، یا حتی بوکمارک‌ها از تگ
<title>میاد. - سئو (SEO): گوگل و بقیه موتورهای جستجو از
<title>برای درک موضوع صفحه و رتبه‌بندی استفاده می‌کنن. یه عنوان بهینه شانس کلیک (CTR) رو بالا می‌بره. - تجربه کاربری (UX): یه عنوان واضح و جذاب کاربرا رو ترغیب می‌کنه که روی لینک کلیک کنن و تو صفحه بمونن.
- بوکمارک و اشتراک‌گذاری: عنوان خوب باعث می‌شه کاربرا صفحه رو راحت‌تر ذخیره یا تو شبکه‌های اجتماعی شیر کنن.
- دسترسی‌پذیری: صفحه‌خوان‌ها از
<title>برای معرفی صفحه به کاربرایی که از فناوری‌های کمکی استفاده می‌کنن، کمک می‌گیرن.
✏️ مثلاً، اگه عنوان صفحه‌ات باشه خرید گوشی سامسونگ – تخفیف ویژه | فروشگاه XYZ، هم کاربرا جذب می‌شن، هم گوگل موضوع رو سریع می‌فهمه!
🧱 ساختار و نحوه استفاده از تگ title
تگ <title> ساختار ساده‌ای داره و فقط تو بخش <head> استفاده می‌شه. داخلش فقط متن خالص می‌ره و هیچ تگ HTML دیگه‌ای نباید باشه.
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه‌ی من</title>
</head>
<body>
<p>محتوای صفحه اینجا میاد.</p>
</body>
</html>📌 نکات کلیدی:
- هر صفحه باید یه تگ
<title>منحصربه‌فرد داشته باشه. - فقط متن خالص (بدون تگ‌های HTML) داخلش می‌ره.
- ترجیحاً کوتاه و معنادار باشه (حداکثر 60 کاراکتر).
📌 نکته سئو: عنوان‌های یونیک و مرتبط با محتوا به گوگل کمک می‌کنن صفحه رو بهتر ایندکس کنه و از جریمه Duplicate Content جلوگیری می‌کنه.
🚀 چطور تگ title به سئو کمک می‌کنه؟
تگ <title> یکی از مهم‌ترین فاکتورهای سئو تو صفحه (On-Page SEO)ه، چون:
- کلمات کلیدی: استفاده از کلمات کلیدی اصلی تو
<title>به گوگل می‌گه صفحه درباره چیه و شانس رتبه‌بندی رو بالا می‌بره. - نرخ کلیک (CTR): عنوان جذاب کاربرا رو ترغیب می‌کنه روی لینک کلیک کنن، که سیگنال مثبتی برای گوگله.
- تجربه کاربری: عنوان واضح باعث می‌شه کاربرا سریع بفهمن صفحه به دردشون می‌خوره یا نه، که نرخ پرش (Bounce Rate) رو کم می‌کنه.
- ایندکس بهتر: گوگل از
<title>برای درک ساختار و موضوع سایت استفاده می‌کنه، مخصوصاً تو سایت‌های چندصفحه‌ای. - نمایش تو SERP: عنوان تو نتایج جستجو (SERP) مستقیم از
<title>میاد، پس باید چشم‌گیر باشه.
📌 هشدار سئو: گوگل ممکنه اگه عنوانت خیلی بلند، غیرمرتبط، یا پر از کلمات کلیدی غیرطبیعی باشه، خودش یه عنوان جایگزین نشون بده.
📝 مثال‌های سئو محور: تگ <title> رو تو عمل ببین!
بیا چند نمونه کاربردی ببینیم که نشون می‌دن تگ <title> چطور سئو و تجربه کاربری رو تقویت می‌کنه:
1. صفحه محصول فروشگاه آنلاین
<title>خرید گوشی سامسونگ S23 – تخفیف ویژه | فروشگاه xyz</title>✨ چرا سئو محوره؟
- کلمه کلیدی اصلی (“خرید گوشی سامسونگ S23”) اول اومده.
- “تخفیف ویژه” جذابیت ایجاد می‌کنه و CTR رو بالا می‌بره.
- “فروشگاه XYZ” برند رو تقویت می‌کنه.
- طول: حدود 58 کاراکتر، کامل تو SERP نمایش داده می‌شه.
2. صفحه تماس با ما
<title>تماس با ما – پشتیبانی 24 ساعته | شرکت ABC</title>✨ چرا سئو محوره؟
- “تماس با ما” موضوع صفحه رو واضح می‌کنه.
- “پشتیبانی 24 ساعته” حس اعتماد و جذابیت می‌ده.
- “شرکت ABC” برندینگ رو تقویت می‌کنه.
- کوتاه و یونیک، مناسب برای ایندکس.
3. مقاله وبلاگ
<title>بهترین مقاصد سفر 2025 – ماجراهای جاده | وبلاگ سفر</title>✨ چرا سئو محوره؟
- “بهترین مقاصد سفر 2025” کلمه کلیدی هدفمنده.
- “ماجراهای جاده” حس کنجکاوی ایجاد می‌کنه.
- “وبلاگ سفر” زمینه محتوا رو مشخص می‌کنه.
- طول مناسب (حدود 60 کاراکتر).
💡 نکات حرفه‌ای برای نوشتن title بهتر
- طول مناسب: حداکثر 60 کاراکتر (با فاصله‌ها) باشه تا توی نتایج گوگل کامل نشون داده بشه.
- مختصر و جذاب: به جای “صفحه اصلی” بنویسید “فروشگاه آنلاین لباس – خانه مد”.
- یونیک بودن: هر صفحه باید عنوان منحصربه‌فرد داشته باشه تا از مشکل Duplicate Content جلوگیری بشه.
- جذابیت: یه حس کنجکاوی ایجاد کنید، مثلاً “سفر به رویاهات – ماجراهای جاده”.
- برندینگ: اسم برندت رو آخر عنوان اضافه کن تا شناخت برند (Brand Awareness) تقویت بشه.
- استفاده از جداکننده‌ها: از خط تیره (
-) یا پایپ (|) برای جداسازی بخش‌های عنوان استفاده کن. خوانایی رو بالا می‌بره و گوگل بهتر می‌فهمه.
🚫 اشتباهاتی که باید دورش خط بکشید
- خالی گذاشتن تگ: بدون title، صفحه‌تون غیرحرفه‌ای به نظر میاد.
- عنوانای تکراری: سئو سایتتون رو خراب می‌کنه.
- زیاده‌روی در طول: عنوانای بلند توی نتایج نصفه می‌مونن.
- عنوان غیرمرتبط: اگه عنوان با محتوای صفحه همخونی نداشته باشه، کاربرا سریع صفحه رو ترک می‌کنن
❓ سوالات متداول
1. می‌تونم بیشتر از یه تگ <title> تو صفحه بذارم؟
نه. هر صفحه فقط یه <title> باید داشته باشه.
2. فرق <title> با تگ <h1> چیه؟
<title>عنوان صفحه برای مرورگر و موتور جستجوئه.<h1>عنوان قابل دیدن توی خود صفحه‌ست.
3. طول مناسب برای عنوان چقدره؟
بین 50 تا 60 کاراکتر بهترین گزینه‌ست.
📝 پروژه‌ی عملی برای تمرین
یه صفحه ساده طراحی کن که شامل:
- یه تگ
<title>با عنوان جذاب باشه. - یه
<h1>برای تیتر صفحه بذار. - محتوای کوتاه (یه پاراگراف) بنویس.
بعدش توی مرورگر بازش کن و ببین عنوان صفحه چطوری توی تب مرورگر و توی بوکمارک‌ها نشون داده می‌شه. در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
🏁 جمع‌بندی: عنوان صفحه‌ات رو بترکون!
تگ <title> شاید ساده به نظر بیاد، ولی یه ابزار فوق‌العاده قدرتمنده که می‌تونه سئوی سایتت رو متحول کنه، تجربه کاربری رو بهتر کنه، و کاربرا رو به سمت صفحه‌ات بکشه. با رعایت نکات این مقاله، از انتخاب کلمات کلیدی هدفمند گرفته تا نوشتن عنوان‌های جذاب و یونیک، می‌تونی صفحه‌ات رو تو نتایج گوگل به رتبه اول برسونی. حالا وقتشه دست به کار بشی و یه تگ <title> حرفه‌ای برای صفحه‌ات بنویسی! سوالی داری؟
💬 ایده‌هات رو فریاد بزن!
نظرت درباره تگ <title> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!
شهرام نجفی
شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.