این آموزش در تاریخ ۱۴۰۲/۱۰/۱۲ آپدیت شده است.
آموزش تگ های تیتر یا Heading در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ های تیتر یا Heading در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 تگ های تیتر یا Heading در HTML
- 2 تگ های تیتر یا Heading در HTML مهم هستند
- 3 چگونه باید از تگ های H1 تا H6 در یک صفحه ی وب استفاده کنم؟
- 4 آیا محدودیتی در استفاده از تگ های تیتر وجود دارد؟
- 5 نحوه استفاده از تگ های تیتر در صفحه اصلی سایت
- 6 آموزش تگ های تیتر در وردپرس
- 7 نحوه استفاده از تگ های تیتر در وردپرس
- 8 چگونه باید دید عنوان یک مطلب در چه تگی قرار دارد ؟!
تگ های تیتر یا Heading در HTML
عناوین یا تیترها یا به انگلیسی Headings از مهمترین تگ ها در حوزه سئو در یک صفحه ی HTML می باشد، در واقع میشه گفت مهمترین بخش یک صفحه ی HTML برای بحث سئو و بهینه سازی همین تگ های تیتر می باشد.
بطور کلی در تمامی وبسایت های موجود در اینترنت از این تگ ها استفاده می شود، تیترها در HTML از طریق تگ های H1 تا H6 مشخص می شوند، تگ H1 دارای بیشترین ارزش مکانی و در مقابل تگ H6 دارای کمترین ارزش مکانی در یک صفحه ی وب HTML می باشد.
در واقع میشه گفت متنی که در تگ H1 قرار میگیرد یعنی خیلی مهم و دارای بیشترین ارزش می باشد و همینطور که به این عدد (H2,H3,H4,H5,H6) اضافه شود از ارزش آن متن در یک صفحه وب کاسته می شود.
بطور کلی در HTML ما ۶ نوع تیتر یا عنوان یا Heading میتونیم داشته باشیم که در دستورات زیر میتوانید آنها را مشاهده نمایید :
|
1 2 3 4 5 6 7 8 9 10 |
<body> <h1>سایت آموزشی فری لرن</h1> <h2>سایت آموزشی فری لرن</h2> <h3>سایت آموزشی فری لرن</h3> <h4>سایت آموزشی فری لرن</h4> <h5>سایت آموزشی فری لرن</h5> <h6>سایت آموزشی فری لرن</h6> </body> |
اگر بروی دکمه ی ( امتحان کنید ) کلیک نمایید همانطور که در خروجی این دستورات مشاهده مینمایید متن ” سایت آموزشی فری لرن ” که در بین تگ H1 قرار گرفته است از بقیه تگ ها درشت تر ( بزرگتر ) می باشد، دلیلش این است که این تگ بیشترین ارزش مکانی را در یک صفحه ی HTML دارد.
اینکه بخوایم مثلا سایز یه متن رو بزرگ کنیم و شبیه تگ H1 درش بیاریم هیچ ربطی نداره حا! اصلا بحث سایز و اندازه نیست، بارها گفتم بازم میگم، هرتگی که در زبان HTML می باشد برای هدفی ایجاد شده و ماهم باید دقیقا از هر تگ برای هدف مشخص شده استفاده کنیم.
مثلا اگه من بجای تگ H1 بیام و از تگ P استفاده کنم، خب در ظاهر که هیچ مشکلی نیست و در خروجی هم نشون میده و همه چی اوکی هست ولی اینکار تو بحث سئو و بهینه بودن محتوا کاملا اشتباه هستش ، اینکار از نظر مرورگرها و موتورهای جستجوگر اصلا قابل قبول نیست.
پس بازم میگم، هرتگی برای کاری ایجاد شده و ماهم باید از هرتگ در مکان مناسب استفاده کنیم تا کدنویسی مون تمیز و صفحه وبمون بهینه و معتبر باشه.
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 بیشتر بشه ارزش محتوایی اون عنوان درون یک صفحه کمتر و کمتر میشه.
استفاده از تگ های تیتر باید بصورت پله ای باشه، یعنی اگه از H1 استفاده کردید بعدش خواستید از H2 استفاده کنید، سعی کنید تاجایی که میشه اون متن داخل H2 مرتبط با H1 باشه و همینطور تا بره
مثال : الان در این مثال از تگ های H1 تا H6 استفاده شده.
|
1 2 3 4 5 6 7 8 9 10 |
<body dir="rtl"> <h1>آموزش تگ های تیتر</h1> <h2>معرفی تگ های تیتر H1 تا H6</h2> <h3>نحوه استفاده از تگ H2</h3> <h4>نحوه نوشتن تگ H2</h4> <h5>استفاده از تگ H2 در وردپرس</h5> <h6>محدودیت استفاده از تگ H2</h6> </body> |
Free-Learn
آیا محدودیتی در استفاده از تگ های تیتر وجود دارد؟
بله محدودیت وجود دارد ولی فقط برای تگ H1 ، شما همیشه باید فقط از یک تگ H1 درون صفحه استفاده کنید، یعنی شما اگر از دو تا تگ H1 درون یک صفحه استفاده کردید مثه اینه که دارید به ربات های گوگل میگید این ۲ تا عنوان برام مهمه و بهش توجه کن، خب گوگل زیاد حال نمیکنه با این حرکت و ممکنه بکل گوگل با سایت شما قهر کنه و به ضررتون میشه، میگه شما فقط از یه دونه H1 استفاده کن.
ولی محدودیتی برای استفاده از تگ های H2 تا H6 وجود ندارد، یعنی شما میتونید بفرض مثال در یک صفحه از ۴ تگ H2 و ۳ تگ H3 و ۴ تگ H4 و یا اصلا از تگ های H5 و H6 استفاده نکنید.
مثال شماره ۲ : استفاده از فقط تگ های H1 و H2 ( دیگه از H3 تا H6 استفاده نکردیم )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body dir="rtl"> <h1>آموزش زبان های طراحی وب</h1> <h2>آموزش زبان HTML</h2> <p>زبان HTML زبان مادر برای طراحی صفحات وب می باشد.</p> <h2>آموزش زبان CSS</h2> <p>زبان CSS دومین هسته طراحی وب و برای استایل دهی و طراحی ظاهر سایت می باشد.</p> <h2>آموزش زبان JavaScript</h2> <p>زبان جاوااسکریپت هم سومین هسته طراحی وب می باشد که با استفاده از اون میتوان سایت تعاملی تری داشته باشیم</p> </body> |
ولی این نکته رو باید توجه داشته باشید که زیاده روی از تگ های تیتر H2 تا H6 در یک صفحه به هیچ وجه خوب نیست و نباید زیاده روی کنید. بفرض مثال کل متن شما در یک صفحه ۲۰۰ کلمه هست بعد اومدید و از ۵ تگ H2 استفاده کرده اید که این تعداد نسبت به تعداد کلمات متن شما زیاده روی محسوب می شود.
پس همیشه سعی کنید به نسبت متن موجود خود ، از تگ های تیتر استفاده نمایید تا اینکار از نظر سئو و بطور کلی از نظر موتورهای جستجوگر همچون گوگل مورد پسند باشه.
Free-Learn
نحوه استفاده از تگ های تیتر در صفحه اصلی سایت
دوستان محترم باید به این نکته توجه داشته باشید که نحوه استفاده از تگ های تیتر در صفحه اصلی یک سایت با صفحات مطالب یا نوشته های اون سایت متفاوت است.
این رو خودتون هم میدونید که هر سایتی یک صفحه ی اصلی دارد که معمولا و بیشتر با نام Index نامگذاری می شود، و علاوه بر صفحه ی اصلی همیشه هم یک صفحه داریم به اسم صفحه مطالب یا نوشته های سایت که باز معمولا این رو هم با نام Single نامگذاری میکنند.
پس مطمئنا نحوه استفاده از تگ های تیتر در صفحه ی اصلی یک سایت با صفحه ی مطالب یا نوشته های اون سایت فرق میکند، که در ادامه من میخوام شمارو با چگونگی استفاده از تگ های تیتر در صفحه اصلی و صفحه مطالب سایت آشنا کنم.
- تگ های تیتر در صفحه ی اصلی سایت
در صفحه ی اصلی یک سایت ما باید نام سایت رو در تگ H1 قرار دهیم، نام سایت یا در واقع همون اسم اصلی سایت یا حتی مثلا لوگوی سایت و.. در هر صورت نام اصلی سایت در صفحه ی اصلی باید درون تگ H1 قرار بگیرد.
مطالب سایت که در صفحه ی اصلی قرار دارند نیز میتونن درون تگ های H2 یا H3 قرار بگیرند، و مطالب موجود در سایدبارها یا همون ستون های کناری سایت نیز میتونن در تگ H3 یا H4 قرار بگیرند.
- تگ های تیتر در صفحه مطالب یا نوشته های سایت
در صفحه ی مطالب سایت ما باید عنوان مطلب یا نوشته مون رو در بین تگ H1 قرار بدهیم و بعد از اون دیگه به راحتی متونیم از تگ های H2 تا H6 استفاده نماییم.
سوال : آیا اگه فقط من از تگ های تیتر بخوبی استفاده کنم میتونم در موتورهای جستجوگر مثله گوگل نتیجه بگیرم و سایتم بیاد رتبه اول؟
پاسخ : معیارهای سئوی یک سایت برای نمایش در صفحات اول گوگل فقط استفاده از تگ های تیتر نیست بلکه موارد دیگری نیز می باشد که شما باید آنها را رعایت کرده باشید تا بتوانید در گوگل خوب ظاهر شوید ولی بطور کلی بله استفاده صحیح از تگ های تیتر خیلی تاثیر مثبت دارد.
سوال : کاربر که متوجه نمیشه الان مثلا این متن تگ تیتر H1 است یا نه H6 پس من میتونم یک متن ساده رو اندازش رو بزرگ کنم که اندازه یک تگ تیتر بشه؟
پاسخ : بنظره شما مگه برای کاربران سایتتون مهمه که شما از تگ های تیتر H1 تا H6 استفاده کرده باشید یا نه!؟ شاید تعداد کمی از کاربران باشند که براشون تیتر بندی درون صفحه مهم باشه وگرنه برای چهارتایکی مهم نیست.
ادامه پاسخ : پس میتونیم بگیم که تمام وجود تگ های تیتر فقط برای موتورهای جستجوگر مثله گوگل می باشد و بعد از آن برای طبقه بندی محتوای یک صفحه می باشد. (برای خوانایی بهتر)
ادامه پاسخ : پس هیچوقت سعی نکنید خودتون یا سایتتون رو گول بزنید، تگ های تیتر در اولویت اول فقط برای موتورهای جستجوگر می باشد و برای اینکه سایت شما در موتورهای جستجو خودی نشون بده.
Free-Learn
آموزش تگ های تیتر در وردپرس
وردپرس یک نرم افزار تحت وب هست که به اصطلاح بهش میگیم نرم افزار مدیریت محتوا ، که با استفاده از وردپرس ما میتونیم بیایم و یک وبسایت رو در کمتر از چند دقیقه راه اندازی نماییم.
وقتی سایتمون رو با وردپرس راه اندازی کردیم بعد از اون به راحتی میتونیم بیایم و مطلب ارسال کنیم و خیلی امکانات دیگه که تو وردپرس ما میتونیم داشته باشیم.
پس در کل و بطور کلی بدونید وردپرس یه نرم افزار یا یک سیستم تحت وب هست که ما با استفاده از اون میتونیم یک وبسایت رو به راحتی راه اندازی کنیم و به مدیریت مطالب / محتوامون بپردازیم.
برای استفاده از تگ های تیتر در وردپرس ما کارمون خیلی راحت تره ، چون دیگه نمیخواد بیایم و خودمون دستی تگ های تیتر رو تایپ کنیم (اینکه تو یه صفحه HTML بصورت دستی تگ هارو تایپ کنیم) بلکه فقط با یه کلیک تو وردپرس میتونیم اینکارو انجام بدیم.
وردپرس خودش بصورت پیش فرض تگ H1 رو ایجاد میکنه!؟ خب چجوری اینو ایجاد میکنه؟ بطور کلی بدونید هر مطلبی که در وردپرس ارسال بشه عنوان اون مطلب بصورت پیش فرض با تگ H1 ایجاد میشه.
البته این تنها به شرطی که تو قالب سایت شما ، طراح اون قالب عنوان مطالب ارسالی وردپرس رو درون تگ H1 گذاشته باشه وگرنه اگه طراح اومده باشه و عنوان مطلب رو درون تگ P گذاشته باشه خب وقتی شما در وردپرس مطلبی ارسال کنید عنوان مطلب شما هم درون تگ P قرار خواهد گرفت.
پس اینکه میگم وردپرس خودش تگ H1 رو با عنوان مطلب درست/ایجاد میکنه حتما و باید این شرطی که گفتم رعایت شده باشه در غیراینصورت دیگه عنوان مطالب شما در وردپرس در H1 قرار نخواهد گرفت.
پس بعد از اون شما فقط باید از تگ های H2 تا H6 در مطلب تون استفاده نمایید وردپرس H1 رو دیگه خودش درست کرده که میشه همون عنوان مطلب مون پس دیگه لازم نیست H1 رو بزاریم تو مطلب مون که اگه اینکارو کنید کاره اشتباهی است و به ضرر سایتتون و سئوی سایتتون هست.
Free-Learn
نحوه استفاده از تگ های تیتر در وردپرس
خب حالا چجوری میتونیم از تگ های تیتر در وردپرس استفاده نماییم؟! خب برای اینکار شما باید به بخش نوشته ها > افزدون نوشته بروید یعنی در واقع میخوایم یه مطلب جدید در سایتمون ارسال نماییم.
بعد از اون وارد یه محیط نوشتاری می شوید یعنی در واقع یه ادیتور با یکسری امکانات که بتونید یه مطلب در آن تایپ و ارسال نمایید.
همونطور که گفتم عنوان مطلب مون خودش بصورت پیش فرض H1 میشه پس همانند تصویر زیر در بخش عنوان باید عنوان اصلی مطلب تون رو وارد نمایید که این عنوان با تگ H1 در سایتتون به نمایش درخواهد آمد.
بعد از اون برای استفاده از تگ های تیتر H2 تا H6 باید بروی اون منوی بازشو که در تصویر بالا با رنگ سبز مشخص کردم (اونجایی که نوشته بند) ( در نسخه های قدیمی تر وردپرس ) کلیک کنید و سپس به راحتی از تگ های H2 تا H6 در مطلب تون استفاده نمایید.
Free-Learn
چگونه باید دید عنوان یک مطلب در چه تگی قرار دارد ؟!
خب ما این همه گفتیم عنوان مطالب در یک سایت باید در تگ H1 قرار داشته باشه و اگه نباشه این یعنی اون سایت اصلا معتبر و بهینه نیست حالا چه از نظر طراحی و چه سئو و…
خب میخوایم ببینیم چجوری میشه که بتونیم ببینیم عنوان یک مطلب در چه تگی , مثلا تگ H1 یا H2 یا غیره قرار دارد!
خب برای اینکار روی عنوان مطلب مورد نظرتون کلیک راست نمایید سپس بروی گزینه ی Inspect Element ( در مرورگر فایرفاکس ) و یا Inspect ( در مرورگر کروم ) کلیک نمایید.
برای مثال من روی عنوان همین مطلبی که شما در حال مطالعه اش هستید کلیک راست میکنم. ( شما میتونید در هر سایتی هر وبلاگی و.. دوست داشتید روی عنوان مطلبش اینکارو انجام بدید )
بعدش یک پنجره کوچک در پایین مرورگر ( فایرفاکس ) یاهم سمت راست یا چپ مرورگر ( گوگل کروم ) باز میشه ، که خیلی راحت در اونجا میتونید مشاهده نمایید که اون مطلب یا متنی که روش کلیک راست کردید در چه تگی قرار دارد.
و همانطور که مشاهده مینمایید عنوان این مطلبی که در حال مطالعه آن هستید در تگ H1 قرار دارد.
