با عرض سلام خدمت تمامی دنبال کنندگان مباحث طراحی سایت با 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 را به صورت درون خطی یا inline level نمایش می‌دهند .
نقش واهمیت تگ h1 تا h6 در سئو سایت
توجه داشته باشید که تگ های h1 تا h6 در سئو و بهینه سازی سایت بسیار اهمیت دارند و برای فهماندن قسمت‌های مهم سایت به موتورهای جست و جو از این تگ‌ها استفاده می‌شود. برای آشنایی بیشتر با مباحث بهینه سازی و سئو پیشنهاد میکنم مقالات آموزشی سئو سایت میزفا را به هیچ عنوان از دست ندهید.
تگ H1 در SEO
برای نمایش عنوان صفحه در سند HTML باید از تگ H1 استفاده نمایید. توجه داشته باشید که بسیار پر اهمیت است که حداقل و حداکثر یک تگ H1 در صفحه شما باید موجود باشد، نه کمتر و نه بیشتر فقط و فقط یک تگ H1.
تگ H2 تا H6 در SEO
در هر سند HTML بهتر است که از تگ های زیر مجموعه تگ H1 نیز استفاده کنید و تگ های H2 را به عنوان تیتر های اصلی و تگ های H3 را به عنوان تیتر های فرعی و زیر مجموعه تیتر های H2 استفاده نمایید. همچنین از تگ های تیتر کم اهمیت تر نیز میتوانید استفاده کنید.
پایانترم
سوال:
برای عبارات زیر، تگ های تیتر صحیح را مشخص کنید.
عنوان اصلی : آموزش کار با Cpanel
تیتر های اصلی : ۱ – فایل منیجر ۲ – دیتابیس ۳ – سرویس ایمیل
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
نتیجه گیری
خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم. درصورتی که سوالی داشتید حتما در قسمت نظرات این مقاله آموزشی مطرح کنید.
درسته؟
سلام علی اکبر، بله درسته. ممنونم
پاسخ سوال :
سلام محمد، عالی نوشتی، هدیه‌ات را به زودی دریافت میکنی. از اینکه انقدر خوب داری ادامه میدی خیلی خوشحالم. ادامه بده.
با سلام. پرسیده بودم که آیا میشه کاری کرد که h2 یاh3 رو وارد کنیم ولی کاری کنیم که تو سایت نشون داده نشه . در جوابم پرسیدید که چرا میخوام نشون داده نشه . علتش اینه که ظاهر سایت من بگونه ای که اگه h3 تو سایت ظاهر بشه ظاهر سایت رو زشت میکنه.حالا اگه ممکنه بگید که چجوری میتونم وقتی برای بهبودی سئوی سایتم وارد کردن h3 لازم است کاری کنم که h3در سایت نمایش داده نشه و ظاهر سایت رو زشت نکنه؟ ممنون
اسی
سلام اسی، باید حتما نمایش داده بشه وگرنه اگر کاری کنی که نمایش داده نشه گوگل جریمه میکنه وب سایتت رو.
میتونی از خاصیت hidden=”true” یا از استایل display:none استفاده کنی که نمایش داده نشه ولی دو سه باری هست که داریم بهت میگیم این کار باعث میشه که وب سایتت توسط گوگل جریمه بشه. در کل خودت میدونی.
سلام . پرسیده بودم که آیا میشه کاری کرد که مثلاً h2 رو در کدهامون وارد کنیم ولی توی سایت نمایش داده نشه .وشما گفتید چرا باید چنین کنیم.
حالا چراش رو می خوام بگم . شما فرض بفرمایید که یک سایت برای یه شرکت لیفتبرایداریم مینویسیم حالا میخواهیم h1رو بزاریم خرید و فروش لیفتراک و بقیه اچ ها رو بزاریم تعمیر لیفتراک. تعویض لیفتراک .نگهداری و اجاره لیفتراک درسته که اینها از نظر سئو خیلی خوبه و باید وارد کنیم که البته ما هم به دلیل کسب رتبه بهتر در گوگل میخواهیم همین کار رو بکنیم ولی اگه توی سایت نمایش داده بشه ظاهر سایت را کمی زشت میکنه پس با وجود اینکه می خواهیم اچ ها رو در کد هامون وارد کنیم ولی نمیخوایم در خود سایت نمایش داده بشه .حالا که اینقدر سرتون رو درد آوردم به چند سوال زیر نیز پاسخ دهید:
1-چیکار کنیم که مثلا با وجودی که اچ 2 را در کدهامون وارد کردیم ولی در سایت نمایش داده نشه؟
2- آیا موتور جستوجوگر گوگل کدهامون رو بررسی میکنه یا خود سایت رو؟
3-آیا اگه اچ دو رو در کهامون وارد کنیم ولی کاری کنیم که در سایت نمایش داده نشه از نظر سئو تاثیرش کمتر از حالت معمولی میشه؟
سلام اسی عزیز، این کار رو اصطلاحا بهش میگن Cloacking و از نظر گوگل تخطی از قانون هست. بله گوگل کد های شما رو بررسی میکنه و اگر بخواین اون محتوا رو از دید کاربر پنهان کنید ولی توی سئو تاثیر داشته باشه، شما رو جریمه میکنه.
اگر فکر میکنی زشت میشه خب باید یه کاری زشت نشه و کاربر لذت ببره از تو وب سایت تو بودن.
باسلام . لطفاً به سوالاتی که در ادامه نوشتم پاسخ دهید:
1-چیکار میتونم بکنم که h1 وh2وh3سایز نوشتنشون کوچک و کوچکتر نشه؟(یعنی میشه داخل چیزی گذاشتش مثلاً داخل تگی چیزی گذاشتش و بهش فونت سایز داد؟)چطوری؟
2-آیا اگر طبق سوال بالا مثلاًh2را بهش از روشی که خواهید گفت فونت سایز بدیم نزد گوگل اهمیتش از اینکه داخل چیزی نذاریمش و بهش فونت سایز ندیم کمتره؟
3- اگه بخوام h3 رو مشخص کنم بطوری که داخل سایتم نوشته h3 معلوم نباشه راهی هست ؟اگه هست راهش چیه؟
اگه متوجه سوال 2 نمیشید به صدایی که ذبط کردم گوش بدید چون در قالب سخن بهتر میتونم منظور سوال 2 رو بیان کنم.
سلام اسی
۱ – آموزش های سی اس اس بخون.
۲ – فونت و تغییر اندازه ریطی به سئو نداره ولی اگر اندازه نوشته ها و عنوان ها کوچک باشه و نشه خوند اثر منفی در سئو داره.
۳ – چرا باید چنین کنی؟ h3 باشه و کاربر بفهمه چی میشه مگه؟ درضمن توی کدها کاربر باید بره تا متوجه بشه.
لام خسته نباشید من تگ h1 ام رو به دلیل هایی مخفی کرده بودم . بعد تو صفحه یک h1 میساختم عین و کپی همون عنوان صفحه ک بتونم بهتر شخصی سازی کنم.
بعد یواست سئو میگفت تو دوتا h1 داری بعد سایت آنالیز سئو میگفت یدونه…
آخرش نفهمیدم چیکار کنم و همون روال ک بابا گفتم رو کردم.
بعد الان یک کار دیگه کردم. h1 رو از تنظیمات المنتور گزینه داره مخفی کردن عنوان مخفی کردم و ی سایت آنالیز سئو میگه h1 ندارد.
الان من نمیدونم دقیقا چیکار کنم.
یکی کار بلد میتونه بگه فرق این دوتا صفحه کدوم درست تگ h1 اش گذاشته شده ؟؟ این ربات ها درست کار نمیکنن…
آخه دوتا h1 بودن ضربه بدی به سئو میزنه.
این صفحه رو طوری ساختم که h1 مخفی هست
لینک اول
این صفحه رو هم عنوان رو با المنتور عنوانش رو مخفی کردم و یک عنوان h1 داخل صفحه به عنوانم دادم.
لینک دوم
کسی هست بدونه این از دید گوگل چطور شناسایی میشه ؟ عنوان مخفی شده رو حساب میکنه یا بدون عنوان حساب میکنه ؟؟
مورد دومم رو دوتا h1 حساب نکنه ؟
خواهشا سایت آنالیز اینا نرید بگید این برام خیلی زیاد مهمه و من تو هر زمینه ای خیلی سعی کردم عالی کار کنم بخصوص سرعت اینا . این تگ رو نفهمیدم اخرش.
یکی کابلد تروخدا راهنمایی کنه براش دعا میکنم
کدوم یکی درسته ؟ اونکه عنوان مخفی هست ؟
یا اونکه عنوان مخفی شده و یک عنوان h1 دیگه ای ساخته شده تو صفحه ؟
سید رسول عزیز سلام، من کامل کد های هر دوتا لینک رو چک کردم و توی لینک هایی که فرستادی یک صفحه در رابطه با هاست و دامنه یعنی چی؟ بود. اون صفحه از نظر ساختاری مشکلی از نظر تگ H1 نداره و همون برای SEO اوکی هستش.
با سلام.
نام استعاری من اسی است . شما نیز میتوانید با این نام با من صحبت کنید.
من میدونم که توی این سایت نیت بر آموزش طراحی سایت است. اما می خوام راستش یه سوالی خارج از این موضوع بپرسم و اون اینه که اگر من بخوام سایت خودم رو روی هاستی در کامپیوتر قدیمی یا جدیدی داشته باشم باید چیکار کنم ؟ توی اینترنت هم سرچ کردم برنامهfreenas8معرفی شد ولی چگونه باید سایت رو روش بار گذاری کرد رو توضیح نداده بودن و چطوری میشه دامین رو روش تعریف کرد هم توضیح داده نشده بود ممنون میشم کمکم کنید
ممنون
اسی
سلام احسان.
همه این مواردی که گفتی در قالب چند تا متن نمیشه بهت گفت. همه تخصصی هستن و نیاز به متخصص هست.
برای اینکه نیاز به متخصص نداشته باشی بهتره از هاست استفاده کنی. هاست یک بستری هست که از قبل آماده هست تا بتونی به راحتی سایتت رو اپلود کنی و به بقیه نمایش بدی.
سلام
در صورت امکان در موارد زیر راهنمایی بفرمایید :
تعداد مجاز استفاده از تگ ها غیر از تگ 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 باشه.