+38(097) 404 30 30
UA RU

Заголовки h1-h6: що це таке і як їх використовувати, щоб бути кращими за 90% сайтів

0 152 04.01.2025

90% сайтів, які приходять на просування в PROSUVER мають проблеми з використанням заголовків h1-h6. Для любителів посперечатися – це винятково мій досвід за 15 років роботи, і я не претендую на точність цифр у рамках всього інтернету. Але навряд чи вони будуть далекі від цього.

І якщо власники сайтів часто навіть не знають про проблему і тому нічого не роблять. То деякі SEO-фахівці просто їх ігнорують під приводом «вони майже не впливають на ранжування». До того ж те саме вони кажуть ще про десяток-другий параметрів. А потім виявляється, що вся їхня робота зводиться до написання мета-тегів, текстів та закупівлі посилань.

Чому ні? Бюджет же клієнтський, а не свій. Навіщо працювати руками, якщо можна зробити мінімум, а все інше намагатися компенсувати посилальним. Не лізе в ТОП? Значить потрібно ще більше посилань… Ось так і живемо. А потім ще дивуємося, що клієнти не довіряють SEO-шникам.

Але це ми відволіклися. Давайте розбиратися, що ж це за заголовки з підзаголовками, навіщо вони потрібні і як з ними працювати правильно.

Що таке заголовки h

Якщо ви запитаєте у SEO-фахівця – що таке заголовок h1. Відповідь буде приблизно такою – це головний заголовок сторінки, який обгорнутий в HTML-тег <h1>. У коді сторінки має такий вигляд:

<h1>Заголовок</h1>
где <h1> – тег, що відкриває, </h1> – тег, що закриває.

Що таке h2, h3, h4, h5, h6 – це підзаголовки, які також виділяються відповідними тегами.

А всі разом – основний заголовок у h1 та підзаголовки h2-h6 – це і є той набір HTML-тегів, який дозволяє структурувати інформацію на сторінці. Загалом їх 6 рівнів. Тому ніякого h7 та далі, не існує. H1 – найбільш значний, h6 – менш.

Загалом усе досить просто. Якщо ви розумієте, про що йдеться. Але спробуйте розповісти це власнику сайту, який узагалі не знав, про якісь там теги h. Або SEO-фахівцю-початківцю, якого потрібно навчити. Кількість запитань тільки додасться. Тому давайте на прикладі. Може й не найвдаліший, зате наочно.

Візьмемо будь-яку книжку. Її назва – це заголовок h1. Назва розділів – заголовки h2. Якщо всередині глав є ще підзаголовки – це будуть h3. Будь-який сайт у цьому прикладі – це бібліотека. Тобто кожна сторінка на сайті – це книга, у якої свій набір заголовків.

Але тільки в книзі для того, щоб назва стала заголовком, а глави підзаголовками, потрібно зробити їхній шрифт більшим або жирнішим. А ось на сайтах зміна шрифту – це просто зміна шрифту, яка нічого не змінює. Щоб якийсь елемент став підзаголовком, його потрібно обернути у відповідний тег h, а вже потім задавати для нього оформлення.

Наприклад, для цієї сторінки заголовок h1 – це назва статті. А «Що таке заголовки h» – це підзаголовок у h2. Далі по тексту їх буде ще кілька. Щоб вам було зручніше читати цю статтю. Але про це нижче.

Для чого вони потрібні

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

Структурування інформації на сторінці

Вам буде зручно читати статтю на 20 тис. знаків, без підзаголовків? Просто портянку тексту. Ні. А якщо в ній щось потрібно знайти… Як там взагалі орієнтуватися? Ніхто не буде таке читати, просто підуть до конкурентів. Те ж саме стосується інтернет-магазинів, сайтів послуг і будь-яких інших. Немає нормального структурування – ви втрачаєте частину клієнтів.

Зате, якщо структура хороша, вашим відвідувачам зручно орієнтуватися, вони не закривають сторінку одразу, проводять на ній більше часу, здійснюють більше дій. У підсумку – зростання поведінкових факторів, які зі свого боку позитивно впливають на позиції.

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

Наприклад, у вас із конкурентом майже ідентичні сайти за сторінками, асортиментом, посилальним, оптимізацією. Так ось, якщо ПС обиратиме, кого поставити вище, вибере того, у кого структура грамотніше опрацьована.

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

Формування заголовків у результатах пошуку

Теги h2-h6, хоча на практиці це скоріше h2-h3, можуть використовуватися ПС для формування заголовка в результатах пошуку. H1 теж входить сюди, але це скоріше альтернатива title під загальні запити, а підзаголовки – під вужчі.

Наприклад, зараз ви читаєте статтю про заголовки загалом. І теоретично вона може ранжуватися за великою кількістю пошукових запитів. Але якщо користувач вбиває в пошуковий рядок: «довжина h1», а заголовок у результатах пошуку сформований із title і має такий вигляд: «Заголовки H1-H6: як їх писати, щоб бути кращими за 90% сайтів», він може і не перейти на сайт. Йому буде не зрозуміло, чи знайде він там відповідь на своє запитання.

Якщо ж на сторінці є підзаголовок зі словами «довжина h1», ПС може показати його. У такому разі користувач найімовірніше піде до вас на сайт. Але ПС може так зробити, якщо такий підзаголовок є. А якщо його немає, то навіть за наявності потрібної інформації, заголовок у результатах пошуку буде колишнім. Звичайно, так відбувається не так уже й часто, але що ви втрачаєте, зробивши правильну структуру?

Що в підсумку – якщо заголовки в результатах пошуку будуть більш придатними під запити користувачів, ваш сайт зможе збирати більше кліків, навіть посідаючи нижчу позицію. А хороша клікабельність призводить до того, що позиції сайту також можуть зростати. Тобто, ви і більше кліків отримуєте і ПС бачить, що сайт збирає багато кліків та піднімає вас вище, даючи ще більше переходів.

Заголовки також можуть використовуватися і при формуванні спіпетів. Але про сніпети краще зроблю окрему статтю. Тому що з ними потрібно працювати не на етапі перевірки/коригування тегів h, а окремо.

Як їх дивитися

Перевірку заголовків h1-h6 зручно робити через Seo Meta in 1 Click. Це розширення для Google Chrome, яке ви легко знайдете. Воно безкоштовне.

Ось так виглядає перевірка заголовків для однієї зі сторінок сайту PROSUVER:

Перевірка заголовків h1-h6 через Seo Meta in 1 Click
Перевірка заголовків у розширенні Seo Meta in 1 Click

Розширення дає змогу побачити, чи правильно використані підзаголовки в плані ієрархії та який текст у них. У більшості випадків цього достатньо для попередньої оцінки. Якщо ж у розширенні ви бачите якусь дивину, тоді можна подивитися вихідний код.

Наприклад, ви можете побачити, що в структурі сторінки є підзаголовки h2, але навпроти них не написано жодного тексту. Таке буває, якщо в h2 обгорнута картинка або він просто порожній. Розширення не дасть це побачити. І тоді потрібно дивитися вихідний код.

Також ви не побачите тут, поєднання тега h з тегами акцентування strong або em. Використання стилів для оформлення прямо в коді, а не через style.css. І так далі. Усе це потрібно дивитися в коді.

Тобто правильність структури заголовків і того, що в них написано, дивимося через Seo Meta in 1 Click. А всі спірні моменти – у вихідному коді. Софт та сервіси в цій статті не розглядаємо, хоча цікаві рішення під різні завдання є.

Рекомендації для h1

Тег h1 – один із найважливіших тегів на сторінці. Можна вважати, що це другий за важливістю тег після title. Все це дуже відносно і на практиці багато нюансів. Але в будь-якому разі до заголовка сторінки потрібно поставитися максимально відповідально. Розберемо основні критерії, яким він має відповідати.

Заголовок h1 має бути на сторінці тільки один

Теоретично Google не бачить проблеми у використанні декількох h1 на одній сторінці. Але на практиці – це виглядає дивно, та й той самий Google може не розуміти, за яким же запитом її краще ранжувати.

Наприклад, уявімо типову сторінку розділу інтернет-магазину. Зверху назва розділу. Наприклад «Купити холодильники LG» (слово «купити» тут зайве, але з ним наочніше). Це і є заголовок, який ми помістимо в h1. Потім ідуть картки товарів, блоки з популярними/акційними моделями, можливо останні відгуки, може ще щось. А потім внизу сторінки – SEO текст. Перед яким є підзаголовок «Холодильники LG: критерії вибору».

Якщо другий заголовок також обернути в h1, вийде, що один із них – комерційний і сторінку потрібно ранжувати за запитами «купити…», а другий інформаційний і її потрібно ранжувати за запитами на кшталт «критерії вибору…». Це може плутати ПС та мати негативний вплив на позиції.

Повинен відповідати сторінці

Тут може бути кілька ситуацій. Розглянемо, як зробити заголовок h1 на конкретних прикладах.

Приклад 1: сторінка ІМ на якій продаються шкіряні сумки ручної роботи.

Правильно
Шкіряні сумки ручної роботи
Сумки ручної роботи зі шкіри
Неправильно
Шкіряні сумки
Сумки ручної роботи
Сумки зі шкіри

У цьому прикладі ми бачимо, як деякі власники сайтів пишуть у h1 те, що не відповідає повною мірою товару або послузі. Такими заголовками ви показуєте ПС, що у вас набагато ширший асортимент, ніж є насправді. А для магазинів із ширшим асортиментом – там своя видача.

Приклад 2: моя стаття https://prosuver.ua/blog/seo/description.

Подивіться на її структуру – що це таке, для чого, довжина, як писати, помилки… Стаття досить широкого формату. Відповідно заголовок у h1 має містити тільки «мета-тег description», а решта слів «загальні» або перерахування цих підрозділів (якщо не переспамити):

Правильно
Мета-тег description: вік живи, вік учись або що потрібно знати про описи в наш час
або
Мета-тег description: що це таке, для чого потрібен та як його писати без поширених помилок

Але припустимо, що я пишу статтю під ключові слова і в мене основна частина запитів під те, як складати description. Тоді може вийти ось так:

Неправильно
Як писати description: рекомендації та реальні приклади

Тобто, заголовок про те, як його писати, а стаття про те, що це взагалі таке, для чого він потрібен і так далі.

Приклад 3: головна сторінка сайту послуг.

Бувають випадки, коли заголовок h1 на головній сторінці має такий вигляд:

Неправильно
Про нас
Наші послуги
Ми пропонуємо

А повинен так:

Правильно
Агентство інтернет-маркетингу PROSUVER

Повинен розташовуватися на видному місці

Деякі власники сайтів ігнорують усі заголовки на сторінці, які варто було б обернути в h. Замість цього ставлять вниз сторінки SEO текст і поміщають у тег h1 заголовок перед ним. Логіка проста – у нього можна вписати побільше ключів, він же не на виду… Це неправильно.

Заголовок h1 потрібно розміщувати зверху сторінки і на видному місці. Щоб користувач одразу бачив заголовок та розумів, про що вона. Це зручно для користувача та більш правильно для ПС.

Не повинен дублювати title

Тут не все однозначно. Однаковими вони можуть бути і часто так і буває. Причини 2:

  1. Лінь заморочуватися та писати різні.
  2. Сторінка не бере участі в пошуковому просуванні.

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

H1 більше орієнтований на користувачів. І в реальній роботі часто маємо ситуацію, коли дизайн не дає змоги використовувати більше 3-4 слів. Багато в нього впишеш у такому разі? Не особливо.

Приклад:

Правильно
H1: Контролери для електровелосипедів
Title: Купити контролери для електровелосипедів у Києві – [Назва магазину]
Неправильно
H1: Зовнішня каналізація
Title: Каналізаційні труби в Києві купити в [Назва магазину] – Ціна в Україні

Неправильний приклад – це реальний приклад однієї сторінки Епіцентру. На самій сторінці більша частина продукції – це труби. Title написаний правильно, якщо не чіплятися до дрібниць. А ось h1 тільки вводить ПС в оману.

Не повинен бути занадто довгим

Часто запитують – якою має бути довжина заголовка h1? Однозначної відповіді на це питання немає. Хтось наводить цифри в 50-60 символів, хтось допускає до 90-100. Варіантів багато. Але все це не більше, ніж набір думок. Якихось точних рекомендацій з боку ПС просто не існує.

Тому керуйтеся здоровим глуздом та аналізом конкурентів. Мінімальна довжина може бути всього кілька символів. Наприклад: «Блог». І це нормально для певного типу сторінок. Максимальна залежить від того, що саме представлено на сторінці. Наприклад, для цієї статті ­– це понад 80 знаків. І це не багато, я часто пишу і довші заголовки.

Для багатьох сторінок у вас навіть питання виникати не буде. А там, де будуть сумніви – відкривайте конкурентів для конкретної сторінки з ТОП 10 та дивіться що у них. Це зніме питання майже у всіх випадках.

А ось чого справді слід уникати – так це включення в h1 блоку тексту. Це може здатися очевидним, але в реальній роботі чого тільки не побачиш… І весь SEO текст у нього обертають, і блок тексту на першому екрані, і блок товарів цілком, і навігаційні елементи.

Використання ключових слів

Тег h1 має досить великий вплив на SEO, про це вище вже говорили. А це означає, що в ньому обов’язково мають бути ключові слова. Принаймні для посадкових сторінок.

При цьому:

  • ключове слово краще розміщувати ближче до початку заголовка;
  • не можна допускати переспаму.

Наприклад, у нас є сайт, на якому головна сторінка просувається за запитом «регулювання пластикових вікон». Але у компанії є назва, яку вони виводять на першому екрані й обертають її в h1. Це неправильно, тому що h1 у такому разі не міститиме ключових слів. Правильний варіант у цьому прикладі очевидний:

Правильно
Регулювання пластикових вікон

Другий приклад – стаття про заголовок h1. Як виглядає переспам:

Неправильно
Що таке тег h1, як зробити заголовки h1 правильно, скільки заголовків може бути на сторінці, приклади h1

Який вигляд має заголовок, у якому ключове слово вписують, але не ставлять його на початок:

Неправильно
Детальна інструкція для новачків у SEO та власників сайтів зі складання заголовків h1

Такий варіант працюватиме погано. Правильно так:

Правильно
Тег h1: як використовувати головний заголовок, щоб поліпшити позиції в Google
або
Заголовок h1: інструкція зі складання з реальними прикладами та порадами наших експертів

І ще момент – не потрібно починати заголовок h1 зі слів «купити», «замовити» і подібних. Використовуйте для цього title. Хоч я і наводив подібні приклади вище – це тільки для наочності.

Наявність та унікальність

Є ще 2 поширені проблеми, з якими часто доводиться стикатися. Перша – це відсутність h1 на сторінці. Це взагалі дивно. Чомусь ніхто не уявляє собі книгу або статтю в журналі без назви. А на сайті – запросто. Це помилка. Заголовок має бути. І все. Особливі пояснення тут не потрібні.

Звісно, бувають винятки, але це саме що винятки. І розглядати їх у рамках цієї статті не будемо, щоб не розтягувати. Не так уже й часто вони зустрічаються.

Що стосується унікальності – заголовок h1 має бути унікальним у межах сайту. Тут також можуть бути варіанти, але прагнути потрібно саме до цього. До підзаголовків h2-h6 це не стосується.

Загальні рекомендації для h1-h6

Що писати в h1 розібралися. А тепер розглянемо рекомендації, які стосуються відразу всіх підзаголовків h. Тут помилки трапляються ще частіше.

Дотримуйтесь ієрархії

Якщо вас просять порахувати до шести: ви ж не будете починати з 3 та закінчувати 1? Ось так і з заголовками – вони мають використовуватися від більшого (від одиниці) до меншого. При цьому менший може бути в коді вищим за більший тільки якщо він вкладений у вищий за нього більший. Ось так:

Приклад правильної структури
заголовків h
Приклад неправильної структури
заголовків h

На практиці це дуже і дуже поширена проблема. Практично всі сайти, що приходять до нас на просування, мають проблеми зі структуруванням заголовків. Тому перевіряти це потрібно обов’язково.

Не забувайте про розмір шрифту

Якщо у двох словах – що вищий рівень підзаголовка, то більшим має бути шрифт. А якщо на практиці – ви можете уявити собі ситуацію, коли назву статті в журналі буде надруковано дванадцятим непримітним шрифтом, а підзаголовки в ній – двадцять четвертим, та ще й жирним? Так само і з підзаголовками h – найбільшим має бути h1, найдрібнішим – h6.

Звісно, тут є винятки. Наприклад, підзаголовки h2 та h3 можуть бути написані однаковим розміром шрифту, але перший буде жирним, та ще й яскравішим кольором, а другий ні. І візуально це дасть змогу розмежувати їх і створити розуміння, що один вкладений в інший. Але це вже особливості дизайну окремо взятих проектів. І до цього потрібно ставитися саме як до винятку.

Слідкуйте за кількістю

Загалом існує 6 рівнів тегів h, але це не означає, що потрібно прагнути використовувати їх на сторінці одразу всі. Більше – не означає краще. Важлива не кількість, а доречність. Якщо для гарного структурування достатньо h1, h2, h3, потрібно використовувати тільки їх, не впроваджуючи штучно теги h4-h6.

З моєї практики – тегів h1-h4 достатньо як мінімум для 95% сторінок. Теги h5 і h6 використовуються дійсно дуже рідко. Мало того, у більшості випадків достатньо h1, h2 або h1, h2, h3.

Надмірна кількість тегів h може сприйматися пошуковими системами як ознака пошукового спаму. Тому зайвий раз подумайте чи варто їх використовувати в тому чи іншому випадку. Є багато сторінок, де достатньо лише h1.

Використовуйте текст між ними

Це не правило, а рекомендація. Між двома сусідніми тегами h має бути хоча б один абзац тексту. Інакше можемо отримати ось таке:

Це і візуально виглядає в більшості випадків погано. І переспам може бути, якщо використовуєте ключі у всіх заголовках. І на якісних сайтах ви такого майже ніколи не знайдете. Принаймні 3 заголовки поспіль.

Але якщо заради цього візуального розмежування підзаголовків потрібно «налити води», бо корисний текст там не дуже доречний, краще поставити їх поруч. Водночас потрібно дивитися, щоб у них не виявився вписаний один і той самий ключ (може мати спамний вигляд). І щоб вони разом виглядали нормально – не було проблем із відступами, довжиною, розміром шрифту…

Не спамте

Використовувати ключові слова в заголовках можна і навіть потрібно. Але це не означає, що в кожен тег h неодмінно потрібно вставити ключ. Такий підхід призводить до переспаму. І позиції від цього можуть просісти. Досить задіяти для цього третину підзаголовків. Плюс мінус, звісно.

Також не потрібно використовувати багато ключових слів в одному підзаголовку або використовувати їх у неправильних формах. Наприклад:

Неправильно
Холодильник у [Назва міста]: де купити холодильник недорого з гарантією
Холодильник у [Назва міста]: недорого купити
Правильно
Де купити холодильник у [Назва міста] недорого та з гарантією

Запам’ятайте, підзаголовки потрібні для структурування інформації на сторінці, а не для того, щоб вам було куди вписувати ключові слова. І ще їх читатимуть відвідувачі вашого сайту, і спамні конструкції швидше відштовхнуть їх.

Слідкуйте за інформативністю та читабельністю

Уявімо типову сторінку сайту виробничої компанії. На сторінці є підзаголовок «Каталог продукції» і після нього йде блок із товарними картками або картками, що ведуть на підрозділи, не принципово. Сенс у тому, що це саме продукція. У підсумку – і відвідувач сайту, і пошукова система розумітимуть, що після цих підзаголовків розташовані посилання на продукцію. Інформативно? Так.

Друга ситуація – також сторінка виробничої компанії і є підзаголовок у h2: «Відкатні ворота». А після нього розташовані товарні картки з автоматикою для відкатних воріт. І ось тут уже не інформативно та не логічно. Користувач бачить такий підзаголовок та очікує, що нижче будуть саме ворота і не розуміє, чому бачить автоматику. А ворота-то де? Аналогічно це «не розуміє» ПС.

Що стосується читабельності – варіантів дуже багато. Як тільки не перекручують слова та їхній порядок, щоб вписати ключові слова. Це і пропущені пробіли в марках/моделях/артикулах, і неправильні переклади з англійської, і відсутність дефісів, де вони потрібні, використання великих/рядкових літер так як заманеться, відсутність відмінювання за відмінками.

Немає сенсу перераховувати все, просто запам’ятайте, що ви пишете для людей. І якщо вам потрібно вставити в підзаголовок ключ – приведіть його в правильну читабельну форму та не допускайте граматичних помилок.

Приберіть зайві символи

Заголовок не повинен закінчуватися крапкою

Повернемося до книжок – ви уявляєте собі книжку, назва якої закінчується крапкою? Зрозуміло, що якщо поставити собі за мету, ви такі знайдете. Але я говорю про ситуацію загалом, а не винятки, де це зроблено спеціально. Ні. Натомість багато власників сайтів, а ще частіше – авторів чи копірайтерів це роблять. Це не велика проблема, але за цим потрібно слідкувати та чистити такі моменти.

Знак питання в кінці заголовка не ставиться

Заголовок – це не питальне речення, де його використання обов’язкове. Хтось може намагатися сперечатися з цим, але я пишу так, як роблю сам. А розбирати тут граматику не має сенсу. Теж саме стосується знака оклику – його використання допустиме, але краще не ставити. Я не використовую за можливості.

Крапка всередині підзаголовка небажана

Ось тут уже не все так однозначно. Я і сам іноді використовую заголовки h1-h2, що складаються з двох речень. Але дуже рідко і за умови, що в першому реченні вже «обіграні» всі важливі для мене ключові слова. А якщо розглядати стандартну практику – теги h1-h6 не повинні містити крапку. Можна використовувати – тире, двокрапку, три крапки.

Не поєднуйте h1-h6 з іншими тегами та стилями

Як має бути:

Правильно
<h2>Текст підзаголовка другого рівня</h2>

Тобто, в html-коді сторінки мають бути тільки: відкриваючий та закриваючий теги h, а також текст самого заголовка. Іноді може бути вказано клас стилів у CSS. Ось так:

Приклад вказівки класу CSS для заголовка h1 в html коді сторінки

І на цьому все. А на практиці постійно доводиться виправляти помилки. 7 із 10 сайтів, які надходять на просування в PROSUVER, вимагають виправлення помилок, вказаних нижче.

Помилка 1 – поєднання h з тегами <strong>, <b>, <em>, <i>

Дуже часто маємо ситуацію, коли власнику не подобається зовнішній вигляд заголовка і він робить його «жирним». І в більшості випадків використовує для цього тег акцентування <strong>, а не просто тег <b>. Ось так:

Неправильно
<h2><strong>Текст підзаголовка другого рівня</strong></h2>
або
<h2><strong>Текст підзаголовка</strong> другого рівня</h2>

Мало того, буває і так – пишеш у ТЗ, щоб прибрали тег <strong>, віддаєш правки власнику, він віддає їх своєму програмісту, останній править та надсилає такий варіант:

Неправильно
<h2><b>Текст підзаголовка другого рівня</b></h2>

Ну, а що? Прибрав же… Так от – тег h не повинен поєднуватись із цими тегами взагалі. Для оформлення зовнішнього вигляду є стиль. А наголошувати на щось у підзаголовку взагалі не потрібно.

Помилка 2 – поєднання h з тегом <img>

Не рекомендується використовувати теги h для зображень. Це тільки на перший погляд очевидно. А в роботі часто бачимо сторінки, де в теги підзаголовків обгорнуті картинки. Ось так:

Неправильно
<h2><img src=””https://prosuver.ua/wp-content/uploads/test.jpg”><h2>

Це також потрібно вичищати – прибирати тег h2 (якщо говорити про цей приклад).

Помилка 3 – поєднання h зі стилями

Деякі використовують такі конструкції:

Неправильно
<h3 style=”color: #b22929; font-size: 17px” align=”center”>Текст підзаголовка 3</h3>

І все б нічого, можна й очі заплющити, якщо це разово. Але коли підзаголовків на сторінці 15-20 штук і в кожному одні й ті самі стилі, мимоволі виникає питання – у чому проблема задати оформлення через style.css?

Якщо під час перевірки підзаголовків бачите таку ситуацію – пишіть цей пункт у виправлення. Пізніше із програмістом обговоріть. Якщо можливо, він все це прибере.

Помилка 4 – суміщення h з посиланнями

Дуже часто можна побачити таке:

Неправильно
<h4><a href=”https://prosuver.ua/”>Підзаголовок 4 рівня</a></h4>

Для чого це роблять не зрозуміло – чи через незнання, чи хочуть посилити внутрішні посилання, чи ще з якихось причин. Але сайти із такою проблемою приходять регулярно. Не забуваємо, що заголовки потрібні для структурування та не підходять для вписування посилань. Подібне вичищаємо.

Використовуйте мінімум 2 підзаголовки h2-h6

Ще одна очевидна рекомендація. Проте часто доводиться бачити таке:

<h1>
        <h2>
        <h2>
                <h3>
        <h2>

Питання – навіщо в цій структурі h3? Якщо у вищому h2 так багато інформації, що її потрібно розділити на кілька блоків, тоді цих h3 має бути теж кілька. А якщо він один – значить інформації там не багато і цей підзаголовок зайвий.

Не використовуйте для навігаційних елементів

Теги заголовків h використовують для структурування інформації на сторінці. Саме інформації! Вони не повинні використовуватися для навігаційних елементів. Якщо хтось не розуміє, що таке навігаційний елемент – ось приклад:

Приклад навігаційних елементів у футері сайту PROSUVER

Це назви блоків у підвалі, сайдбарі або просто на сторінці. Вони не допомагають структурувати інформацію і не повинні обертатися в h. Подивіться на статтю, яку ви читаєте. Її назва, текст і картинки в тексті – це інформація, яку потрібно структурувати, щоб вам було зручно її читати. А назви будь-яких блоків на сторінці не мають до неї стосунку та не допоможуть зробити статтю зручнішою для читання. Тому заголовки в них не потрібні.

Крім навігаційних елементів, деякі власники сайтів загортають у теги h товарні картки, цілі блоки інформації, логотипи, форми відправлення замовлення, роблять блоки тексту, що складаються тільки з підзаголовків. У всіх цих випадках теги h потрібно прибирати.

Як робити перевірку

У щоденній роботі ми не пишемо правки для кожної посадкової сторінки клієнтського сайту повністю за всім списком. Це занадто трудомістко та нікому не потрібно. Правки діляться на 2 види – наскрізні та посторінкові.

Припустимо, приходить на просування сайт. Семантика зібрана, посадкові вже є, мета-теги написані, переходимо до правок. Починаємо з наскрізних правок. Беремо по одній сторінці кожного типу: головна, розділ, підрозділ, товарна сторінка, сторінка (Про нас, доставка і подібні). Таких сторінок буде всього кілька штук і переглянути їх не проблема.

Для кожного типу сторінок перевіряємо:

  • h1 – чи є він узагалі на сторінці, один чи кілька;
  • розташовується на видному місці чи ні;
  • унікальний у межах сайту чи ні (потрібен софт);
  • чи дотримана ієрархія h1-h6;
  • чи немає проблем із розмірами (наприклад, h3 сильно більший за h2);
  • чи не використовуються заголовки в навігаційних елементах.

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

Всі інші моменти – ми аналізуємо на етапі посторінкових правок. Це вже більш тривала та копітка робота. До того ж під час написання посторінкових правок потрібно дивитися не тільки заголовки, а й багато інших моментів. Про це в наступних статтях.

Сподобалася стаття? Не забудьте проголосувати або поділитися в соц. мережах. Якщо залишилися запитання – пишіть у коментарях. У нас вони – не лише б були. Читаємо та відповідаємо на ваші запитання.

5/5 Усього голосів: 5
Підпишись на блог Щоб бути в курсі всіх оновлень
Неправильно введено e-mail!
Ваша підписка успішна! Раді ділитися з вами цікавими новинами
Зачекайте...
Залишити коментар

Ваш коментар на модерації!
Бажаєте працювати з нами або отримати консультацію?Надішліть нам заявку
Невірний формат телефону
Зачекайте...
Ваша заявка успішно відправлена!
ми зв'яжемося з вами найближчим часом