1. Для чого взагалі потрібні заголовки?
2. H-теги очима людей
3. H-теги очима пошукових систем
4. Ієрархія H-тегів
5. Що за тег h1
6. Чому h1 повинен відрізнятися від Title
7. Вимоги по довжині H1
8. Правила для грамотного написання h1
9. Психологічні прийоми для складання привабливого заголовка
10. Рішення проблеми
11. заінтригувати
12. Прийом «іспит»
13. Навіщо потрібні підзаголовки h2-h6
14. Як правильно прописувати підзаголовки h2-h6
15. Як заповнювати h-теги в WordPress

Зміст статті

На моїх топових інформаційних проектах спочатку фахівець в тематиці становить структуру статті (заголовки і підзаголовки), а потім вже копірайтери по ним пишуть текст.

Структура - це насправді дуже важливо, якщо ви морочитися щодо якості. А щоб скласти нормальну структуру, потрібне розуміння того, як працюють теги h.

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

Перший заголовок повинен візуально бути більше за інших заголовків на сторінці.

h2-h6 - це маленькі підзаголовки, які проставляються за принципом вкладеності.

Для чого взагалі потрібні заголовки?

Для тих, хто не сильно в темі - ось в принципі непогане відео про ази складання підзаголовків h1-h6. Якщо не вважаєте себе фахівцем, подивіться:

І для закріплення матеріалу трохи слабший відео:

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

У коді тег виглядає так: <h1>, де буква h походить від слова «header», що в перекладі означає «заголовок». Кожен рівень позначається відповідною цифрою.

H-теги очима людей

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

Теги h1, h2, h3, h4, h5, h6 дозволяють створити для читача якусь карту, по якій він зможе швидко зорієнтуватися в тексті. І якщо цими виділеннями вдалося зачепити увагу, то людина затримається на сторінці і напевно прочитає всю статтю. Перевірити результат можна по поведінкових факторів. Якщо люди затримуються на сторінці, здійснюють будь-які дії - значить робота по SEO була виконана не дарма.

H-теги очима пошукових систем

Пошукові роботи збирають з них інформацію для семантичного аналізу. Особливе значення для ботів мають заголовки рівнів h1, h2, h3. Їх непослідовне або неправильне застосування може негативно позначитися на ранжуванні станиці. Якщо в HTML-коді взагалі відсутні h-теги, то сайту доведеться туго в просуванні. Рівні h4, h5, h6 менш значимі.

Ієрархія H-тегів

Головним правилом в розстановці заголовків є їх ієрархія. Необов'язково, щоб теги йшли один за одним за розміром, але неприпустимо в тексті використовувати, наприклад, h3, якщо у вас ніде не присутній мета h2 або застосовувати h6 без h5.

Ось так виглядає ієрархія з правильною вкладеністю:

Що за тег h1

Тег h1 - це зміст тексту (те саме, що назва книги або заголовок статті в газеті).

На кожній сторінці повинен бути один і тільки один тег h1.

У плані привабливості для користувача він має першорядне значення. Але для SEO-просування більшу вагу матиме Title .

Title - це теж заголовок, але прописується він не тільки для людей, а й для роботів. Він відображається не на самій станиці, а тільки у вкладці браузера і в сніпеті як активного посилання на сайт. Фактично title є альтернативним, але головним заголовком для html-документа. Якщо він відсутній, то пошукова система бере за основу h1 і використовує його в серп.

Чому h1 повинен відрізнятися від Title

Досить важливо розуміти, що h1 і Title - це різні заголовки. І їх відповідно треба вміло комбінувати. Ось ази на цю тему:

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

Вимоги по довжині H1

H1 рекомендується робити більш лаконічним, ніж Title, не перевищуючи кількість символів більше, ніж 50. Але не станеться катастрофи, якщо заголовок вийде довше, коли не вдається втиснути всю суть в позначене кількість.

Спеціальні плагіни для WordPress дозволяють проаналізувати правильне заповнення всіх мет прямо в редакторі.

Правила для грамотного написання h1

• Повинен бути унікальним для всього сайту і абсолютно читабельним;
• Чи не повторює тег title, але і не суперечить йому;
• Не варто робити його занадто довгим (більше об'ємним можна робити title);
• Використовується тільки 1 раз на кожну сторінку;
• Релевантний тексту і відображає смислове суть матеріалу;
• Цікавий, привабливий для користувача;
• Не можна ставити в кінці крапку і рекомендується по мінімуму використовувати знаки пунктуації.

застосування ключів

Головні ключові фрази, в першу чергу, повинен містити title. Але слід їх писати і в h1. І там, і там краще це робити на самому початку. Але краще б ключові слова не дублювати один одного в цих двох тегах. Потрібно використовувати різні словоформи або розбавлені входження в h1 і прямі в title.

Деякі беруть все ключі на сторінку і з них складають структуру статей. Відразу врахуйте - без класних ПФ така розсип ключів по підзаголовкам буде каратися фільтром за Переспа.

Психологічні прийоми для складання привабливого заголовка

Заголовок повинен бути «чіпляють». Ось відео від Максима Ільяхова, спеца в галузі засобів масової інформації, ректора Школи редакторів і творця сервісу «Главред»:

Ось ще пара «прийомів», які застосовуються при складанні заголовків.

Рішення проблеми

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

Приклад вдалого заголовка: «Випадає волосся? Зупиніть випадання за тиждень ».
Приклад невдалого заголовка: «Чи можна зупинити випадання волосся?»

У першому випадку ми чітко заявляємо проблему і пропонуємо конкретне рішення. У другому випадку проблема зачеплена побічно і варіанти її вирішення розмиті.

заінтригувати

Приклад вдалого заголовка: «Відкриваємо секрет найефективнішого рецепта від випадіння волосся».
Приклад невдалого заголовка: «Кращий рецепт від випадіння волосся».

Прийом «іспит»

Пропозиція, складене в такій формі, кидає виклик читачеві, пропонуючи йому перевірити себе.

Приклад вдалого заголовка: «Ви впевнені, що правильно боріться з випаданням волосся?»
Приклад невдалого заголовка: «Чи всі ви знаєте про випадання волосся».

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

Навіщо потрібні підзаголовки h2-h6

Теги від h2 до h6 розташовуються вже в тілі самої статті, структурно розділяючи її на тематичні абзаци, і в коді HTML-документа, виділяючи його значущі елементи. Вони також ідентифікуються пошуковими роботами для семантичного аналізу сторінки.

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

h2 - акцентує увагу користувачів і пошукових систем на основний зміст статті. Показує найважливіше в тексті.

h3 - є підпунктом для інформації, що йде під H2, розкриваючи її ще глибше.

h4, h5, h6 - визначаються, як вкладені підзаголовки (розкривають детально суть H2 або H3) та використовуються в тексті, як виділяють дрібні пункти і значущі слова, а також в меню, сайдбарі і інших складових веб-документа.

Довжина всіх h-тегів повинна бути в межах 50 символів.

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

• Не можна, щоб найменший підзаголовок був присутній без більшого. Тобто, якщо в тексті варто метатег h4, то йому обов'язково повинні передувати h2 і h3.
• Чим вище заголовок за рівнем, тим крупніше повинен бути і шрифт. У WordPress зазвичай за замовчуванням виставлені таким чином, що теги автоматично форматуються в правильному вигляді.
• Все h-теги зобов'язані відповідати змісту контенту, відображати суть інформації.
• Неприпустимо використовувати h1-h6 як анкоров або активних посилань.
• Не можна писати інші теги всередині тега h.
• В h-тегах допускається тільки текст і розділові знаки.
• У короткий зміст не повинно бути переспама ключових слів. Ключевики найкраще задіяти в title, h1, h2, а в більш дрібних, таких як h3, h5, h6 робити упор на детальне розкриття теми.

Якщо в розмітці сторінки прописаний title і основний заголовок H1, але сам текст статті не дуже великий і не містить в собі підзаголовків, це не є помилкою. У ТОПі знаходиться чимало сторінок, де контент йде практично суцільною смугою, хіба що розділеної на абзаци. Потрапити в лідируючі позиції можна і без «чаклунства» над розміткою тексту, роблячи більший упор на ПФ . Сайти на WordPress прекрасно індексуються пошуковими системами. Але все ж застосування цих тегів не тільки полегшує завдання, але і робить контент більш легким і приємним для візуального сприйняття.

Як заповнювати h-теги в WordPress

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

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

Є ще простіший спосіб - можна набрати текст в Ворді, використовуючи потрібні розмітки і просто копіпастом перенести статтю в редактор вордпресс. Виділені в Word заголовки автоматично відобразяться в потрібних розмірах. При необхідності можна підправити їх, використовуючи інструменти редактора CMS WordPress.