تیترها در تولید محتوا هم به بازدیدکنندگان و هم به موتورهای جستجو نشانه‌های مهمی درباره‌ی سلسله مراتب و میزان مرتبط بودن محتوا می‌دهند.
شش سطح اهمیت وجود دارد،که مهم‌ترین آن تیتر H1 و کم اهمیت‌ترین آن تیتر H6 می‌باشد.
تیتر چیست؟
تیترها “Headings” عباراتی هستند که در ابتدای یک بخش قرار می‌گیرند و توضیح می‌دهند آن بخش درباره‌ی چه چیزی است. استفاده‌ی درست از تیترها در یک صفحه، نوعی سلسله مراتب و نمای کلی ایجاد می‌کند و کمک می‌کند سریع‌تر منتقل شود که صفحه‌ی وب درباره‌ی چیست. تیترها به بازدیدکنندگان کمک می‌کنند تا یک صفحه را سریع اسکن کنند و همچنین به موتورهای جستجو کمک می‌کنند ساختار و محتوای صفحه را به سرعت درک کنند.
هدینگ ها شش سطح دارند: از H1 تا H6 که در این میان تیتر1، 2 و 3 بیشتر از بقیه استفاده می‌شوند. تیترها در کد HTML یک صفحه تعریف می‌شوند.
تیتر H1 معمولاً به «عنوان اصلی» در صفحه شناخته میشود، در حالی که تیترهای H2 تا H6 «زیرعنوان» محسوب می‌شوند، زیرا نشان دهنده‌ی سطوح پایین‌تر هستند.
تیترها هم به بازدیدکنندگان و هم به موتورهای جستجو نشانه‌های مهمی درباره‌ی سلسله مراتب و میزان مرتبط بودن محتوا می‌دهند. شش سطح «اهمیت» وجود دارد، مهم‌ترین یعنی تیتر H1 تا کم اهمیت ترین یعنی تیتر H6.
تیترها و تگ‌های آن‌ها چیستند؟
وقتی درباره‌ی تیترها صحبت می‌کنیم، اغلب مردم از اصطلاح «تگ تیتر» استفاده می‌کنند.
برای جلوگیری از هرگونه سردرگمی، بیایید یک مثال بزنیم و عنصر تیتر H1 را همانطور که در کد HTML دیده میشود بررسی کنیم:
<h1>این تیتر H1 است</h1>
<h1>: تگ باز برای تیتر H1- این تیتر H1 است: متنی که به عنوان تیتر H1 روی صفحه‌ی بازدیدکننده نمایش داده میشود
</h1>: تگ بسته برای تیتر H1
و تگ‌های هدر چطور؟
اول از همه، تگ‌های هدر را با بخش <head> اشتباه نگیرید. دوم اینکه، اغلب به اشتباه از تگ‌های هدر برای اشاره به تیترها استفاده میشود.
در واقع، تگ‌های هدر میتوانند برای تعریف بخش هدر یک سند یا یک بخش استفاده شوند. این یعنی می‌توان آن‌ها را دور ابزارهای ناوبری قرار داد، یا دور تیترها پیچید. استفاده از آن‌ها اختیاری است. برای مثال:
<html> <head> <title>تیترهای H1-H6 و سئو</title> </head> <body> <article> <header> <h1>تگ‌های هدر توضیح داده شد</h1> <h2>معرفی کوتاه تگ‌های هدر</h2> </header> </article> </body> </html>
چرا از تیترها استفاده کنیم؟
تیترها برای هم بازدیدکنندگان و هم موتورهای جستجو مفید هستند:
- بازدیدکنندگان از تیترها برای مرور سریع یک صفحه استفاده می‌کنند تا تشخیص دهند آیا محتوا برایشان مرتبط است یا خیر. علاوه بر این، بازدیدکنندگان دارای مشکلات بینایی، از صفحه خوان‌ها (screen readers) برای مرور وب استفاده می‌کنند. صفحه خوان‌ها برای درک صفحات وب به تیترها متکی هستند و به کاربرانشان کمک می‌کنند تا راحت‌تر ناوبری کنند.
- موتورهای جستجو از تیترها برای درک ساختار یک صفحه و موضوعات آن استفاده می‌کنند. هرچند استفاده از تیترها تنها یک عامل کوچک در الگوریتم‌های رتبه‌بندی موتورهای جستجو است، اما قرار دادن کلمات کلیدی در تیترها هنگام نوشتن محتوای سئو شده می‌تواند به بهبود عملکرد سئو کمک کند. حتی اگر با این ایده که تیترها یک عامل کوچک رتبه‌بندی هستند موافق نباشید، به خاطر داشته باشید که هر کاری که برای بهبود تجربه کاربری انجام می‌دهید، معمولاً به بهبود عملکرد سئو نیز منجر میشود.
هدینگ ها و اسنیپت های ویژه
موتورهای جستجو ممکن است اسنیپت های ویژه (خلاصه‌ای از محتوای یک صفحه وب) نمایش دهند، که شامل بخش‌هایی از یک صفحه هستند و در نتایج جستجو (SERP) نشان داده می‌شوند. برای این کار، موتورهای جستجو باید محتوا را به اندازه‌ی کافی درک کنند تا بتوانند این بخش‌ها را با اطمینان انتخاب کنند و در این فرآیند، به تیترها متکی هستند.
به طور خلاصه، استفاده هوشمندانه و درست از تیترها به شما کمک می‌کند تا در اسنیپت‌های ویژه ظاهر شوید، که این خود باعث افزایش دیده شدن شما در نتایج جستجو و جذب ترافیک ارگانیک بیشتر به سایتتان میشود.
سلسله‌مراتب تیترها
تیترها باید در یک صفحه به‌صورت منطقی ساختاربندی شوند.یک صفحه با تیتر H1 شروع میشود،سپس تیتر H2 و در صورت نیاز به یک زیر بخش دیگر، می‌توان از تیتر H3 استفاده کرد. اگر زیر بخش‌های بیشتری لازم باشد، حتی می‌توان تیترهای H4 تا H6 را اضافه کرد.
در تصویر زیر، ما از سه سطح تیتر استفاده کرده‌ایم:
سطوح سلسله‌مراتب را جا نیندازید. به عنوان مثال: از تیتر H1 مستقیماً به تیتر H3 نروید. باید بین آن‌ها یک تیتر H2 وجود داشته باشد.
در ادامه،یک مثال خوب از استفاده‌ی صحیح تیترها آمده است:
<h1>این تیتر باید موضوع صفحه را توضیح دهد</h1> <h2>این یک زیرتیتر H2 است</h2> <h3>این یک زیرتیتر H3 است</h3> <h2>این یک زیرتیتر H2 دیگر است</h2> <h3>این یک زیرتیتر H3 دیگر است</h3>
اگر در حال نوشتن محتوای طولانی هستید،می‌توانید به‌طور کامل از تیترها استفاده کنید. ساختار تیتر شما می‌تواند به این شکل باشد:
<h1>این تیتر باید موضوع صفحه را توضیح دهد</h1> <h2>این یک زیرتیتر H2 است</h2> <h2>این یک زیرتیتر H2 دیگر است</h2> <h3>این یک زیرتیتر H3 است</h3> <h4>این یک زیرتیتر H4 است</h4> <h5>این یک زیرتیتر H5 است</h5> <h6>این یک زیرتیتر H6 است</h6> <h2>این یک زیرتیتر H2 دیگر است</h2> <h3>این یک زیرتیتر H3 است</h3> <h4>این یک زیرتیتر H4 است</h4> <h5>این یک زیرتیتر H5 است</h5> <h6>این یک زیرتیتر H6 است</h6>
و این یک مثال از سلسله‌مراتب تیتر است که باید از آن اجتناب کنید:
<h2>چرا این H2 در بالاست؟</h2> <h4>و چرا این یک تیتر H4 است؟</h4> <h1>این تیتر H1 در واقع باید در بالای صفحه باشد</h1> <h3>یک تیتر H3 تصادفی در اینجا</h3>
اندازه‌ی تیترها
هر چه به تیترهای پایین‌تر می‌رویم، اندازه‌ی آن‌ها باید کوچکتر شود. تیتر H1 باید بزرگ‌ترین تیتر صفحه باشد.تیتر H2 کمی کوچکتر از H1 است، تیتر H3 نیز کوچکتر از H2 است و به همین ترتیب تا تیترهای پایین‌تر.
چون یک تصویر می‌تواند هزاران کلمه را منتقل کند، بیایید به راهنمای بودجه خزش خود نگاه کنیم، با این تفاوت که پاراگراف‌ها حذف شده‌اند:
ترتیب تیترها در سورس HTML
مهم نیست تیترها در کد HTML شما به چه ترتیبی قرار گرفته باشند، آنچه اهمیت دارد، ترتیبی است که تیترها روی صفحه‌ی بازدیدکننده نمایش داده می‌شوند (یا زمانی که صفحه توسط ربات ها رندر میشود).
تیتر H1
تیتر H1 موضوع اصلی یک صفحه را توضیح می‌دهد. این تیتر باید کاملاً مرتبط با محتوای صفحه باشد، در کل وب سایت شما منحصربه‌فرد باشد و هر صفحه فقط یک تیتر H1 داشته باشد.
تیتر H1 را دور یک تصویر قرار ندهید، چون ربات ها تصاویر را به خوبی متن درک نمی‌کنند. این کار باعث میشود فرصت مهمی برای اعلام موضوع صفحه به موتورهای جستجو را از دست بدهید.
<h1><img src="logo.png"></h1>
تیتر H1 شما می‌تواند با عنوان صفحه page title یکسان باشد، اما الزامی نیست. بازدیدکنندگان بسیار بیشتر احتمال دارد هدینگ H1 را ببینند تا عنوان صفحه، پس همیشه اولویت با این است که تیتر H1 برای بازدیدکنندگان واضح و قابل‌درک باشد.
<title>تیترهای H1-H6 چیستند؟</title> <h1>تیترهای H1-H6 توضیح داده شدند</h1>
طول تیتر H1
باید از طولانی کردن بیش از حد تیتر H1 خودداری کنید. اگر تیتر بیش از حد طولانی باشد، احتمال زیادی وجود دارد که برای بازدیدکنندگان قابل‌خواندن نباشد و تجربه‌ی کاربری آن‌ها را تحت تأثیر قرار دهد. پیشنهاد می‌کنیم طول تیتر H1 حداکثر ۶۰ کاراکتر باشد، مشابه ویژگی عنوان.
در مورد حداقل طول، تیتر باید به اندازه‌ای باشد که معنا داشته باشد. بر اساس تجربه‌ی ما، حداقل ۴ کاراکتر معمولاً کافی است. مهم‌تر از همه: مطمئن شوید که تیتر H1 برای بازدیدکنندگان شما منطقی و قابل‌فهم باشد.
چند تیتر H1؟ حتی HTML 5 هم این اجازه را نمی‌دهد
وقتی استاندارد HTML5 معرفی شد، امکان استفاده از چند تیتر H1 در هر صفحه وجود داشت. با این حال، از آنجا که مرورگرها این توصیه را بهکار نگرفتند، پشتیبانی از این ویژگی بعداً با انتشار استاندارد HTML5.1 حذف شد.
استفاده‌های دیگر از تیتر H1
اگر عنوان صفحه تعریف نکرده باشید یا خزنده ها عنوان شما را به اندازه کافی مرتبط تشخیص ندهند، ممکن است تیتر H1 صفحه به‌عنوان اسنیپت صفحه (عنوان در نتایج جستجو) نمایش داده شود.
زیرتیترهای H2 تا H6
زیرتیترهای H2 تا H6 برای ساختاربندی بیشتر محتوا استفاده می‌شوند.
اکثر صفحات از داشتن حداقل یک تیتر H2 سود می‌برند، اما اگر برای بازدیدکنندگان منطقی نباشد،می‌توانید آن را حذف کنید.
از زیرتیترهای H2 تا H6 در مواقعی استفاده کنید که معنا دارد و همیشه به این نکته توجه داشته باشید که هیچ سطح تیتر را جا نندازید.
سؤالات متداول درباره تیترها
آیا تیترها واقعاً رتبه‌ی سایت من را بهبود می‌بخشند؟
بله،تیترها تأثیر دارند. حتی امروزه نیز تیترها در نشان دادن مرتبط بودن کلمات کلیدی به موتورهای جستجو نقش دارند.
هرچند نقش تیترها در الگوریتم‌های موتورهای جستجو در طول سال‌ها کاهش یافته است،اما همچنان سیگنال روشنی به موتورهای جستجو درباره موضوع صفحه ارسال می‌کنند.
آیا عنوان صفحه و تیتر H1 میتوانند یکسان باشند؟
بله،میتوانند.اما به یاد داشته باشید که همیشه تیتر H1 را طوری انتخاب کنید که برای بازدیدکنندگان شما بیشترین معنا و وضوح را داشته باشد.
آیا میتوانم چند تیتر H1 در یک صفحه داشته باشم؟
توصیه میشود در هر صفحه فقط یک تیتر H1 استفاده کنید. استفاده از چند تیتر H1 در یک صفحه با HTML5 معرفی شد، اما مرورگرها این روش را بهکار نگرفتند. از زمان HTML5.1، پشتیبانی از چند تیتر H1 دیگر وجود ندارد.
