سرفصل‌های پست
آموزش طراحی سایت با HTML
با عرض سلام خدمت تمامی دنبال کنندگان مباحث طراحی سایت با HTML از سری آموزش‌های سایت میزفا ، در جلسه گذشته به معرفی تگ hr پرداختیم در این جلسه از آموزش HTML قصد داریم شما را با تگ h1 تا h6 در HTML که به منظور ایجاد سرتیتر یا عنوان در HTML به کار میروند، آشنا نماییم.
معرفی تگ h1 تا h6
از تگ های h1 تا h6 برای ایجاد یک تیتر یا عنوان در HTML استفاده می‌شود، به این تگ‌ها ، تگ‌های heading گفته می‌شود و در دسته‌ی تگ های قالب بندی متن جای می‌گیرند.
تگ های h1 تا h6 بر اساس درجه اهمیت در شش سایز (h1 , h2 , h3 , h4 , h5 , h6) استفاده میشوند و درجه اهمیت از h1 به h6 کاهش می‌یابد یعنی تگ h1 دارای بیشترین اهمیت و تگ h6 دارای کمترین اهمیت از دید موتورهای جست و جو است پس سعی کنید در استفاده از تگ ها در طراحی وبسایت خود نهایت دقت را داشته باشید.
برای درک بهتر کاربرد تگ های h1 تا h6 در طراحی سایت به مثال زیر توجه کنید :
<h1> Mizfa.com </h1> <h2> Mizfa.com </h2> <h3> Mizfa.com </h3> <h4> Mizfa.com </h4> <h5> Mizfa.com </h5> <h6> Mizfa.com </h6>
صفات تگ h1 تا h6
تگ های heading دارای صفت‌ھای class ، id ، style ، title ، dir ، lang و align ھستند که در جدول زیر به بررسی صفت های تگ h1 تا h6 خواھیم پرداخت:
| صفت ها | مقدار | توضیحات |
|---|---|---|
| align | left center right justify | این صفت در HTML5 پشتیبانی نمی‌شود . صفت align نحوه چینش متن درون تگ h1 تا h6 را کنترل میکند و چهار مقدار left ، center ، right و justify را به عنوان مقدار می‌پذیرد .
|
بقیه صفت ھا نیز جزء صفات عمومی ھستند که قبلا آنھا را معرفی کرده ایم.
نقش واهمیت تگ h1 تا h6 در سئو سایت
توجه داشته باشید که تگ های h1 تا h6 در سئو و بهینه سازی سایت بسیار اهمیت دارند و برای فهماندن قسمت‌های مهم سایت به موتورهای جست و جو از این تگ‌ها استفاده می‌شود. برای آشنایی بیشتر با مباحث بهینه سازی و سئو پیشنهاد میکنم مقالات آموزشی سئو سایت میزفا را به هیچ عنوان از دست ندهید
نکات تکمیلی در مورد تگ h1 تا h6
- تگ h1 تا h6 توسط تمامی مرورگرها پشتیبانی میشوند .
- تمامی مرورگرها به صورت پیش فرض تگ های h1 تا h6 را به صورت درون خطی یا inline level نمایش می‌دهند .
خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم. درصورتی که سوالی داشتید حتما در قسمت نظرات این مقاله آموزشی مطرح کنید.
سلام
در صورت امکان در موارد زیر راهنمایی بفرمایید :
تعداد مجاز استفاده از تگ ها غیر از تگ h1 که شامل (h2 تا h6) میشوند هر کدام یکبار در یک صفحه هست ؟
کدام ابزار معتبر سئو تعداد و تکراری بودن استفاده از تگ های headling ارایه می کند ؟
سلام هادی.
به مقدار لازم باید استفاده بشه تعداد نداره. مثل نمک در غذا.
ابزارهایی مثل Screaming Frog یا ahrefs
سلام من توضیحات تگ H1 نمی دانم کجای ورد پرس بنویسم
سلام حسن.
همون عنوان صفحه میشه.
سلام خسته نباشید جناب آریافر
پوزش میخواستم ببینم اگر فونت تگ هارو کوچیکتر کنیم مشکلی پیش نمیاد؟
برای مثال تگ h3 مقداری بزرگ هست و وقتی استفاده میکنیم جالب نیست برای مقاله اینکه از طریق css بر اساس نیاز سایز هرکدام از تگ هارو کوچیکتر کنیم مشکلی نداره؟گوگل ایرادی نمیگیره؟
سوال دوم منظور از نمودار به ترتیب برای استفاده از تگ ها در مطلب دقیقا به چه شکله؟ برای مثال عنوان مطلب خودگار به صورت h1 قرار میگیره ما داخل مطلب از h2 استفاده میکنیم بعدش h3 و بعد h4 حالا بعد از h4 بخوایم مجدد از h3 استفاده کنیم باید بریم از ابتدا شروع کنیم دوباره؟ یا نه تگ h2 ابتدایی که قرار دادیم شامل این هم میشه و ما میتونیم استفاده کنیم برای مثال به شکل زیر مشکلی نداره استفاده کنیم؟
h2
h3
h4
h4
h3
h4
به این شکل اصولی هست یا هربار میخوایم از تگی استفاده کنیم باید بریم از h2 شروع کنیم؟
سلام مسعود.
بستگی داره چقدر کوچیک بشه. اگر طوری باشه که به سختی دیده بشه جدا از اینکه تجربه کاربری بدی داره باعث میشه سئوی سایت شما هم تحت تاثیر قرار بگیره و اگر این موارد زیاد بشه میتونه حتی پنالتی در گوگل رو هم شامل بشه.
دومی:
بستگی به عنوان ها و زیر عنوان ها داره. اینکه ترتیب چطوری باشه از نظر سئو محدودیت خاصی نداریم. مثلا من دو تا عنوان اصلی داخل مقاله دارم میشه h2 و بعد هر کدوم از اینا میتونه h3 داشته باشه و هر کدوم از h3 ها میتونه h4 داشته باشه.
تو مثالی که زدی زمانی باید بری سراغ h2 که این h2 جدیده از نظر موضوعی به بزرگی h2 قبلی هست.
سلام خسته نباشید
اگر ممکن است مطلبی معرفی بفرمایید تا اطلاعات بیشتری در رابطه با تگ ها کسب کنم.
با تشکر
سلام، اگر با لپ تاپ یا PC هستید سمت راست مشاهده کنید کلی مقاله درباره تگ ها موجوده.
یه سوال دیگه اینکه آیا ما میتونیم برای ساخت منو و زیرمنو در header فقط از nav استفاده کنیم و از ul و li استفاده نکنیم؟
سلام علیرضای عزیز، بله میتونی این کار رو انجام بدی، همه این موارد بستگی به نوع استایل دهی خودتون در CSS داره. ساختاری که به صورت استاندارد تعریف شده برای HTML5 میگه که بخش Header بهتره کامل داخل تگ header قرار بگیره ولی با اینحال شما به عنوان طراح صفحات وب خودت میتونی تعیین کنی که صفحه چه استانداردی رو رعایت کنه. شاید خودت یک نوع استاندارد برای طراحی صفحاتت در نظر داری با اینحال این هم درسته. با تمام این ها من به شخصه پیشنهاد میکنم که استاندارد HTML5 رو برای صفحاتت رعایت کنی.
سلام. وقت بخیر. آیا امکانش است که محتوای درون h1 را یک لینک قرار بدیم؟ یعنی از نظر سئو مشکلی پیش نمیاد؟
سلام علیرضا.
نه مشکلی نداره. اصولا یا کل h1 لینک هست و یا اصلا لینک نیست.
سلام می خواستم بدونم چطور نمی تونم نام محصول در صفحات محصول رو تگ h1 تبدیل کنم
در صفحه محصول نام رو که inspect می گیرم در .tpl محصولات که سرچ می کنم که پیداش کنم نیست که تگ h1 رو اضافه کنم.
ممنون میشم راهنمایی کنین. ما در حال حاضر سایت پرستاشاپی داریم.
سلام وقت بخیر. برای هر قالب و سایتی فرق داره و باید یک برنامه نویس بتونه این مورد رو برای شما پیاده سازی کنه.
سلام ممنون از اینکه پاسخگو هستید .
آدرس سایت softpluse.ir هستش.
من توی صفحه اول سایت آدرس سایت رو بعنوان تگ h1 درج کردم . اما چند تا سوال و مشکل در این زمینه دارم .
اول اینکه چه جوری میشه سایز این تگ h1 رو کوچک کرد چون اگه به آدرس سایت برید می بینید که نمایش این تگ نمود خوبی نداره .
دوم اینکه توی صفحات دیگر سایت کهمطالب در اونها منتشر میشه هم این تگ و هم تگ عنوان مقاله بصورت h1 شناخته میشه . چه جور باید این مشکل رو حل کرد ؟
سلام علی.
درباره سوال اول که باید به دنبال آموزش CSS باشی تا بتونی تغییر بدی.
سوال دوم هم ساده هست و شما در داخل متن از h1 استفاده نکن. به احتمال زیاد وقتی عنوان در وردپرس میزنی خودش تبدیل به H1 میشه.
با سلام
من سایتم رو با استفاده از ابزارهای آنلاین از لحاظ سئو چک می کنم همه میگن که تگ h1 رو نداره وقتی تگ h1 رو اضافه می کنم این خطا حذف میشه اما مشکلی که بوجود میاد اینکه برای صفحات داخلی عنوان هر مطلب هم باید بصورت h1 باشه و این باعث میشه که توی یک صفحه دو تا h1 داشته باشم چطور میشه مشکل رو حل کرد ممنون میشم اگه پاسخ بدین
سلام علی. باید کدهای اون صفحه رو نگاه کنی و ببینی اگر h1 نداره اضافه کنی. درضمن ابزارهای انلاین سئو بدون مشکل نیستن. ادرس قسمتی که مشکل داره رو بفرس تا بهتر بتونم راهنمایی کنم.
سلام و خسته نباشید
داخل متن وقتی میخام h1 بزنم یاست میگه استفاده کردی و استفاده نکن فکر میکنم تایتل اصلی رو قالبم h1 میکنه
از طرفی وقتی h1 نمیزنم سایت ماز میگه h1 نزدی
کدوم یک از اینا درست میگن؟ ماز یا یاست؟
سلام، وقتتون بخیر
با توجه به فرمتی که وردپرس در ساختار خود دارد، تمامی تایتل ها در صفحه با تگ H1 معرفی میشوند.
ممکن است که پوسته شما شخصی سازی شده باشد و تایتل در صفحه نمایش داده نشود یا با شخصی سازی از تگ های دیگری به جز تگ H1 برای معرفی تایتل استفاده کرده باشند.
این موضوع را در پوسته خود بررسی کنید و اگر در صفحه نهایی شما تایتل با تگ H1 معرفی شده بود، افزونه Yoast درست بیان کرده است.(که در بیشتر مواقع درست است).
اگر بر عکس این مورد بود Moz پاسخ درست را به شما داده است.
از پیامتون متشکرم.
سلام .ممنون از سایت خوبتون
چطوری یک مطلب تلگرام رو بدون پیوندهاش میشه به دیگران ارسال کرد؟
سلام. دامنه رو تقریبا ۱ ماه هست ثبت کردید. پیشنهاد میکنم به این زودی لینک سازی رو شروع نکنید.
سلام
میشه راهنمایی کنید سایت من مشکلش کجاست ممنون میشم
سلام، به اندازه تعداد مولکول‌های جهان ما مشکلات داریم، دقیق‌تر طرح مسئله کنید.
سلام. من قواعد تگ ها رو رعایت میکنم. h1 h2 h3 و … اما موقع چکاپ سایت فقط میزنه شما از تگ ۲ استفاده کردین!. مشکل از کجاست چطور میشه رفعش کرد. ممنونم.
سلام، لطفا آدرس سایت رو هم درج کنید تا بهتر بتونیم به شما کمک کنیم.
cleftlipiran.com
سپاس از شما
من بررسی کردم، صفحه اول شما تگ h1 نداره ولی مقاله های شما ۲ تا داره، مثلا مقاله “توصیه‌های بعد از عمل بینی” یک بار خوده قالب اضافه کرده این تگ h1 رو و یک بار هم خوده شما در متن اضافه کردید و این موضوع در استانداردهای سئو جا نداره و باید حداکثر یک بار از تگ h1 استفاده کرده باشید. از طرفی موقع چک کردن سایت شما حتما فقط صفحه اصلی رو برای بررسی انتخاب میکنید و برای همین چون در صفحه اصلی از تگ h1 استفاده نشده پیغام میده و میگه استفاده نکردید.
مثلا میتونید از صفحه اصلی اسم سایت رو به عنوان h1 قرار بدید. در بقیه صفحات بهتره عنوان مقاله h1 باشه.