آموزش تگ های تیتر یا Heading در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ های تیتر یا Heading در HTML با من همراه باشید.

آموزش تگ های تیتر یا Heading در HTML

Free-Learn

تگ های تیتر یا Heading در HTML

عناوین یا تیترها یا به انگلیسی Headings از مهمترین تگ ها در یک صفحه ی HTML می باشد، در واقع میشه گفت مهمترین بخش یک صفحه ی HTML یا یک صفحه ی وب همین تگ های تیتر می باشد.

حتما تا حالا دیده اید و یا شنیده اید، مثلا در یک مجله یا روزنامه میگن فلان خبر رو تیتر ۱ زدن یا مثلا فلانی تیتر ۱ روزنامه فلان می باشد، خب این یعنی همین! وقتی میگن فلان خبر تیتر ۱ روزنامه است یعنی این خبر از مهمترین و جذاب ترین و با ارزش ترین خبرهاست.

تیترها یا عناوین در HTML به همین صورت است، بطور کلی در تمامی وبسایت های موجود در اینترنت از این تگ ها استفاده می شود، تیترها در HTML از طریق تگ های H1 تا H6 مشخص می شوند، تگ H1 دارای بیشترین ارزش مکانی و در مقابل تگ H6 دارای کمترین ارزش مکانی در یک صفحه ی وب HTML می باشد.

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

بطور کلی در HTML ما ۶ نوع تیتر یا عنوان یا Heading میتونیم داشته باشیم که در دستورات زیر میتوانید آنها را مشاهده نمایید :

امتحان کنید

اگر بروی دکمه ی (امتحان کنید) کلیک نمایید همانطور که در خروجی این دستورات مشاهده مینمایید متن Free-Learn که در بین تگ H1 قرار گرفته است از بقیه تگ ها درشت تر می باشد، دلیلش این است که این متن در تگی قرار گرفته است که بیشترین ارزش مکانی را در یک صفحه ی HTML دارد.

Free-Learn

تگ های تیتر یا Heading در HTML مهم هستند

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

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

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

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

هیچوقت سعی نکنید با بزرگ کردن اندازه یک متن و یا برجسته (Bold) کردن آن، آنرا جای تگ های تیتر جا بزنید.

Free-Learn

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

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

بعد از تگ H1 ما باید از تگ H2 استفاده کنیم، که یعنی ای موتور جستجوگر بدان که بعد از عنوان H1 ، عنوان H2 برای من دارای ارزش محتوایی است پس بهش توجه کن.

و به همین ترتیب ما میتونیم از دیگر تگ های تیتر استفاده کنیم، یعنی بعد از تگ H2 از تگ H3 و H4 و H5 و H6 استفاده نماییم ، فقط نکته ای که هست اینه هرچقدر عدد H بیشتر بشه ارزش محتوایی اون عنوان درون یک صفحه کمتر و کمتر میشه.

Free-Learn

آیا محدودیتی در استفاده از تگ های تیتر وجود دارد؟

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

ولی محدودیتی برای استفاده از تگ های H2 تا H6 وجود ندارد، یعنی شما میتونید بفرض مثال در یک صفحه از ۴ تگ H2 و ۳ تگ H3 و ۴ تگ H4 و یا اصلا از تگ های H5 و H6 استفاده نکنید.

ولی این نکته رو باید توجه داشته باشید که زیاده روی از تگ های تیتر H2 تا H6 در یک صفحه به هیچ وجه خوب نیست و نباید زیاده روی کنید. بفرض مثال کل متن شما در یک صفحه ۲۰۰ کلمه هست بعد اومدید و از ۵ تگ H2 استفاده کرده اید که این تعداد نسبت به تعداد کلمات متن شما زیاده روی محسوب می شود.

پس همیشه سعی کنید به نسبت متن موجود خود ، از تگ های تیتر استفاده نمایید تا اینکار از نظر سئو و بطور کلی از نظر موتورهای جستجوگر همچون گوگل مورد پسند باشه.

Free-Learn

نحوه استفاده از تگ های تیتر در صفحه اصلی سایت

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

این رو خودتون هم میدونید که هر سایتی یک صفحه ی اصلی دارد که معمولا و بیشتر با نام Index نامگذاری می شود، و علاوه بر صفحه ی اصلی همیشه هم یک صفحه داریم به اسم صفحه مطالب یا نوشته های سایت که باز معمولا این رو هم با نام Single نامگذاری میکنند.

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

  • تگ های تیتر در صفحه ی اصلی سایت

در صفحه ی اصلی یک سایت ما باید نام سایت رو در تگ H1 قرار دهیم، نام سایت یا در واقع همون اسم اصلی سایت یا حتی مثلا لوگوی سایت و.. در هر صورت نام اصلی سایت در صفحه ی اصلی باید درون تگ H1 قرار بگیرد.

مطالب سایت که در صفحه ی اصلی قرار دارند نیز میتونن درون تگ های H2 یا H3 قرار بگیرند، و مطالب موجود در سایدبارها یا همون ستون های کناری سایت نیز میتونن در تگ H3 یا H4 قرار بگیرند.

برای مثال سایت های معروف خارجی که از تگ H1 در صفحه ی اصلی شان برای نام یا لوگوی سایت شان استفاده کرده اند : LinkedIn و MSN و از بین سایت های ایرانی نیز من خبرگزاری فارس و باشگاه خبرنگاران جوان رو انتخاب کردم که در صفحه ی اصلی سایت شان نام یا لوگوی سایت شان را در تگ H1 قرار دادند.

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

(برای مشاهده تصاویر در اندازه اصلی لطفا بروی آنها کلیک نمایید)

  • تگ های تیتر در صفحه مطالب یا نوشته های سایت

در صفحه ی مطالب سایت ما باید عنوان مطلب یا نوشته مون رو در بین تگ H1 قرار بدهیم و بعد از اون دیگه به راحتی متونیم از تگ های H2 تا H6 استفاده نماییم.

سوال : آقا پس چطور تو بعضی از سایت های معروف و پربازدید ایرانی اصلا در صفحه ی اصلی شون از تگ H1 استفاده نکردن؟

پاسخ : خب ممکنه اون رو مخفی کرده باشند چونکه به راحتی ما میتونیم با استفاده از صفت Hidden یک تگ رو مخفی نماییم و یا حتی ممکنه از تگ H1 استفاده نکرده باشند که پیشنهاد من این است حتما و حتما در هر صفحه از یک تگ H1 استفاده نمایید.

سوال : تو خیلی از سایت ها من میبینم که در صفحه ی اصلیشون مطالب شون درون تگ H1 قرار گرفته، یعنی در واقع توی صفحه ی اصلی اگه ۱۰ تا مطلب باشه ۱۰ تاش داخل تگ H1 قرار گرفته؟

پاسخ : در HTML4 ما در هر صفحه باید فقط از یک تگ H1 استفاده میکردیم ولی به لطف HTML5 ما میتونیم در هر یک از تگ های Article از یک تگ H1 استفاده نماییم، که این یعنی در یک صفحه میتونه بیش از چندین تگ H1 استفاده شود.

ادامه پاسخ : بنابراین اگه یک سایت از تگ های Article استفاده کرده باشد میتواند بیش از چندین تگ H1 نیز در یک صفحه استفاده نماید در غیر اینصورت بهتر است و حتما سعی کنید از فقط یک تگ H1 درون یک صفحه استفاده نمایید.

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

سوال : اگه یک سایت از تگ های تیتر اشتباه استفاده کرده پس چرا الان بین سایت های پربازدید می باشد؟ پس با این وجود زیاد مهم نیست که از تگ های تیتر استفاده بکنیم یا نه؟!

پاسخ : دوست عزیز من، هیچوقت این فکرو نکن، خب یک سایت میتونه با روش های مختلفی برای خودش بازدید جمع کنه برای مثال با استفاده از تبلیغات شما میتونی سایتتو معرفی کنی و در نتیجه بازدید بگیری و دیگر روش های تبلیغاتی.

ادامه پاسخ : در نتیجه وقتی شما شناخته بشید دیگه جایگاه شما و سایتتون پیش کاربران محفوظ خواهند ماند مگر اینکه شرایط خاصی به وجود بیاید.

ادامه پاسخ : شما باید ببینید آیا سئوی یک سایت برای صاحب اون سایت مهمه یا نه! برای من که مهمه و دارم بدون یک ریال هزینه تبلیغات کاری میکنم که مطالب سایتم در جستجوهای اول گوگل ظاهر بشه پس صددرصد نه تنها استفاده از تگ های تیتر بلکه موارد بیشتر و مرتبط با سئو را نیز رعایت میکنم.

سوال : آیا اگه فقط من از تگ های تیتر بخوبی استفاده کنم میتونم در موتورهای جستجوگر مثله گوگل نتیجه بگیرم؟

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

سوال : کاربر که متوجه نمیشه الان مثلا این متن تگ تیتر H1 است یا نه H6 پس من میتونم یک متن ساده رو اندازش رو بزرگ کنم که اندازه یک تگ تیتر بشه؟

پاسخ : بنظره شما مگه برای کاربران سایتتون مهمه که شما از تگ های تیتر H1 تا H6 استفاده کرده باشید یا نه!؟ شاید تعداد کمی از کاربران باشند که براشون تیتر بندی درون صفحه مهم باشه وگرنه برای چهارتایکی مهم نیست.

ادامه پاسخ : پس میتونیم بگیم که تمام وجود تگ های تیتر فقط برای موتورهای جستجوگر مثله گوگل می باشد و بعد از آن برای طبقه بندی محتوای یک صفحه می باشد. (برای خوانایی بهتر)

ادامه پاسخ : پس هیچوقت سعی نکنید خودتون یا سایتتون رو گول بزنید، تگ های تیتر در اولویت اول فقط برای موتورهای جستجوگر می باشد و برای اینکه سایت شما در موتورهای جستجو خودی نشون بده.

Free-Learn

آموزش تگ های تیتر در وردپرس

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

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

پس در کل و بطور کلی بدونید وردپرس یه نرم افزار یا یک سیستم تحت وب هست که ما با استفاده از اون میتونیم وبسایت راه اندازی کنیم و به مدیریت مطالب/محتوامون بپردازیم.

برای استفاده از تگ های تیتر در وردپرس ما کارمون خیلی راحت تره , چون دیگه نمیخواد بیایم و خودمون دستی تگ های تیتر رو تایپ کنیم (اینکه تو یه صفحه HTML بصورت دستی تگ هارو تایپ کنیم) بلکه فقط با یه کلیک تو وردپرس میتونیم اینکارو انجام بدیم.

وردپرس خودش بصورت پیش فرض تگ H1 رو ایجاد میکنه!؟ خب چجوری اینو ایجاد میکنه؟ بطور کلی بدونید هر مطلبی که در وردپرس ارسال بشه عنوان اون مطلب بصورت پیش فرض با تگ H1 ایجاد میشه.

البته این تنها به شرطی که تو قالب سایت شما , طراح اون قالب عنوان مطالب ارسالی وردپرس رو درون تگ H1 گذاشته باشه وگرنه اگه طراح اومده باشه و عنوان مطلب رو درون تگ P گذاشته باشه خب وقتی شما در وردپرس مطلبی ارسال کنید عنوان مطلب شما هم درون تگ P قرار خواهد گرفت.

پس اینکه میگم وردپرس خودش تگ H1 رو با عنوان مطلب درست/ایجاد میکنه حتما و باید این شرطی که گفتم رعایت شده باشه در غیراینصورت دیگه عنوان مطالب شما در وردپرس در H1 قرار نخواهد گرفت.

پس بعد از اون شما فقط باید از تگ های H2 تا H6 در مطلب تون استفاده نمایید وردپرس H1 رو دیگه خودش درست کرده که میشه همون عنوان مطلب مون پس دیگه لازم نیست H1 رو بزاریم تو مطلب مون که اگه اینکارو کنید کاره اشتباهی است و به ضرر سایتتون و سئوی سایتتون هست.

Free-Learn

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

خب حالا چجوری میتونیم از تگ های تیتر در وردپرس استفاده نماییم؟! خب برای اینکار شما باید به بخش نوشته ها > افزدون نوشته بروید یعنی در واقع میخوایم یه مطلب جدید در سایتمون ارسال نماییم.

آموزش تگ های تیتر یا Heading در HTML

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

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

آموزش تگ های تیتر یا Heading در HTML
برای مشاهده در اندازه اصلی لطفا روی تصویر کلیک نمایید

بعد از اون برای استفاده از تگ های تیتر H2 تا H6 باید بروی اون منوی بازشو که در تصویر بالا با رنگ سبز مشخص کردم (اونجایی که نوشته بند) کلیک کنید و سپس به راحتی از تگ های H2 تا H6 در مطلب تون استفاده نمایید.

آموزش تگ های تیتر یا Heading در HTML

Free-Learn

چگونه باید دید عنوان یک مطلب در چه تگی قرار دارد ؟!

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

خب میخوایم ببینیم چجوری میشه که بتونیم ببینیم عنوان یک مطلب در چه تگی , مثلا تگ H1 یا H2 یا غیره قرار دارد!

خب برای اینکار روی عنوان مطلب مورد نظرتون کلیک راست نمایید سپس بروی گزینه ی Inspect Element (در مرورگر فایرفاکس) و یا Inspect (در مرورگر کروم) کلیک نمایید.

برای مثال من روی عنوان همین مطلبی که شما در حال مطالعه اش هستید کلیک راست میکنم. (شما میتونید در هر سایتی هر وبلاگی و.. دوست داشتید روی عنوان مطلبش اینکارو انجام بدید)

آموزش تگ های تیتر یا Heading در HTML

بعدش یک پنجره کوچک در پایین مرورگر (فایرفاکس) باز میشه , که خیلی راحت در اونجا میتونید مشاهده نمایید که اون مطلب یا متنی که روش کلیک راست کردید در چه تگی قرار دارد.

آموزش تگ های تیتر یا Heading در HTML

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

Free-Learn

برای مثال من برای شما دوستان عزیز یک صفحه برای مطالب یا نوشته های سایت رو با استفاده از تگ های تیتر یا Heading در HTML تیتربندی کردم تا شما بهتر بتوانید با نحوه استفاده از این تگ ها در یک صفحه ی وب آشنا شوید.

امتحان کنید

Free-Learn

  • خلاصه ی این بخش
  • از تگ های تیتر برای مشخص کردن عناوین یا تیترهای مطالب در یک صفحه وب استفاده می شود.
  • تگ های تیتر بطور کلی ۶ عدد می باشند، از h1 تا h6 و متنی که درون تگ h1 قرار میگیرد یعنی دارای بیشترین ارزش مکانی در یک صفحه ی وب و متنی که درون تگ h6 قرار میگیرد یعنی دارای کمترین ارزش مکانی در یک صفحه ی وب.
  • در صفحه اصلی سایت بهتر است و پیشنهاد میکنم نام سایت یا لوگوی سایتتان را درون تگ H1 قرار دهید.
  • در صفحه ی نوشته های وبسایتتان نیز حتما و باید عنوان نوشته درون تگ H1 قرار بگیرد.
  • سعی کنید همیشه فقط و فقط از یک تگ H1 درون یک صفحه استفاده نمایید ولی میتوانید از تگ های H2 تا H6 با توجه به تعداد کلماتتان بصورت نامحدود استفاده نمایید.
  • در صفحه ی مطالب تان، بعد از تگ H1 سعی کنید از تگ های H2 تا H6 بصورت پله ای استفاده نمایید، یعنی بعد از تگ H2 از H3 و مرتبط با تگ H2 استفاده نمایید.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید