استفاده مناسب از تگهای Heading

اهمیت تگ های h1,h2,h3,h4,h5,h6 در چینش صفحات وب سایت


امیر سروری ۱۵ دیدگاه HTML , استاندارد وب سایت , اصول طراحی وب سایت یکشنبه, ۲۳ام مرداد , ۱۳۹۰ 17894 بازدید

اهمیت تگ های h1,h2,h3,h4,h5,h6 در چینش صفحات وب سایت

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

همه طراحان وب سایت از اهمیت تگهای Heading در بهینه سازی وب سایت برای موتورهای جستجو آشنا هستند اما آیا کاربرد این تگها فقط در بهینه سازی وب سایت خلاصه شده است ؟ آیا از ابتدا این تگها فقط برای بهینه سازی وب سایت طراحی شده اند ؟

مفهوم و اهمیت استفاده از تگهای Heading که شامل تگهای h1,h2,h3,h4,h5,h6 می شود و به ترتیب از درجه اهمیت بیشتر به کمتر می رسند چیزی فراتر از استفاده آنها فقط برای بهینه سازی وب سایت است .

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

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

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

Heading-tag-webtarget.ir

Heading-tag-webtarget.ir

با توجه به نمودارها درک این قضیه بسیار ساده تر خواهد شد . نمودار درختی نشان دهنده درجه اهمیت هر یک از تگهای h1,h2,h3,h4,h5,h6 را مشخص نموده است و در نمودار و شکل دوم یک تقسیم بندی فرضی از یک صفحه وب سایت بر اساس درجه اهمیت مطالب و استفاده از تگهای Heading مشخص شده است .

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

از انجام اشتباهات زیر در استفاده از تگهای Heading اجتناب کنید

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

دلیل دیگر نیز اهمیت تگهای Heading برای موتورهای جستجو است که دیگر همگی با این موضوع آشنا هستیم و از اهمیت این تگها برای موتورهای جستجو با خبریم . یک تگ p تغییر شکل یافته نمیتواند نقش یک تگ Heading را برای موتورهای جستجو داشته باشد .

ساختار نا مناسب و غیر آبشاری در رعایت درجه اهمیت تگهای Heading و محتوای وب سایت علاوه بر گیج کننده بودن برای مخاطب میتواند موتورهای جستجو را نیز گیج کند و این باعث خواهد شد که مهمترین مطالب وب سایت شما مورد توجه یک موتور جستجو قرار نگیرد و یا یک موضوع با درجه اهمیت کمتر برای شما به طور اشتباه برای یک موتور جستجو دارای درجه اهمیت بیشتری گردد .

استفاده بیش از حد و غیر استاندارد نیز میتواند باعث گیج کننده شدن محتوا برای مخاطبان گردد و همچنین باعث جریمه شدن وب سایت شما برای موتورهای جستجو .سعی کنید از اندازه های استاندارد تعریف شده برای این تگها به صورت استاندارد استفاده کنید . به این معنا که تگ h1 از نظر اندازه و رنگ باید بزرگ ترین و پررنگ ترین باشد و این درجه به ترتیب تا تگ h6 ادامه یابد . یکسان نمودن تگهای Heading از نظر اندازه و گاهی رنگ و فونت می تواند برای مخاطبان شما گیج کننده باشد . این اندازه و درجه اهمیت باید به صورت یکسان در وب سایت اعمال شود .

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



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۵ دیدگاه برای این نوشته ثبت شده است


  1. علی
    ۲۵ مرداد ۱۳۹۰

    سلام .
    من مدرس و طراح وب سایت هستم
    خیلی خیلی وب سایت عالی و مفیدی دارید ممنونم از زحماتتون




  2. میلاد
    ۲۰ شهریور ۱۳۹۰

    مرسی خیلی عالیه کلی مطلب مفید بدرد بخور یاد میگیریم.




  3. kourosh
    ۲۸ شهریور ۱۳۹۰

    بسیار عالی بود مطلبتون ، فقط یه سوال ، تا چه حد میشه تگ های h رو با css تغییر داد . تغییر اندازه فونت ، رنگ و نحوه نمایششون . یا اگر هم بخوایم توی html لینکشون کنیم به جایی . این کار ها باعث نمیشه که از اهمیتشون برای search engine ها کم بشه ؟




    • امیر سروری
      ۲۸ شهریور ۱۳۹۰

      kourosh @ سلام و ممنون . شما میتونید هر تغییری رو روی تگ h اعمال کنید اما دو نکته هست .

      نکته اول اینکه : تغییر بیش از اندازه تگ باعث میشه هنگامی که به هر دلیلی استایل ها لود نمیشن توی صفحه شما ( مثل فید ) صفحه شما به هم بریزه پس بهتره از استایل های خود تگ h با کمی تغییر در رنگ و یا اندازه استفاده کنید .
      نکته دوم اینکه : برای لینک کردن این نکته رو در نظر داشته باشید که هیچ تگی داخل تگ a نباید قرار بگیره به استثنای تگ img . بنابراین باید تگ a رو داخل تگ h قرار بدید تا مشکلی پیش نیاد .




  4. kourosh
    ۲ مهر ۱۳۹۰

    ممنون از راهنمایی تون ;)




  5. محمد مردانی
    ۲۹ آبان ۱۳۹۰

    خیلی ممنون




  6. پدرام
    ۲۹ اسفند ۱۳۹۱

    یک سوال: اگر کل هدر یک سایت رو بشکل عکس در نظر گرفته باشیم، می تونیم از تگ h1 برای بهتر شدن نتایج موتورهاب جستجو استفاده کرد و حالت display: hidden رو براش بکار ببریم تا این تگ به نمایش در نیاد و فقط در موتور جستجو کارش رو انجام بده؟




  7. شهره
    ۱۴ مرداد ۱۳۹۲

    ممنون بابت مطالب مفیدی که ارایه میدید.




  8. hadi066
    ۲ فروردین ۱۳۹۳

    سلام سایت بسیار خوبی دارید مخصوصا بخش روانشناسی رنگها که هم نو و هم بسیار کاربردی است بسیار متشکرم




  9. پویا
    ۱۷ اسفند ۱۳۹۳

    با تشکر از مطالب مفیدتون.
    اگر امکان داره توضیح بدید که داخل تگ هدینگ آیا محدودیت تعداد کاراکتر ها وجود دارد؟
    به عنوان مثال برای قراردادن کلمات کلیدی داخل تگ هدینگ محدودیت تعدادی داریم یا خیر؟




  10. Pessarak
    ۴ فروردین ۱۳۹۴

    ممنون از زحمت هاتون میشه لطفا این اموزش ها فایل pdf شونم بزارین.!!!!




  11. افشین
    ۷ فروردین ۱۳۹۵

    پست بسیار مفیدی بود

    من در استفاده از تگ ها دو مشکل دارم: یکی اینکه اگر بخوام عنوانی رو در متن تگ بدم کل اون پاراگراف تگ دار میشه (یا بهتره بگم بزرگ می شه) و یکی اینکه فونت تگ ها ظاهر بسیار نامناسبی دارن. ایا اگر تگ رو اختصاص بدم و بعد فونت رو کوچیک کنم مانند بقیه کلمات، ازش تگ از بین نمیره و همون کارایی رو خواهد داشت؟




  12. امیر
    ۹ اردیبهشت ۱۳۹۵

    ممنون مقاله مفیدی بود




  13. سمانه
    ۲۰ تیر ۱۳۹۶

    تگ h1 کجا گذاشته میشه



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





نشانی ایمیل شما منتشر نخواهد شد.

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

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.