تگ title و اهمیت آن در سئو
تگ title همونجوری که از اسمش هم پیداست، عنوان صفحه تون رو تعیین میکنه. حتما پیش اومده که وقتی دارین توی وب می چرخین متوجه نوشته هایی در بالاترین قسمت هر صفحه شدین. اینو میگم:
اینو بهش میگن عنوان صفحه. میدونم الان دارین میگین این که خیلی ریزه. اصلا اهمیتی نداره که بخوایم درموردش حرف بزنیم. درسته؟ باید بگم سخت در اشتباهین.
تگ title چیست؟
اگه خاطرتون باشه در مقاله تگ head گفتم که تگ head شامل متادیتا هایی هست که واسه مرورگرها و جستجو گر ها مهمه. تگ title یکی از این متادیتا هاست. اما این فسقلی چه متادیتایی رو ارائه میده؟ این تگ با اون جثه کوچیکش، اسم، نام، عنوان رو به مرورگر و موتورهای جستجو انتقال میده. کلا به مرورگر میگه که من راجب چی حرف میزنم. پس حتما میتوننین الان بگین که جای این تگ بین تگ های اچ تی ام ال کجاست. آره؟ اگه جوابتون نه هستش پاراگراف بعدی رو بخونین.
مکان تگ title
میخام درمورد جای این کوچولو صحبت کنم. اینکه این تگ رو در بین کدهای HTML کجا بذرایم و title کجای نمایشگر نشون داده میشه؟
مکان تگ title در صفحات HTML
از title پرسیدن نام پدر؟ گفت: تگ head
میدونین که تگ head شامل متادیتا ها میشه و متادیتا ها هم، اطلاعاتی درمورد اطلاعات صفحات اچ تی ام ال هستش. در پاراگراف بالا هم گفتیم که تگ title هم اسمش رو به عنوان یه متادیتا حمل و ارایه میکنه. پس خیلی واضحه که جای این تگ در داخل تگ head باید باشه. درسته؟ به کد زیر دقت کنین:
<!DOCTYPE html> <html> <head> <title>عنوان صفحه</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
من تگ head رو یه کامیون در نظر میگیرم که حامل متادیتا هاست. حامل اطلاعاتی درمورد صفحه وب. پس واضحه که title هم باید داخل این کامیون باشه تا صحیح و سالم، حمل و تحویل داده بشه.
مکان تگ title در مرورگر
همونجوری که عرض کردم این تگ عنوان صفحه تون رو مشخص میکنه. حتی بعضا بهش تگ عنوان هم میگن. توی شکل بالا دیدیم که محتویات این تگ در قسمت چپ و بالای صفحه مرورگر نمایش داده میشه. بزارین یه مثال بزنم. اولین چیزی که توی فرم های ادارات می نویسین اسمتونه یا تاریخ تولدتون؟ واسه همین اسمتون اولین چیزیه که تو هر کاغذی می بینین. به وب هم حق بدین دیگه. اسمش باید اولش و بالاتر از بقیه اطلاعاتش باشه.
محتوای تگ title
چه چیزایی میتونم داخل این تگ بنویسم؟ یا اصلا میتونیم یه تگ اچ تی ام ال دیگه رو داخل اون بنویسیم؟
تنها چیزی که میتونین داخل این تگ بنویسین متن هستش. یا اگه بخام کلاس بزارم میگم تکست. هر تگی که داخل این تگ نوشته بشه نادیده گرفته میشه. یه لحظه به این مثال خوب دقت کنین:
<!DOCTYPE html> <html> <head> <title> HELLO <h1>WORLD!</h1> </title> </head> <body> </body> </html>
اگه خوب دقت کنین می بینین که موقع تعریف عنوان، کلمه WORLD! رو داخل تگ h1 قرار دادم. اینم نتیجه اش:
این عکس رو فقط از بالای صفحه گرفتم تا روی عنوان بحث کنیم فقط. می بینین که تگ h1 رو اعمال نکرده و اونو به عنوان یه تکست و متن بی معنی تلقی میکنه. پس هرچیزی اینجا تایپ کنین بدون معنیش و عملکردش و به صورت یه متن نشون داده میشه.
اگه فعلا اطلاعاتی درمورد تگ های اچ تی ام ال ندارین (که بهتون حق میدم نداشته باشین، چون تازه اول کاریم) توصیه می کنم مقاله آموزش HTML رو یه کطالعه اجمالی بکنین.
چند تا تگ عنوان می تونم داشته باشم؟
فقط یکی. البته اینم بگم که شما میتونین چند تگ title در head داشته باشین اما مرورگر ها اولیش رو اجرا میکنن. پس اینکار رو نکنین. به هیچ وجه من الوجوح خوب نیست. مرسی.
title بزرگ مرد کوچک
شاید این تعبیر میتونه بهترین کلمات برای توصیف تگ title باشه. اما چرا؟ یه همچین چیز کوچکی چجوری میتونه کار بزرگی رو انجام بده؟ اصلا کدوم کار بزرگ؟ جواب: سئو
تاثیر تگ title بر روی سئو
اندر کمالات این تگ باید عارض بشم که تگ عنوان، تاثیر زیادی روی سئو داره. اما چرا؟
دلیل اول: قبلا هم گفتم که title حاوی متادیتاست. در بحث متادیتا در مقاله تگ head، نقش متادیتا ها رو در سئو توضیح دادم.
دلیل دوم: وقتی ربات ها و خزنده های گوگل به صفحه شما سر میزنن تا اونو ایندکس کنن، تگ title جزو اولین چیزایی که بهش دقت میکنن. درواقع اولین گام شما در جلب نظر گوگل، عنوان مناسب صفحه تونه.
دلیل سوم: فرض کنین یه صفحه ای نوشتین درمورد آموزش برنامه نویسی اما عنوانش رو گذاشتین: طرز تهیه آبدوغ خیار. به نظرتون الان گوگل به جز فحش دادن دیگه چه کاری میکنه؟ مثلا اگه کاربری بیاد برنامه نویسی رو توی گوگل جستجو کنه، گوگل میزاره صفحه شما در صدر نتایج بهش نشون داده بشه؟ پس عنوان صفحه یکی از معیارهایی هست که گوگل هنگام جستجوی یه کلمه لحاظ میکنه. تازه اگه نمایش داده بشین عنوان صفحه تون نمایش داده میشه. پس مواظب باشین چی می نویسین.
یک title شیک و پیک
درمورد طرز نوشتن عنوان، سایت های w3schools و MDN Web Docs و همه منابع آموزشی توصیه هایی کردن که درنهایت بشه یک عنوان خوب و سئو پسند بنویسیم. هر چند خیلی خسته تون کردم اما باور کنین ارزششو داره. میتونین با رعایت این نکات یک title خوب بنویسین:
- توصیفی و طولانی: سعی کنین عنوان صفحه تون رو توصیف کنین، شرح بدین که مقاله یا مطلب و یا کلا صفحه تون درمورد چیه. عنوان های طولانی بهتر از عنوان های کوتاه هستن. از عنوان های تک کلمه ای و دو کلمه ای دوری کنین. به خودتون زحمت بدین و بهترین تون رو انجام بدین.
- 50 تا 60 کاراکتر: موتورهای جستجو در نهایت پنجاه تا شصت کاراکتر اول رو به بازدید کننده ها نشون میده. پس لطفا از این مقدار بیشتر ننویسین. اگر عنوانتون بیشتر از 60 کاراکتر شد، مطمئن بشین که کلمات مهم اول بیفتن.
- گوگل، دستِ بالای دست: بعضیا در عنوان فقط یک لیست از کلمات کلیدی رو میزارن. به خیال خودشون خیلی زرنگن. اما مطمئن باشین این کار، باعث پایین اومدن ارزش صفحه شون میشه. الگوریتم های مختلف گوگل، نمیزارن اون صفحه رشد کنه. گوگل زرنگ تر از همه است. از فریب دادن آن پرهیز کنید.
- منحصر بفرد بودن: عنوان صفحه شما باید در میان صفحات سایت خودتون منحصر بفرد باشه. به عبارتی عنوان هیچ دو صفحه ای رو، باهم یکی یا هم معنا نکنین. اگه بخوایین عنوان یکی از صفحاتتون رو دقیقا یا مشابه یکی دیگه از صفحاتتون قرار بدین، به موتور های جستجو در نمایش نتابج غلط کمک کردین.
خلاصه بگم دیدین موقع تولد یه بچه، چقدر روی انتخاب اسمش حساسن. شما هم باید این حساسیت رو در این تگ به عنوان یه پدر یا مادر دلسوز داشته باشین.
پشتیبانی مرورگرها از تگ title
اگه حوصلتون سر نرفته لطفا به جدول زیر یه نگاه بندازین. این جدول میگه که همه مرورگرها از این تگ حمایت میکنن:
| نام مرورگر |  |
 |
 |
 |
 |
| پشتیبانی میکند؟ | بله | بله | بله | بله | بله |
استایل ها و css پیش فرض تگ title
اگه در داخل هر صفحه وبی، کلیک سمت راست بکنین و گزینه inspect رو کلیک کنین، می تونین استایل های همه تگ ها رو مشاهده کنین. در همه مرورگر ها، استایل title به صورت زیره:
title {
display: none;
}
سخن آخر
اگه وقت بررسی تک تک تگ های اچ تی ام ال رو ندارین، می تونم یه پکیج بی نظیر و نفیس از فیلم آموزش HTML به زبان ساده و کامل رو بهتون معرفی کنم. یه دوره به شدت عالی، کافی و ساده. در سه و نیم ساعت html رو کامل یاد دادم و یه صفحه خوشگل ترگل ورگل هم طراحی کردم واستون.
مطالب زیر را حتما مطالعه کنید
html و css چیست – راهنمای یادگیری html و css + معرفی منابع آموزشی
آموزش ساخت قالب ساده html – طراحی صفحه وب با HTML و CSS
تگ عکس img
لینک در html – تگ لینک یا تگ a
تگ p در HTML
[…] مطالعه بیشتر در مورد این تگ، می توانید به مقاله تگ title در HTML مراجعه […]