Теги заголовка: що це таке і як ними користуватися

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

Я просто додав слова та фрази, виділені жирним шрифтом, які добре виглядали та сподівалися бути випадковим чином вибрані для сторінок результатів пошукової системи (SERP).

Тепер я знаю, що є наука оптимізація блогу, і те, що я додавав у свої публікації в блозі, щоб вони виглядали професійно, називалося тегами заголовків/заголовків — і є важливим інструментом для розуміння та SEO.

Ось короткий посібник щодо тегів заголовків і для чого вони використовуються:

• H1 — Назва посади. Зазвичай вони зосереджені на ключових словах, зосереджені навколо «великої ідеї» сторінки чи публікації та створені, щоб привернути увагу читача.
• H2 — Це підзаголовки, які класифікують основні моменти ваших параграфів і окремих розділів. Розгляньте можливість використання семантичних ключових слів, пов’язаних із «великою ідеєю» у вашому H1, а також допоможете читачеві легко знайти розділи, які вони хочуть прочитати.
• H3 — Це підрозділи, які додатково роз’яснюють пункти, зроблені в H2. Крім того, їх можна використовувати для форматування списків або маркерів.
• H4 —Це підрозділи, які додатково роз’яснюють пункти, зроблені в H3. Крім того, їх можна використовувати для форматування списків або маркерів.

«H» у H1, H2 тощо офіційно означає «елемент заголовка», хоча спільнота SEO також зазвичай називає ці теги «тегами заголовка».

Як ви можете здогадатися з наведеного вище посібника, цифра вказує на ієрархічний зв’язок між кожним із них (з H1 — найважливішим, H2 — менш важливим і так далі).

Ось приклад того, як ця ієрархічна структура може проявлятися в плані блогу:

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

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

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

Для ілюстрації, тег заголовка в прикладі нижче є заголовком, «Остаточний посібник з маркетингу продуктів у 2021 році».

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

Дивіться Перо H1 Приклад 1 Крістіна Перріконе (@hubspot) На CodePen.

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

Скільки тегів заголовків підтримує HTML?

HTML підтримує до шести тегів заголовків (H1-H6), які можна використовувати для структурування сторінки за потреби. Їх можна візуально стилізувати відповідно до вашого бренду, і, за винятком H1, ви можете мати скільки завгодно таких тегів на сторінці. 

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

Нижче наведено знімок екрана публікації блогу HubSpot із прикладами тегів заголовків, позначених стрілками:

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

Тепер, коли ви знаєте трохи більше про теги заголовків, давайте розберемося, як вони використовуються для SEO.

Теги заголовків і SEO

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

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

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

Ось чому під час використання тегів заголовків важливо переконатися, що вони правильно відповідають a намір ключового слова. Якщо тег H1 публікації не містить ключового слова або якщо ви вставляєте невідповідний текст у теги H2 і H3, Google буде важче зрозуміти сторінку. У результаті ця сторінка не матиме такого рейтингу, як могла б. 

Для ілюстрації припустімо, що ваше ключове слово «електронна комерція». Ви б хотіли, щоб це було відображено у вашому тегу H1, тому назва на зразок «Посібник із відкриття електронної комерції» буде ідеальною. Це підкаже Google, як саме надсилати веб-браузерам вашу публікацію.

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

Вам також не потрібно придумувати ключові слова самостійно — насправді, ви можете зробити це легко дослідження ключових слів щоб допомогти вам або ознайомитися з інструментами дослідження ключових слів, як-от SEMRush or Ahrefs. Просто переконайтеся, що ваші теги заголовків дружні як для людей, так і для роботів пошукової системи.

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

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

Як додати теги заголовків у HTML

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

Наприклад, якщо ваш h1 був "Посібник із започаткування електронної комерції,це виглядатиме так:

Дивіться Перо H1 Приклад 2 Крістіна Перріконе (@hubspot) На CodePen.

Це працюватиме для HTML4 або старішої версії. Якщо ви працюєте з HTML5, вам, можливо, доведеться використовувати дещо інший рядок, щоб отримати той самий результат. Зміна полягає в тому, щоб попередити Google про те, що таке H1:

Дивіться Перо H1 Приклад 3 Крістіна Перріконе (@hubspot) На CodePen.

Ви також можете поставити розділові знаки між двома тегами. Наприклад, ви можете мати:

Дивіться Перо H3 Приклад 1 Крістіна Перріконе (@hubspot) На CodePen.

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

Деякі платформи для ведення блогів, як-от WordPress і HubSpot, мають опцію на панелі інструментів для створення тегів заголовка, тож щоразу, коли ви хочете додати тег, вам не потрібно копатися у вихідному коді чи HTML, щоб це зробити.

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

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

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

Примітка редактора: Ця публікація була спочатку опублікована у січні 2020 року та оновлена ​​для вичерпності.

Джерело: https://blog.hubspot.com/marketing/header-tags