H1 - базовий заголовок першого рівня

Як оптимізувати сторінку за допомогою HTML заголовка першого рівня H1? Яка має бути його довжина та скільки тегів H1 можна використовувати на сторінці? Приклади добрих і поганих заголовків. Про все докладніше читайте у цій статті.

H1 – це базовий заголовок сторінки першого рівня. У Html розмітці існує всього 6 заголовків, що показують важливість блоків, що стоять під ними. Найважливіший заголовок H1, найменше - H6.

За замовчуванням, стилі заголовків відрізняються: H1 має найбільший розмір, далі по низхідній, відповідно, H6 - найменший із заголовків. Візуальна відмінність відображається для користувачів, які відвідують web-ресурси. Для роботів має значення синтаксис.

Синтаксис заголовка H1

У Html-коді сторінки заголовок H1, як правило, розміщується в межах парного тега body якомога ближче до початку сторінки. Виглядає так:

H1 - базовий заголовок першого рівня

Приклад використання тега h1 на цій сторінці:

H1 є парним тегом. Текст розташований між тегом, що відкриває

та закриваючим тегом

Важливо! Заголовки H1-H6 повинні мати ієрархічну та смислову послідовність. Заголовок третього рівня не повинен містити в собі блок із заголовком другого рівня, так само як і заголовок четвертого рівня не повинен знаходитися всередині блоку із заголовком другого рівня.

Простий приклад правильної ієрархічної структури заголовків:

Породи кішок у Росії та США
Вступ
Породи кішок у Росії
Текст для породи кішок у Росії
Російська блакитна кішка
Текст про російську блакитну кішку
Сіамська кішка
Текст про сіамську кішку
Породи котів у США
Текст для породи кішок у США
Мейн-кун
Текст про породу Мейн-кун

Докладніше ознайомитися з ієрархією та структуризацією сторінки за допомогою заголовків ви можете у специфікації HTML5.

Навіщо потрібен заголовок H1?

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

Заголовок сторінки, на відміну від тега meta description, видно всім користувачам сайту. H1 є смисловим узагальненням змісту веб-сторінки.

Особливості заголовка H1

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

Що писати в H1?

Як говорилося раніше, H1 — це заголовок першого рівня як у візуальному плані, і у смисловому. Базовий заголовок повинен відображати зміст всієї сторінки, а чи не окремих її частин. H1 не повинен дублювати тег title, а також як title і description повинен містити головне ключове слово сторінки. Тег H1 має високу ймовірність потрапити в заголовок динамічного сніппета, тому дублювання H1 і title є поганою практикою. Ви таким чином звужуєте варіативність і релевантність свого сніпету за низькочастотними запитами.

Головна вимога до H1 - це релевантність вмісту сторінки.

Розмір та довжина заголовка H1

Почнемо з розміру. У багатьох SEO-блогах можна знайти інформацію про те, що заголовок H1 обов'язково повинен бути візуально більше за інші заголовки, в іншому випадку пошукові системи порахують цей зміст за неоптимізований контент, і позиції сайту можуть знизитися у видачі. ? Ні. Ні в специфікації HTML, ні в довідковій інформації пошукових систем ви не знайдете даних, що відображають важливість візуальних стилів. заголовків.

Більше того, багато оптимізаторів-початківців помилково приймають текст найбільшого розміру за заголовок першого рівня, хоча часто це буває не так.

За запитом «Купити чоловічі джинси» в ТОП-5 видачі Яндекс (на момент написання статті) присутній один з лідерів E-commerce інтернет-магазин Lamoda.ru. ніж описовий блок, та інші текстові елементи, розміщені на сторінці.

Візуальне відображення - це питання юзабіліті, а семантика - це питання пошукової оптимізації. Не варто плутати ці два поняття.

Довжину H1 рекомендується робити не більше 60 символів, оскільки пошукові системи враховують їхню обмежену кількість.Якщо ви не можете поміститися в цей ліміт, не втративши значення завантаження, напишіть заголовок довжиною більше 60 символів. В ідеалі необхідно дотримуватися цієї цифри, оскільки H1, як говорилося раніше, може бути використаний для формування динамічного сниппета. А довжина заголовка (посилання), що відображається в сніпеті обмежена .

Скільки заголовків H1 може бути на сторінці?

Відповідно до специфікації HTML 5 кількість заголовків першого рівня можна використовувати для кожного тега article або section. Яндекс у розділі подання інформації про сайт не згадує про можливу кількість використання H1, а лише говорить про те, що має бути дотримана ієрархія використання заголовків. Офіційний представник Google Джон Мюллер на офіційному каналі youtube Google Webmasters зазначає, що використання множинних заголовків H1 на одній сторінці не є проблемою, якщо це не порушує ієрархію веб-документа.

Що каже практика? На практиці переважна більшість оптимізаторів, seo-компаній та підрядників використовує при структуризації сторінок лише 1 заголовок H1. Заголовок першого рівня також не використовується для оформлення елементів інтерфейсу: меню, сайдбари і т.д. Немає об'єктивних досліджень щодо впливу кількості заголовків H1 на підвищення позицій сайту у видачі чи переоптимізацію ресурсу, та й згідно з офіційними даними пошукових систем такі дослідження не потрібні.

Ми рекомендуємо все-таки не відходити від загальноприйнятої практики і використовувати лише один унікальний H1 заголовок на сторінці. У специфікацію HTML досить часто вносяться зміни. Для оптимальної побудови ієрархії та структуризації сторінок більшості web-проектів буде достатньо використовувати перші три заголовки.Не варто експериментувати, тому що всі необхідні інструменти для створення ієрархії у вас є.

Перевірити заголовок H1 на сторінці

Існує 3 простих способи перевірити заголовок H1 на сторінці:

1. Клацніть правою кнопкою миші на ділянку тексту, і в залежності від вашого браузера натисніть кнопку «Переглянути код(Chrome), «Дослідити елемент» (Mozilla Firefox) або «Перевірити об'єкт»(Safari). У вас відкриється панель вебмайстра як на скріншоті нижче. У html коді сторінки ви побачите розмітку тексту, і зрозумієте якого рівня заголовок перед вами і чи це заголовок взагалі.
2. Поєднання клавіш Ctrl+Shift+C викликає панель вебмайстра. Клацніть у будь-яке місце представленого html коду. Далі натисніть клавіші Ctrl+F для пошуку за вмістом коду, і вбийте в пошуковий рядок «h1».
3. Кнопка F12 викликає панель розробника. Пошук елемента H1 робиться аналогічно до попереднього способу.

8 помилок при написанні H1

Ми систематизували найпоширеніші помилки при складанні заголовків першого рівня. Перевірте, чи є ці помилки на вашому сайті:

[su_list icon="icon: minus" icon_color="#005a8c"]

• Сторонні елементи. У H1 крім тексту не повинно бути нічого. Деякі вебмайстри думають, що вони посилять заголовок, обернувши його також у тег strong або b, додавши йому жирне зображення, тож закладене в стилях. Це погана практика, намагайтеся її уникати. Не рекомендуємо також надмірно використовувати пунктуацію (розділові знаки в заголовках). Намагайтеся робити їх простими та лаконічними.
• Відсутність чи надлишок ключових слів. З крайності до крайності. H1 – це квінтесенція вашої семантики на сторінці. Ключове слово має бути у заголовку.Відсутність ключових слів у головному заголовку сторінки поставить під її релевантність пошуковим запитам.
• Дублювання. Помилка є як дублювання title в H1 і навпаки, так і дублювання H1 на різні сторінки сайту. H1 має бути унікальним для всього сайту. З 2-х сторінок з однаковим контентом у видачу потрапить найбільш релевантна.
• Довжина. Намагайтеся вкладатись у 60 символів. Заголовки H1 по 300-400 символів можна побачити на багатьох ресурсах, не наслідуйте поганий приклад. Також не варто складати базовий заголовок із одного слова, якщо це не головний розділ сайту чи загальна категорія товарів.
• Граматика. Граматичні помилки зводять нанівець усю семантичну значущість вашого заголовка. Намагайтеся не припускатися помилок у тексті, а в заголовку — тим більше!
• Більше одного H1. Це питання ми детальніше розписали вище. З натяжкою віднесемо цей пункт до помилок оптимізації.
• Відсутність структури. H1 має розташовуватися на початку сторінки. Інші заголовки до цього тегу не повинні бути присутніми.
• Чи не заповнення H1. Хтось опускає момент заповнення H1 взагалі. Це груба помилка, якої не можна допускати.

Приклади: Хороший H1 vs Поганий H1

Давайте розглянемо на парі живих прикладів заголовок першого рівня H1

Приклад #1

[su_list icon="icon: plus" icon_color="#005a8c"]

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

[su_list icon="icon: minus" icon_color="#005a8c"]

• Поганий заголовок. Розмір H1 явно перевищує 60 символів, заголовок переоптимізований, він не відображає смислову суть документа.Заголовок являє собою перелік частин статті, в ньому міститься дуже багато ключових слів.

Приклад #2

[su_list icon="icon: plus" icon_color="#005a8c"]

• Гарний заголовок. Лаконічний заголовок першого рівня, що знаходиться на початку сторінки, характеризує категорію товарів зі статевою сегментацією, є ключовим словом. H1 відсутні сторонні елементи в коді, граматичні помилки, він не дублюється.

[su_list icon="icon: minus" icon_color="#005a8c"]

• Поганий заголовок. Заголовок даного сайту розташований у шапці. Це означає, що H1 "Купальники" дублюється абсолютно на всіх сторінках сайту, не відображає семантику сторінки. За словами «купальники» неможливо зрозуміти, що знаходиться на сторінці: інтернет-магазин, блог про купальники, розмірні сітки купальників або ще щось. У категоріях з'являється 2 заголовки H1. Також заголовок складається з одного слова і не характеризує статеву сегментацію товару.

Як вставити тег H1 у популярних CMS?

У кожній системі керування сайтом є вбудований функціонал, який формує H1 для категорії, сторінки або розділу. Давайте розглянемо, як вставити заголовок першого рівня в найпопулярніших системах керування сайтами.

WordPress

WordPress заголовок першого рівня формується з текстового поля над постійним посиланням запису або сторінки. Будь-яку CMS можна кастомізувати на власний смак. У разі відключення основного заголовка, є можливість виводу H1 за допомогою візуального редактора - список зі словом «Абзац».

Bitrix

На панелі керування заголовок H1 за промовчанням формується у вкладці «Розділ» або «Елемент» у полі «Назва».Або у вкладці SEO в полі "Заголовок розділу", попередньо встановивши галочку "Змінити для цього розділу та його підрозділів".

Joomla

У Joomla аналогічно до інших систем заголовок H1 формується дуже просто. Текстове поле Title, або список «Paragraph».

Крім стандартних засобів, у кожній CMS можна додати заголовок першого рівня за допомогою візуального редактора, або перейшовши в режим вихідного коду. У режимі вихідного коду ви можете прописати руками H1 згідно з його синтаксисом.

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