هدینگها (Headings) برای ایجاد سلسله مراتب و شفافیت در یک صفحه سایت استفاده می شوند. هدینگها به مخاطبان سایت کمک میکنند تا سریع‌تر صفحه را بررسی کلی کنند و به موتورهای جستجو برای درک بهتر عنوان و ساختار صفحه یاری می‌رسانند.
هدینگ (Heading) چیست؟
هدینگها عباراتی هستند که در ابتدای هر بخش از متن قرار می‌گیرند و توضیح می‌دهند که آن بخش چه چیزی را شرح می‌دهد. استفاده درست از عناوین یا هدینگها در یک صفحه به ساختار طبقه‌بندی شده متن کمک می‌کند که در نتیجه کاربر و موتور جستجو به سادگی خواهد فهمید که صفحه شامل چه محتوایی است. در واقع کاربر با یک نگاه خواهد فهمید با چه محتوایی روبرو است.
این هدینگها شش نوع هستند. H1 الی H6. از میان این ۶ مورد، h1، h2 و h3 بیشتر مورد استفاده قرار می‌گیرند. هدینگها در HTML یک صفحه قرار می‌گیرند.
از h1 به عنوان هدینگ اصلی (main heading) و از هدینگ‌های h2 تا h6 به عنوان عناوین فرعی (subheadings) نام برده میشود.
تگ هدینگ (heading tag) چیست؟
زمانی که صحبت از هدینگ میشود منظور همان تگ‌های هدینگ (heading tags) است. برای درک بهتر مثالی می‌زنم. به کد HTML زیر نگاه کنید:
<h1>این هدینگ h1 است</h1>:
- <h1>: تگ شروع برای هدینگ h1
- این هدینگ h1 است: این متنی است که کاربر به عنوان هدینگ h1 مشاهده خواهد کرد.
- </h1>: تگ بسته شدن برای هدینگ h1
در ابتدا باید گفت که تگ هدر را با بخش <head> صفحه اشتباه نگیرید. سپس باید گفت که برخی تگ هدر را به اشتباه به جای هدینگ به کار می‌برند.
در واقع تگ هدر برای توصیف ابتدای یک سند یا بخش استفاده میشود. این بدان معناست که می‌توانند در بخش منوی سایت یا گاهی در کنار هدینگ‌های صفحه مورد استفاده قرار بگیرند. به عنوان مثال:
<html> <head> <title>Headings H1-H6 and SEO</title> </head> <body> <article> <header> <h1>Header tags explained</h1> <h2>A brief introduction to header tags</h2> </header> </article> </body> </html>
چرا از هدینگها استفاده می‌کنیم؟
هدینگها هم برای موتورهای جستجو و هم برای کاربران کاربردی هستند:
- کاربران با استفاده از هدینگها به سرعت می‌توانند محتوای صفحه را بررسی کنند و بفهمند که این محتوا برای آنها مناسب است یا نه.
- موتورهای جستجو نیز با استفاده از هدینگها به ساختار صفحه و موضوعاتی که در آن به کار برده شده است پی می‌برند. البته استفاده از کلمات کلیدی در هدینگها به شکل مناسب (و نه به شکل اغراق آمیز)میتواند باعث بهبود عملکرد سئو شود. فارغ از اینکه شاید دیگر همانند قبل استفاده از هدینگها باعث رشد رتبه‌ها نمی‌شود، این موضوع را در نظر داشته باشید که این کار برای کاربران بسیار مناسب است که در نتیجه منجر به بهینه شدن عملکرد SEO میشود.
سلسله مراتب هدینگها
هدینگها باید به صورت منطقی در یک صفحه ساخته شوند. یک صفحه با یک هدینگ H1 شروع میشود، با یک هدینگ H2 دنبال می‌گردد، اگر به زیربخش دیگری نیاز داشته باشید مرحله بعدی میتواند استفاده از هدینگ H3 باشد. هیچ سطحی در سلسه مراتب را فراموش نکنید، برای مثل از H1 به H3 مستقیم وارد نشوید، باید حتما بین آنها از یک هدینگ H2 قرار گیرد.
در زیر نمایی از سطوح مختلف هدینگ را مشاهده می‌کنید:
. هیچ سطحی در سلسه مراتب را فراموش نکنید، برای مثل از H1 به H3 مستقیم وارد نشوید، باید حتما بین آنها از یک هدینگ H2 قرار گیرد.
یک مثال خوب استفاده درست از هدینگها را اینجا آورده‌ایم:
<h1>این عنوان صفحه است</h1>
<h2>این عنوان بخش اول است</h2>
<h3>این یک زیر عنوان برای بخش اول صفحه است.</h3>
<h2>این عنوان بخش دوم صفحه است.</h2>
<h3>این یک زیر عنوان برای بخش دوم صفحه است.</h3>
سایز هدینگها
هر چقدر به ترتیب به سمت H6 برویم، سایز هدینگها کاهش می‌یابد. در واقع تگ H1 باید بزرگترین هدینگ صفحه باشد. هدینگ H2 کمی کوچکتر از H1 و در ادامه هدینگ H3 کوچکتر از H2 است و همین منطق تا انتها جریان دارد.
هدینگ H1
هدینگ یا عنوان H1 موضوع اصلی یک صفحه را توصیف می‌کند. این هدینگ باید بسیار مرتبط با محتوای صفحه و در کل سایت یکتا باشد. همچنین در هر صفحه تنها باید یک هدینگ H1 استفاده کنید.
با وجود آنکه امروزه موتورهای جستجو و مخصوصا گوگل توانایی درک تصاویر را دارند اما بهتر است هیچ‌گاه تصویر را داخل هدینگ H1 قرار ندهید. اگر این کار را انجام دهید نمی‌توانید به خوبی به موتورهای جستجو اعلام کنید که محتوای صفحه مورد نظر شما در چه رابطه‌ای است.
<h1><img src=”logo.png”></h1>
هدینگ H1 میتواند دقیقا مشابه عنوان صفحه باشد اما الزامی به انجام این کار نیست. برای نوشتن هدینگ مناسب زمان بگذارید و نیاز کاربر را مورد توجه قرار دهید.
طول عنوان H1
از بکار بردن عنوان H1 خیلی طولانی بپرهیزید. اگر این کار را انجام دهید، احتمالا مخاطبان‌تان این هدینگ H1 را نخوانند و این امر منجر به آسیب دیدن تجربه کاربری می‌گردد. توصیه ما این است مانند تگ تایتل، حداکثر 60 کاراکتر برای این تگ به کار ببرید. همچنین به عنوان حداقل طول، نیاز است که به اندازه کافی بلند و معقول باشد. به طور کلی مطمئن باشید که هدینگ H1 برای بازدیدکنندگان شما قابل درک باشد.
داشتن چندین عنوان H1؟ حتی در HTML5 نیز خیر!
زمانی که مشخصات HTML5 برای اولین بار معرفی گردید، پشتیبانی از چندین تگ H1 در هر صفحه (هر یک در عنصر بخش خود) مدنظر قرار گرفته بود. به هرحال، به دلیل اینکه این توصیه را مرورگرها اتخاذ نکردند، متعاقبا پشتیبانی از این موضوع در HTML5.1 استاندارد کاهش یافت. توصیه می‌کنیم فعلا از چند تگ H1 در یک صفحه استفاده نکنید. برای اطلاعات بیشتر به این لینک مراجعه کنید.
استفاده‌های دیگر از هدینگ H1
اگر شما تایتل برای صفحه تعریف نکرده نباشید، یا اگر موتورهای جستجو تایتل صفحه شما را به اندازه کافی مرتبط با صفحه درک نکرده باشد، امکان دارد موتور جستجو از عنوان H1 به عنوان تایتل صفحه استفاده کند.
عنوان‌های H2 تا H6
هدینگ یا عناوین H2-H6 برای ساختار بندی بیشتر محتوای یک صفحه استفاده میشود. استفاده از هدینگ H2 توصیه شده است، و استفاده از هدینگ‌های H3-H6 نیز اختیاری است.
سوالات متداول در خصوص هدینگها
آیا هدینگها واقعا رنک ما را بهبود میبخشند؟
بله، آنها باعث بهبود رنک شما میشوند. امروزه حتی، از هدینگها برای معرفی و برقراری ارتباط با موتورهای جستجو استفاده میشود. با اینکه نقش هدینگ در الگوریتمهای موتور جستجو در طول سالها کاهش پیدا کرده است، اما هدینگها پیغام واضحی در خصوص اینکه موضوع صفحه مورد نظر چیست را برای موتورهای جستجو ارسال میکنند.
آیا داشتن محتوای مشابه برای تایتل و هدینگ H1 مشکلی به وجود میآورد؟
از نقطه نظر یک بازدید کننده این مورد میتواند مشکلی باشد که اگر هدینگ H1 یا تایتل مناسب تر باشد. از نقطه نظر سئو، خیر مشکلی به وجود نمیآید. این موضوع مسالهای نیست که گوگل بخاطر آن شما را مجازات کند.
