Коротко про заголовки:
Заголовки дають як вашим відвідувачам, так і пошуковим системам важливі підказки про ієрархію контенту та його релевантність.
Існує шість «рівнів важливості», від найважливішого заголовка H1 до найменш важливого H6.
Що таке заголовки?
Заголовки - це фрази на початку розділу, які пояснюють, про що він. Вище, до речі, один із них. Правильне використання заголовків на сторінці забезпечує ієрархію та допомагає швидко показати, про що сторінка. Вони допомагають відвідувачам швидко переглянути сторінку та допомагають пошуковим системам швидко зрозуміти структуру сторінки та її зміст.
Заголовки бувають шести рівнів: від H1 до H6, з яких найчастіше використовуються заголовки H1, H2 та H3. Заголовки визначаються у HTML-коді сторінки.
Заголовок H1 часто називають «основним заголовком», а H2-H6 називають «підзаголовком», оскільки він вказує на підрівні.
Теги заголовків
Говорячи про заголовки, люди часто посилаються на «теги заголовків».
Щоб уникнути плутанини, давайте візьмемо приклад і подивимося на елемент заголовка H1, як він виглядає у вихідному коді HTML:
<h1>Це тег H1</h1>:- <h1>: відкриваючий тег для H1 Це тег H1: текст, який відображатиметься на екрані відвідувача у вигляді тега H1.
- </h1>: тег для закриття H1
Теги хедера
Насамперед, не плутайте теги заголовків з -секцією. По-друге, теги заголовків часто неправильно використовуються для позначення заголовків.
Насправді їх можна використовувати для визначення заголовка документа чи розділу. Це означає, що вони можуть бути обернуті навколо навігації або заголовків. Використовувати їх необов'язково, ось приклад:
<html>
<head>
<title>Заголовки H1-H6 та SEO</title>
</head>
<body>
<article>
<header>
<h1>Пояснення тегів заголовків</h1>
<h2>Короткий вступ до тегів заголовків</h2>
</header>
</article>
</body>
</html>Навіщо використовувати заголовки?
Заголовки корисні як відвідувачам, так і пошуковим системам:
- Відвідувачі використовують заголовки, щоб швидко переглянути сторінку, щоб визначити, наскільки вона актуальна для них. Більше того, відвідувачі з вадами зору використовують програми читання з екрану для перегляду сторінок. Програми читання з екрана покладаються на заголовки, щоб «розуміти» сторінки та допомагати своїм користувачам пересуватися по них.
- Пошукові системи використовують заголовки, щоб зрозуміти структуру сторінки та її теми. У той час як тільки невеликий фактор в алгоритмах ранжирування пошукових систем, включаючи ключові слова в заголовках, дійсно сприяє підвищенню ефективності SEO. Навіть якщо ви не згодні з тим, що заголовки є невеликим фактором ранжирування, майте на увазі, що все, що ви робите для покращення взаємодії з користувачем, зазвичай призводить до підвищення ефективності SEO.
Заголовки та нульова видача
Пошукові системи можуть відображати нульову видачу, спеціальні фрагменти, що містять витримки зі сторінки у своїй пошуковій видачі. Їм необхідно досить добре розуміти зміст, щоб упевнено вибирати ці уривки, і для цього вони покладаються на заголовки. Таким чином, розумне та правильне використання заголовків допомагає вам з'являтися у нульовій видачі, що, у свою чергу, збільшує вашу видимість у пошуковій видачі та приваблює більше органічного трафіку на сайт.
Ось приклад нульової видачі:
Ієрархія заголовків
Заголовки мають бути логічно структуровані на сторінці. Сторінка починається з H1, за яким слідує H2 і — якщо вам потрібен ще один підрозділ — за ним може слідувати H3. Якщо вам потрібно більше підрозділів, ви навіть можете додати H4-H6.
На ілюстрації нижче ми використовуємо три рівні заголовків:
Не пропускайте рівень у ієрархії. Наприклад, не переходьте від H1 відразу до H3. Між ними має бути щось H2 середнє.
Ось гарний приклад правильного використання заголовка:
<h1>Це має описувати тему сторінки</h1>
<h2>Це підзаголовок H2</h2>
<h3>Це підзаголовок H3</h3>
<h2>Це ще один підзаголовок H2</h2>
<h3>Це ще один підзаголовок H3</h3>Якщо ви пишете об'ємний контент, можна використовувати багато заголовків. У вас може бути така структура заголовка, як:
<h1>Це має описувати тему сторінки</h1>
<h2>Це підзаголовок H2</h2>
<h2>Це ще один підзаголовок H2</h2>
<h3>Це підзаголовок H3</h3>
<h4>Це підзаголовок H4</h4>
<h5>Це підзаголовок H5</h5>
<h6>Це підзаголовок H6</h6>
<h2>Це ще один підзаголовок H2</h2>
<h3>Це підзаголовок H3</h3>
<h4>Це підзаголовок H4</h4>
<h5>Це підзаголовок H5</h5>
<h6>Це підзаголовок H6</h6>А ось приклад ієрархії заголовків, якої слід уникати:
<h2>Чому цей H2 вгорі?</h2>
<h4>І чому це заголовок H4?</h4>
<h1>Цей заголовок H1 мав бути вгорі</h1>
<h3>А я просто повз проходив</h3>Розміри заголовків
Чим далі ви опускаєтеся із заголовками, тим менше вони повинні ставати. H1 має бути найбільшим заголовком на сторінці. H2 трохи менше, ніж H1, і, у свою чергу H3, менше, ніж H2 і так далі.
Наприклад:
Порядок заголовків у вихідному коді
Неважливо, як заголовки з'являються у вихідному коді HTML. Порядок, у якому заголовки представлені на екрані відвідувача (або відображення сторінки пошуковими системами), є головним.
Заголовок H1
H1 визначає основну тему сторінки. Він повинен бути тісно пов'язаний із вмістом сторінки, унікальним на вашому сайті, і сторінка повинна містити лише один H1.
Не розміщуйте H1 навколо зображення, оскільки пошукові системи не розуміють зображення так само добре, як текст. Ви пропустите можливість повідомити пошукові системи, про що сторінка.
<h1><img src="logo.png"></h1>Ваш заголовок H1 може збігатися з тегом Title, але це не обов'язково. Відвідувачі з більшою ймовірністю помітять H1, ніж Title, тому завжди приділяйте першочергову увагу тому, щоб ваш заголовок був зрозумілий вашим відвідувачам.
<title>Що таке заголовки H1-H6?</title>
<h1>Пояснення заголовків H1-H6</h1>Довжина заголовка H1
Ви повинні уникати робити H1 занадто довгим. Якщо ви зробите це, існує велика ймовірність того, що ваші відвідувачі не захочуть читати ваш текст, що зашкодить поведінковим факторам. Ми рекомендуємо дотримуватися максимальної довжини 60 символів, аналогічно атрибуту title. Що стосується мінімальної довжини, H1 повинен мати хоча б мінімальний зміст.
Декілька заголовків H1? Навіть у HTML5
Коли HTML5 специфікація була введена вперше, була включена підтримка декількох H1 на сторінці (кожен у своєму власному елементі розділу). Однак, оскільки браузери не прийняли цю рекомендацію, її підтримка була припинена після HTML5.1. Для отримання додаткової інформації див. цю гілку W3C.
Інші варіанти використання заголовка H1
Якщо ви не визначили заголовок сторінки або якщо пошукові системи не вважали ваш заголовок досить релевантним, вони можуть відобразити H1 сторінки в результатах пошукової системи.
Підзаголовки H2-H6
H2-H6 використовуються для подальшої структуризації контенту.
Більшості сторінок корисно мати принаймні один елемент H2, але якщо для відвідувачів це не принесе користь, ви можете його не використовувати.
Використовуйте H2-H6 там, де це має сенс, і пам'ятайте, що не можна пропускати рівні заголовків.
Часті питання про заголовки
Чи справді заголовки покращують позиції сайту?
Так, вони допомагають! Навіть сьогодні заголовки, як і раніше, відіграють важливу роль у передачі релевантності ключових слів пошуковим системам.
Хоча роль заголовків в алгоритмах пошукових систем з роками зменшилася, вони надсилають пошуковим системам чіткий сигнал у тому, що сторінка.
Чи можуть Title та заголовок H1 збігатися?
Так. Але майте на увазі, що завжди слід формувати заголовок H1, найбільш підходящий для ваших відвідувачів.
Чи можу я мати кілька заголовків H1 на одній сторінці?
Рекомендується використовувати лише один заголовок H1 на сторінці. У HTML5 з'явилося кілька заголовків H1 на сторінці, але браузери не зрозуміли цієї ідеї. Починаючи з HTML5.1, підтримка декількох заголовків H1 не підтримується.
