اهمیت استفاده درست از heading

اهمیت استفاده درست از Heading ها در وبسایت

منبع اصلی این نوشته مطلبی از Michiel Heijmans از وبسایت Yoast است.

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

یکی از مسائلی که در این مدت یاد گرفتم، استفاده درست از «عنوان» یا Heading بود. چیزی که به نظر مساله‌ای کوچک و کم اهمیت، اما در واقع موضوعی مهم است. تا اینکه دیروز به دلیلی به دنبال مطلبی در مورد اهمیت استفاده از heading ها گشتم و با مطلبی بسیار خوب از سایت yoast مواجه شدم که هر آن چیزی که من قصد گفتنش را داشتم، به بهترین شکل بیان کرده بود. پس بهتر دانستم که همان مطلب را بدون تغییر محتوا و با کمترین تغییر نگارشی و با کسب اجازه از این شرکت ترجمه و منتشر کنم.

هدینگ‌ها و چرایی استفاده از آنها

تگهای heading همانطور که از نامشان بر می آید، تگهایی هستند که برای ساخت عنوان مورد استفاده قرار می گیرند. مهمترین آنها، تگ عنوان <h1> است که به طور معمول برای عنوان یک مطلب مورد استفاده قرار می گیرد. تگهای Heading از <h1> شروع شده و به <h6> ختم می شوند. تگهای heading به دو شیوه ساختار محتوای شما را مشخص می کند. در HTML کلاسیک، فقط یک تگ H1 وجود داشت و سپس چند تگ H2 و … و اینها سرتیترهای محتوای شما را شکل می دادند.

اما در HTML5 وضعیت فرق کرد و در دل هر کدام از تگهای قسمتبندی (مثل <section> و <article>) یک تگ H1 جدا قرار گرفت. این کار به این منظور صورت گرفت که در عین حال که یک متن کلی داریم، اجزای آن نیز هویت مستقل داشته باشند. از منظر تئوری این به نظر درست می رسد. اما ما با استفاده از این شیوه مخالفیم. Steve Faulkner در این مقاله در این مورد کاملا توضیح داده است. در ادامه نیز به این موضوع می پردازیم.

ساختاردهی به کل صفحه

در HTML4 به نظر منطقی می رسید که در هر صفحه یک H1 استفاده کنیم که معمولا عنوان همان صفحه بود. در بیشتر اوقات این H1 برند یا نام وبسایت شما نبود. (به جز در صفحه اول وبسایت که مشکلی ندارد). برای درک بهتر به این مثال توجه کنید: در همین صفحه ای که در حال مطالعه هستید در mohadeci.com، عبارت «اهمیت استفاده درست از Heading ها در وبسایت» عنوان صفحه و مشخص شده با تگ H1 است. این عنوان نشان دهنده موضوعی است که قصد بحث در مورد آن را داریم. اما ما قرار نیست در مورد «بهمن محدثی» صحبت کنیم. پس لزومی ندارد که به آن تگ H1 داد. درست است؟ مت کاتس در این ویدیو در پاسخ به این سوال که در هر صفحه از چند تگ h1 استفاده کنیم عنوان می کند که بهتر است تنها یکبار استفاده کنیم:

 

در صفحه یک دسته بندی خاص (Category page) نام آن دسته بندی تگ H1 می گیرد و در صفحه یک محصول خاص، نام محصول تگ H1 می گیرد.  همچنین به کل یک صفحه یا یک پاراگراف نباید تگ heading داد. سخت نیست نه؟

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

اشتباهات فاحش برای استفاده از تگ H

یکی از بدترین استفاده هایی که از تگهای Heading می شود، برای مواردی است که اصلا heading نیستند. مثلا در بعضی سایتها، بالای سایت «با ما تماس بگیرید: 123456789» را با تگهای هدینگ استایل می دهند. در صورتی که کافی است از طراح سایت خود بخواهید تا برای آن بخش یک کلاس خاص تعریف کند تا استایل مورد نظرتان را به دست آورد.

مورد دیگر وقتی است که یک صفحه یا یک پاراگراف را با یکی از تگهای H1، H2 یا H3 آرایش می دهند. متاسفانه این دومی از خیلی از برندهای معروف سر می زند. به خصوص در صفحات فروشگاهی و صفحات فرود.
ترتیب استفاده از تگ های h

تگهایی از میان خرت و پرتهای گنجه داخل انبار!

تازگی‌ها چند بار از H4، H5 یا H6 استفاده کرده اید؟ وقتی متنی بیشتر از 1000 کلمه داشته باشید، شاید تگ H4 برای بعضی بخشها مناسب باشد همچنین می توان از H4 برای عناوین ستون کناری (سایدبار) و یا فوتر استفاده کرد که شامل کلمه کلیدی کانونی ما نیستند. اما استفاده از باقی تگها به نظر ضروری نمی رسد.

جالب اینجاست که اکثر طراحان قالب، اهمیت چندانی به هدینگها نمی دهند و مثلا سایز تگ h5 را از پاراگراف هم کوچکتر قرار می دهند. حال آنکه این تگها را باید طوری استایل داد که از متن معمولی با اهمیت تر به نظر برسند، اما نه با زیاده روی. اگرچه استفاده از این تگها به دوران کهن اینترنت برمی گردند و امروزه استفاده چندانی ندارند. حتی اگر هیچوقت هم از تگهای H5 و H6 استفاده نکنیم به هیچ کس بر نمی خورد!

ارتباط Heading و SEO

اگر تا اینجا متن را دنبال کرده باشید، احتمالا این سوال برای شما ایجاد شده است که آیا هدینگ‌ها تاثیری روی سئو دارند؟ خب نسبت به قبل این تاثیر کمتر شده است، اما هنوز هم Headingها برای درک بهتر موضوعات اصلی متن به گوگل کمک می کنند. گوگل کل محتوای شما را اسکن می کند، پس چرا در این راه کمکش نکنیم؟

مسلما محتوای خوب و استفاده از علامتگذاری schema.org خیلی بیشتر از heading ها به رتبه شما کمک می کنند. اما از این زاویه به موضوع نگاه کنید که استفاده درست از تگهای H علاوه بر اینکه اصلا سخت نیست، به خوانندگان سایت شما و گوگل برای فهم بهتر محتوا کمک می کنند. پس لطفا از این مطلب در عمل استفاده کنید تا وبسایتهای بهتری داشته باشیم.

نظر شما در باره استفاده از Heading چیست؟

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

 

1 دیدگاه دربارهٔ «اهمیت استفاده درست از Heading ها در وبسایت»

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

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