داشبورد کاربری

آموزش رایگان HTML: قسمت ششم: تگ‌های Heading و تأثیر آن‌ها بر سئوی سایت

آموزش رایگان HTML: قسمت ششم: تگ‌های Heading و تأثیر آن‌ها بر سئوی سایت

تگ‌های Heading و تأثیر آن‌ها بر سئوی سایت

در این قسمت از «دوره رایگان آموزش HTML» می‌خواهیم تگ‌های اساسی و پایه‌ای HTML را آموزش دهیم. تا اینجای آموزش می‌توانید ساختار کلی HTML که در «قسمت چهارم» توضیح دادیم را ایجاد کنید. در ادامه می‌خواهیم شما را با تگ‌های Heading که جهت ایجاد عنوان یا زیرعنوان در صفحات وب کاربرد بسیار زیادی دارند، آشنا کنیم.

تگ‌های هدینگ تاثیر به‌سزایی در خوانایی و سئوی وب‌سایت دارند و با رعایت آن کاربر مطلب را به صورت دسته‌بندی شده و مرتب مشاهده می‌کند. در هر سایت حداقل یک تگ هدینگ وجود دارد که همان عنوان مطلب است.

تگ‌های Heading

شما می‌توانید با تگ‌های Heading، عنوان یا زیرعنوانی را با اندازه‌های مختلف در صفحات وب‌سایت خود قرار دهید. در واقع متنی که در تگ‌های <h1> تا <h6> قرار می‌گیرد، بر اساس شماره تگ Heading، با اندازه‌های مختلفی به صورت Bold نشان داده می‌شوند.

به صورت کلی این تگ‌ها برای جلب توجه و راهنمایی کاربر استفاده می‌شود. کاربری که می‌خواهد قسمت یا پاراگرافی از متن موجود در سایت شما را بخواند با توجه به عنوان‌ها می‌تواند موضوع هر قسمت از متن را راحت‌تر متوجه شود و سریع‌تر به هدف خود برسد.

شش تگ هدینگ (Heading) در HTML تعریف شده است که با تگ‌های <h1> تا <h6> نشان داده می‌شوند. تگ <h1> مهم‌ترین و بزرگترین و تگ <h6> کم‌اهمیت‌ترین و کوچک‌ترین تگ‌ Heading می‌باشد. Headingها در صفحات وب‌سایت به موتورهای جستجو کمک می‌کنند تا ساختار صفحات وب را درک کنند.

توجه: عنوان اصلی کل صفحه باید با تگ <h1> نشان داده شود. هر کدام از صفحات وب باید یک تگ <h1> که نشان دهنده عنوانی برای محتوای کلی آن صفحه است، داشته باشد. موتورهای جستجوی گوگل با توجه به این تگ به موضوع کل صفحه پی می‌برند.

در زیر مثالی ساده از نحوه استفاده از تگ‌های Heading نشان داده شده است.

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

خروجی قطعه کد بالا به صورت زیر می‌باشد.

همان‌طور که در خروجی نشان داده شده است، قبل و بعد از خروجی هر یک از تگ‌ها، یک خط خالی(break line) وجود دارد. به این نکته توجه کنید که تگ‌های Heading باید برای قرار دادن عنوان یا زیرعنوان در صفحات وب استفاده شوند. از این تگ‌ها نباید برای بزرگ کردن متن یا Bold کردن استفاده شود.

اهمیت تگ‌های عنوان برای سئو

تگ‌های Heading برای سایت‌هایی که دارای محتوای متنی‌اند، بسیار مهم هستند. این تگ‌ها علاوه بر این‌که برای قرار دادن عنوان یا زیرعنوان استفاده می‌شوند، برای سئوی سایت شما نیز مهم هستند. موتورهای جستجوگر به این تگ‌ها اهمیت بیشتری قائل می‌شوند.

ساختار درختی تگ‌های هدینگ برای سئوی بهتر

برای نوشتن مطالب سایت نباید تمامی مطالب را در یکی از تگ‌های Heading قرار دهید و باید به صورت سلسله مراتبی و به صورت درختی از این تگ‌ها استفاده کنید. عنوان اصلی را باید در تگ <h1> قرار دهید سپس عنوان مرتبط به عنوان اصلی را در تگ <h2> و به همین ترتیب موضوع مرتبط به زیر عنوان دوم در تگ <h3> قرار دهید.

ساختار درختی تگ‌های Heading

به زبان ساده‌تر تمامی عنوان‌های اصلی را در تگ <h2> قرار می‌دهیم. مثال زیر نحوه استفاده از تگ‌های Heading به صورت سلسله مراتبی را نشان می‌دهد.

<!DOCTYPE html>
<html>
<body>

<h1>عنوان اصلی</h1>
<h2>زیرعنوان1: زیرعنوان اول مرتبط به عنوان اصلی</h2>
<h3>زیرعنوان1-1: زیرعنوان اول مرتبط به زیرعنوان1</h3>
<h3>زیرعنوان1-2: زیرعنوان دوم مرتبط به زیرعنوان1</h3>
<h3>زیرعنوان1-3: زیرعنوان سوم مرتبط به زیرعنوان1</h3>
<h2>زیرعنوان2: زیرعنوان دوم مرتبط به عنوان اصلی</h2>
<h3>زیرعنوان2-1: زیرعنوان اول مرتبط به زیرعنوان2</h3>
<h3>زیرعنوان2-2: زیرعنوان دوم مرتبط به زیرعنوان2</h3>
<h3>زیرعنوان2-3: زیرعنوان سوم مرتبط به زیرعنوان2</h3>
<h2>زیرعنوان3: زیرعنوان سوم مرتبط به عنوان اصلی</h2>
<h2>زیرعنوان4: زیرعنوان چهارم مرتبط به عنوان اصلی</h2>

</body>
</html>

اگر برای قرار دادن عنوان بعد از تگ <h2> از تگ <h4> استفاده نمایید، ساختار سلسله مراتبی محتوای سایت شما بهم می‌ریزد و این ممکن است بر سئوی سایت شما تأثیر بدی داشته باشد.

ارتباط تگ‌های Heading و کلمات کلیدی

نحوه استفاده از کلمات کلیدی را در «قسمت قبل» توضیح دادیم. نکته خیلی مهمی که در سئوی سایت شما خیلی مؤثر است، پیدا کردن کلمات کلیدی با توجه به محتوای صفحات وب می‌باشد. موتورهای جستجوی گوگل با توجه به کلمات کلیدی در محتوای صفحات وب جستجو می‌کنند تا میزان ارتباط کلمات کلیدی و محتوا را تشخیص دهند.

در واقع با استفاده از کلمات کلیدی سایت شما توسط موتورهای جستجو بهتر پیدا می‌شود و بهینه می‌شود و در اصطلاح فنی ایندکس (Index) می‌شود. کلمات کلیدی انتخاب شده در تگ <meta> قرار می‌گیرند. در بحث سئو یکی از توصیه‌های مهم این است که عنوان اصلی قرار داده شده در تگ <h1> با کلمه کلیدی سایت یکسان باشد.

نکات تکمیلی

نکته اول: در برخی مواقع کاربر برای Bold کردن مطلبی در محتوای سایت ممکن است از تگ <h1> استفاده کند. اما باید به این نکته توجه کرد که از تگ <h1> برای قرار دادن عنوان اصلی برای صفحات وب استفاده می‌شود. در هر یک از صفحات وب باید تنها یک بار از این تگ استفاده کنید.

نکته دوم: از تگ <h2> می‌توان چندین بار (حداکثر 5 بار) استفاده کرد. همان‌طور که می‌دانید هر پارگراف نباید بیش از 5 خط باشد و در زیر هر تگ Heading توصیه می‌شود بیشتر از سه پارگراف استفاده نشود.

نکته سوم: بهتر است از تگ‌های <h5> و <h6> زیاد استفاده نکنید. چون اهمیت خیلی کمی دارند.

نکته چهارم: اگر در محتوای صفحات وب‌سایت خود از عنوان‌ها خیلی کم استفاده کنید باعث می‌شود خواننده دچار سردرگمی و خستگی شود و در نهایت میزان زمان باقی ماندن کاربر در سایت شما کاهش پیدا کند و بر رتبه سایت شما در گوگل تأثیر منفی می‌گذارد.

نکته پنجم: استفاده بیش از حد از تگ‌های Heading ممکن است باعث سردرگمی کاربر و شلوغی متن سایت شما شود و گوگل سایت شما را جریمه می‌کند و تأثیر منفی بر رتبه و سئوی سایت شما می‌گذارد.

سخن پایانی

در این قسمت از آموزش رایگان HTML سعی کردیم با تگ‌های Heading که برای قرار دادن عنوان برای پارگراف‌ها استفاده می‌شود، آشنا شویم. این تگ‌ها برای جلب توجه و راحتی کاربر استفاده می‌شوند. اگر از تگ‌های عنوان به صورت ساختار درختی و سلسله مراتبی استفاده کنید، تأثیر بسزایی در رتبه سایت و سئوی سایت شما دارد.

سعی کنید که در استفاده از این تگ‌ها افراط و تفریط نکنید و حد اعتدال را رعایت کنید. در کل در طراحی وب‌سایت به صورت بهینه و درست استفاده کنید. امیدوارم مورد توجه شما قرار گرفته باشد. با بامادون هر چیزی را بهتر بدون و ما را به دیگران هم معرفی کنید.

منبع: بامادون

نشر و کپی مطالب با ذکر منبع و نام نویسنده بلامانع می‌باشد.

زهرا فتوحی نیا وب‌سایت
کارشناسی ارشد هوش مصنوعی و عاشق برنامه‌نویسی و طراحی وب

دیدگاهتان را بنویسید