تخفیف نوروزی پی استور
کد تخفیف: PR1404
شامل تمامی آثار
روز
ساعت
دقیقه
ثانیه
تخفیف نوروزی پی استور
اینو بهش می‌گن عنوان صفحه. می‌دونم الان دارین می‌گین این که خیلی ریزه. اصلا اهمیتی نداره که بخوایم درموردش حرف بزنیم. درسته؟ باید بگم سخت در اشتباهین.
اگه خاطرتون باشه در مقاله تگ head گفتم که تگ head شامل متادیتاهایی هست که واسه مرورگرها و جستجو گرها مهمه. تگ title یکی از این متادیتا هاست. اما این فسقلی چه متادیتایی رو ارائه می‌ده؟ این تگ با اون جثه کوچیکش، اسم، نام، عنوان رو به مرورگر و موتورهای جستجو انتقال می‌ده. کلا به مرورگر می‌گه که من راجب چی حرف می‌زنم. پس حتما می‌تونین الان بگین که جای این تگ بین تگ‌های اچ تی ام ال کجاست. آره؟ اگه جوابتون نه هستش پاراگراف بعدی رو بخونین.
می‌خوام درمورد جای این کوچولو صحبت کنم. اینکه این تگ رو در بین کدهای HTML کجا بذرایم و title کجای نمایشگر نشون داده میشه؟
از 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 هم باید داخل این کامیون باشه تا صحیح و سالم، حمل و تحویل داده بشه.
همونجوری که عرض کردم این تگ عنوان صفحه‌تون رو مشخص می‌کنه. حتی بعضا بهش تگ عنوان هم می‌گن. توی شکل بالا دیدیم که محتویات این تگ در قسمت چپ و بالای صفحه مرورگر نمایش داده میشه. بزارین یه مثال بزنم. اولین چیزی که توی فرم‌های ادارات می‌نویسین اسمتونه یا تاریخ تولدتون؟ واسه همین اسمتون اولین چیزیه که تو هر کاغذی می‌بینین. به وب هم حق بدین دیگه اسمش باید اولش و بالاتر از بقیه اطلاعاتش باشه.
چه چیزایی می‌تونم داخل این تگ بنویسم؟ یا اصلا می‌تونیم یه تگ اچ تی ام ال دیگه رو داخل اون بنویسیم؟
تنها چیزی که می‌تونین داخل این تگ بنویسین متن هستش. یا اگه بخوام کلاس بذارم میگم تکست. هر تگی که داخل این تگ نوشته بشه نادیده گرفته میشه. یه لحظه به این مثال خوب دقت کنین:
<!DOCTYPE html> <html> <head> <title> HELLO <h1>WORLD!</h1> </title> </head> <body> </body> </html>
اگه خوب دقت کنین می‌بینین که موقع تعریف عنوان، کلمه WORLD! رو داخل تگ h1 قرار دادم. اینم نتیجه‌اش:
این عکس رو فقط از بالای صفحه گرفتم تا روی عنوان بحث کنیم فقط می‌بینین که تگ h1 رو اعمال نکرده و اونو به عنوان یه تکست و متن بی معنی تلقی می‌کنه. پس هرچیزی اینجا تایپ کنین بدون معنیش و عملکردش و به صورت یه متن نشون داده میشه.
اگه فعلا اطلاعاتی درمورد تگ‌های اچ تی ام ال ندارین (که بهتون حق می‌دم نداشته باشین، چون تازه اول کاریم) توصیه می‌کنم مقاله آموزش HTML رو یه مطالعه اجمالی بکنین.
فقط یکی. البته اینم بگم که شما می‌تونین چند تگ title در head داشته باشین اما مرورگرها اولیش رو اجرا می‌کنن. پس اینکار رو نکنین. به هیچ وجه من الوجوه خوب نیست. مرسی.
شاید این تعبیر می‌تونه بهترین کلمات برای توصیف تگ title باشه. اما چرا؟ یه همچین چیز کوچکی چجوری می‌تونه کار بزرگی رو انجام بده؟ اصلا کدوم کار بزرگ؟ جواب: سئو
اندر کمالات این تگ باید عارض بشم که تگ عنوان، تاثیر زیادی روی سئو داره. اما چرا؟
دلیل اول: قبلا هم گفتم که title حاوی متادیتاست. در بحث متادیتا در مقاله تگ head، نقش متادیتاها رو در سئو توضیح دادم.
دلیل دوم: وقتی ربات‌ها و خزنده‌های گوگل به صفحه شما سر می‌زنن تا اونو ایندکس کنن، تگ title جزو اولین چیزایی که بهش دقت می‌کنن. درواقع اولین گام شما در جلب نظر گوگل، عنوان مناسب صفحه تونه.
دلیل سوم: فرض کنین یه صفحه‌ای نوشتین درمورد آموزش برنامه نویسی اما عنوانش رو گذاشتین: طرز تهیه آبدوغ خیار. به نظرتون الان گوگل به جز فحش دادن دیگه چه کاری می‌کنه؟ مثلا اگه کاربری بیاد برنامه نویسی رو توی گوگل جستجو کنه، گوگل می‌زاره صفحه شما در صدر نتایج بهش نشون داده بشه؟ پس عنوان صفحه یکی از معیارهایی هست که گوگل هنگام جستجوی یه کلمه لحاظ می‌کنه. تازه اگه نمایش داده بشین عنوان صفحه‌تون نمایش داده میشه. پس مواظب باشین چی می‌نویسین.
درمورد طرز نوشتن عنوان، سایت‌های w3schools و MDN Web Docs و همه منابع آموزشی توصیه‌هایی کردن که درنهایت بشه یک عنوان خوب و سئو پسند بنویسیم. هر چند خیلی خسته‌تون کردم اما باور کنین ارزششو داره. می‌تونین با رعایت این نکات یک title خوب بنویسین:
خلاصه بگم دیدین موقع تولد یه بچه، چقدر روی انتخاب اسمش حساسن. شما هم باید این حساسیت رو در این تگ به عنوان یه پدر یا مادر دلسوز داشته باشین.
اگه حوصلتون سر نرفته لطفا به جدول زیر یه نگاه بندازین. این جدول می‌گه که همه مرورگرها از این تگ حمایت می‌کنن:
| نام مرورگر |  |
 |
 |
 |
 |
| پشتیبانی میکند؟ | بله | بله | بله | بله | بله |
اگه در داخل هر صفحه وبی، کلیک سمت راست بکنین و گزینه inspect رو کلیک کنین، می‌تونین استایل‌های همه تگ‌ها رو مشاهده کنین. در همه مرورگرها، استایل title به صورت زیره:
title {
display: none;
}
سخن آخر
اگه وقت بررسی تک تک تگ‌های اچ تی ام ال رو ندارین، می‌تونم یه پکیج بی نظیر و نفیس از فیلم آموزش HTML به زبان ساده و کامل رو بهتون معرفی کنم. یه دوره به شدت عالی، کافی و ساده. در سه و نیم ساعت html رو کامل یاد دادم و یه صفحه خوشگل ترگل ورگل هم طراحی کردم واستون.
