آموزش تگ های تیتر یا heading – تاثیر تگ هدینگ html در سئو سایت

تگ HEADING
چکیده مطلب
می توانید از تگ های heading برای برقراری ارتباط بین بخش های مختلف متن استفاده کنید. اما آیا می‌دانستید که آنها به سئو و بهینه سازی سایت کمک می‌کنند؟ در ادامه مقاله به نحوه ی درست استفاده از تگ های هدینگ در سند html و آثار آن در سئو سایت پرداخته ایم.
دسترسی آسان به مطالب

بیایید تا یادبگیریم که تگ‌های heading چیست، چگونه تگ‌های هدینگ را اضافه کنیم، چرا برای سئو مهم هستند و بهترین روش‌ها برای استفاده از تیتر ها به چه صورت است. اگر نمی دانید سئو چیست پیشنهاد میکنیم مقاله زیر را مطالعه نمایید.

مقاله : ” سئو چیست ؟ – کاربرد های سئو 

تگ هدینگ (heading tags) چیست؟

تگ های تیتر یا heading یکی از مهمترین تگ های یک سند Html است و برای قرار دادن تیتر در نوشته و یا سند html به کار می رود و به موتورهای جستجو اهمیت تیتر و یا عنوان ما را بیان می کند و به همین دلیل در سئو سایت ما تاثیر بسزایی می گذارد. وظیفه اصلی تگ های هدینگ مشخص کردن عناوین و تیترهای هر پاراگراف و ارتباط دادن پاراگراف ها با زیر عنوان ها می باشد.

در تمامی صفحات وب از این تگ ها استفاده می شود. شما میتوانید با کلیک راست کردن در صفحه وب مورد نظر و انتخاب گزینه inspect بررسی کنید و ببینید به صورت زیر

مشاهده تگ های heading در صفحات وب
مشاهده تگ های heading در صفحات وب

و در تب باز شده قسمت element می توانید کدهای html را ببینید.

مشاهده تگ های heading در صفحات وب
مشاهده تگ های heading در صفحات وب

نحوه ی استفاده از تگ های heading در html

تگ های heading به صورت <h1> تا <h6> است که از این تگ ها در تگ <body> استفاده میکنیم. تگ <h1> بیشترین ارزش مکانی را دارد و تگ <h6> کمترین ارزش مکانی را دارد.

به صورت زیر از تگ های هدینگ استفاده کنید.

<body>
 
<h1> سایت طراحی و سئو سایت متاوبز </h1>
<h2>سایت طراحی و سئو سایت متاوبز</h2>
<h3>سایت طراحی و سئو سایت متاوبز</h3>
<h4>سایت طراحی و سئو سایت متاوبز</h4>
<h5>سایت طراحی و سئو سایت متاوبز</h5>
<h6>سایت طراحی و سئو سایت متاوبز</h6>
 
</body>

 

با نوشتن کد بالا در تگ <body> سند HTML خود این صفحه را مشاهده خواهید کرد.

 

تگ های Heading
تگ های Heading

تفاوت تگ های h1 تا h6 چیست؟

حتما با دیدن صفحه ی Html خود متوجه تغییر سایز تگ های مختلف شدید . ولی تغییر سایز دلیل اصلی استفاده از این تگ ها در صفحات وب ما نیست. زیرا ما با استفاده از css «یز میتوانیم اندازه ی فونت متن ها را تغییر دهیم.

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

متنی که در تگ H1 قرار میگیرد ارزش و اهمیت آن از مابقی تگ ها بیشتر است و همینطور که به این عدد (H2,H3,H4,H5,H6) اضافه شود از ارزش آن متن در یک صفحه وب کاسته می شود. با قرار دادن این تگ ها در صفحات وب خود به موتورهای جستجوگر می فهمانیم که کدام تیتر ها و عناوین از چه ارزشی برخوردار هستند.

پس هنگامی که یک ربات جستجوگر وب سایت ما را بررسی میکند ، در ابتدا تگ های استفاده شده در صفحه ما را برسی میکند و با رسیدن به تگ های هدینگ متوجه ارزش متن داخل آن تگ خواهد شد.

تگ H1

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

تگ h1 شما معمولاً همان چیزی است که خواننده در یک نتیجه موتور جستجو (مانند گوگل یا بینگ) می بیند، بنابراین عنوان شما باید به آنها بگوید که پست در مورد چیست و آنها را وادار کند که روی صفحه کلیک کنند و صفحه را مشاهده کنند.

تگ H2

تگ های h2 زیرعنوان های کلیدی هستند. این تگ ها راهی برای تقسیم محتوای شما به بخش های مرتبط هستند.

تگ های H3 تا H6

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

چگونه باید از تگ های H1 تا H6 در یک صفحه ی وب استفاده کنم؟

استفاده از تگ های Heading باید بصورت پله ای باشه ، یعنی اگه از H1 استفاده کردید بعد از ان باید تگ h2 استفاده کنید.

متنی که دارای تگ h2 است باید متنی مرتبط با متن تگ h1 باشد. و متن هایی که دارای تگ h3 هستند باید متنی مرتبط با تگ h2 باشند. و به همین منوال پیش میره. باید دقت کنیم قبل از استفاده از تگ H3 از تگ h4 استفاده نکنیم زیرا به سئو سایت ما اسیب میزند. بهتر است بر اساس اهمیت و ارزش تیترها و عناوینمان به درستی از این تگ های مهم استفاده کنیم.

لازم به ذکر هست که ما میتوانیم از تگ های H2 تا H6 به هر تعداد که لازم داشته باشیم استفاده کنیم.اما از تگ h1 فقط یکی باید باشد.

به طور مثال به شکل زیر

<body>
    <h1> سایت طراحی و سئو سایت متاوبز </h1> 
    	<h2>طراحی سایت در متاوبز</h2>
    		<h3>طراحی سایت فروشگاهی در متاوبز</h3>
           <h3>ریدیزاین سایت فروشگاهی در متاوبز</h3>
           <h3>طراحی سایت اختصاصی در متاوبز</h3>
    	<h2>سئو سایت متاوبز</h2>
           <h3>سئو تکنیکال در متاوبز</h3>
               <h4>سئو تکنیکال سایت های با cms مختلف در متاوبز</h4>
                   <h5>سئو تکنیکال سایت های وردپرسی در متاوبز</h5>
                   <h5>سئو تکنیکال سایت های پرستاشاپی در متاوبز</h5>
               <h4>سئو تکنیکال سایت های اختصاصی در متاوبز</h4>
           <h3>سئو خارجی در متاوبز</h3>
           <h3>سئو داخلی در متاوبز</h3>	 
 </body>

در بین تگ های heading میتوانید از تگ های دیگر مانند <p> ، <img> ، <table> ، <ul> و… استفاده کنید . فقط دقت داشته باشید که تگ های heading به ترتیب اهمیت انها مورد استفاده قرار بگیرد مثلا:

<body>
    <h1> سایت طراحی و سئو سایت متاوبز </h1> 
           <p>لورم ایپسوم متن ساختگی</P>
    	<h2>طراحی سایت در متاوبز</h2>
         <p>لورم ایپسوم متن ساختگی</P>
    		<h3>طراحی سایت فروشگاهی در متاوبز</h3>
               <p>لورم ایپسوم متن ساختگی</P>
               <ul>لورم ایپسوم متن ساختگی</ul>
           <h3>ریدیزاین سایت فروشگاهی در متاوبز</h3>
               <p>لورم ایپسوم متن ساختگی</P>
           <h3>طراحی سایت اختصاصی در متاوبز</h3>
    	<h2>سئو سایت متاوبز</h2>
           <h3>سئو تکنیکال در متاوبز</h3>
               <h4>سئو تکنیکال سایت های با cms مختلف در متاوبز</h4>
                   <h5>سئو تکنیکال سایت های وردپرسی در متاوبز</h5>
                   <h5>سئو تکنیکال سایت های پرستاشاپی در متاوبز</h5>
               <h4>سئو تکنیکال سایت های اختصاصی در متاوبز</h4>
           <h3>سئو خارجی در متاوبز</h3>
           <h3>سئو داخلی در متاوبز</h3>	 
 </body>

دقت داشته باشید که متناسب با طول متن خود از تگ ها استفاده کنید و استفاده بیش از حد از این تگ ها به سئو سایت ما آسیب می رساند. مثلا در یک متن 300 کلمه ای از 6 تگ h2 استفاده نکنید.

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

قسمت اول آموزش html : ” ایجاد اولین سند html و آشنایی با ساختار صفحات آن

اگر سوالی دارید ما اینجا هستیم تا به سوالات شما عزیزان پاسخ دهیم ، همراهتان هستیم.

نویسنده
مدیریت طراحی
مدیریت طراحی

نظرات

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *