Підзаголовки на сайті та як їх правильно структурувати — блог Drudesk
050 640 98 44
support@drudesk.com

Поради щодо правильного оформлення підзаголовків

Герої нашої сьогоднішньої статті покликані привносити «порядок в хаос». Вони роблять веб-сторінки набагато інформативнішими, а також приваблюють пошукові системи, неначе магніт. Вони також допомагають людям з вадами зору розуміти контент сайтів через скрін-рідери. У такий спосіб вони суттєво розширюють аудиторію сайту та підвищують його репутацію як такого, що дотримується стандартів веб-доступності. Отже, наші герої — це підзаголовки, які є «душею і серцем» HTML-розмітки сторінок. Ми вияснимо, як правильно структурувати підзаголовки.

Як правильно структурувати підзаголовки на сайті

Від H1 до H6: ієрархічна структура

Елементи підзаголовків від <H1> до <H6> «упаковують» контент веб-сторінки у чітку ієрархічну структуру. Найважливіший з них — <H1>, тобто заголовок сторінки. <H2> — важливий, <H3> — менш важливий, і так далі, у спадному порядку. Елементи <H2> можуть служити підзаголовками до <H1>, елементи <H3> — підзаголовками до <H2> і так далі.

«Ні» — перестрибуванню через рівні

Не рекомендовано перестрибувати з вищого на нижчий рівень, ігноруючи логічну послідовність — наприклад, використовувати тег <H5> одразу після <H2>. Якщо дотримуватись цієї рекомендації, структура сторінки буде зрозумілішою для скрін-рідерів, що суттєво полегшить навігацію між елементами. Ну і, звісно, це — золоте правило SEO.

Підзаголовки — не «для краси»

Хоча підзаголовки візуально виділяються, веб-редактори повинні пам’ятати, що їх не можна використовувати тільки для привертання уваги, оформляючи в них все, що їм захочеться. Підзаголовки не створені для дизайну — вони створені для виділення логічної структури контенту, тож нічого не повинно їм заважати виконувати цю місію. Розміри, жирність, колір і багато іншого досягається інакше — за допомогою стилів.

Працюють тільки справжні підзаголовки

Скрін-рідери та інші допоміжні технології покладаються саме на реальні підзаголовки, щоб зчитувати структуру сторінки. Отже, форматування, яке змушує текст тільки ВИГЛЯДАТИ як підзаголовки (шрифт, жирність і так далі) не здатне замінити справжні підзаголовки у цьому питанні.

Правильне приховування підзаголовків

Іноді читачам з ідеальним зором очевидно, про що йдеться в певному розділі, і ви хочете сховати підзаголовок. Однак, він все одно може виконувати свою функцію і лишатися видимим для скрін-рідерів та пошукових систем. Найкращий спосіб це влаштувати — використати CSS: class="element-invisible". Не варто використовувати display:none, адже це сховає підзаголовки повністю. Однак, приховування елементів не дуже подобається пошуковим системам, тож у цьому процесі є певні ризики.

Інформативні назви підзаголовків

Підзаголовки повинні мати якісь більш інформативні назви, аніж, наприклад, «Читайте більше». При цьому потрібно також уникати надмірної повторюваності ключових слів із підзаголовку в підзаголовок.

Наостанок

Заголовки та підзаголовки ховають в собі набагато більше, ніж здається на перший погляд. А часто вони в буквальному сенсі цей погляд «заміняють». 

Якщо ви бажаєте, щоб підзаголовки вашого сайту були перевірені на правильність, або щоб нова ідеальна структура підзаголовків була створена з нуля, просто зв’яжіться з експертами Drudesk!