Правильне використання h1, h2, h3, h4 в SEO

1. Правило №1: на сторінці повинен бути тільки 1 тег h1.
2. Правило №2: заголовки h2, h3, h4 повинні бути тільки в самій статті.
3. Правило №3: на головній сторінці вкрай бажано використовувати тег h1.

Привіт хлопці! Відчуваю, ситуація загострюється, в коментарях почав прориватися мат, образи на мою адресу. Що ж, а то я вже занудьгував за цими часами. 🙂 Найгірше - це ігнорування. А коли лають - це ж добре, значить когось зачіпаю. Радує. 🙂 Еге-ге-гей, товариш коментатор, привет !!! 🙂 Але через мату мені, твій коментар довелося видалити, я не раз говорив, що лайки подібного плану терпіти не стану.

Багато хто звинувачує мене в продажних статтях. Так, був час, але я ж обіцяв, що їх кількість буде зменшуватися. Але деякі до цих пір думають, що якщо я роблю огляд якогось сервісу - цей пост продажний. Думайте, що хочете, такі панове. Моя совість чиста і посміхаюся я в усі криві свої 32 зуба. Настрій у мене прекрасне, та й моїх відданих читачів воно буде таким, принаймні я буду старатися. 🙂

У минулому уроці я розповідав, про SEO розширення для браузерів RDS bar . Я не просто так вирішив підняти давно за'їжджена тему. Я вирішив поставити крапки над І. Многи читачі у мене запитують, як правильно використовувати заголовки h1, h2, h3 і т.п.? Я вже колись відповідав на це питання в далекому 2012 році. Роблячи аудити багатьох сайтів я бачу одні й ті ж помилки, яких я не визнаю. Значить, прийшов час трохи доповнити той урок.

Можливо, якісь оптимізатори, порахують теги h1 і подібні марними, але все ж більшість підтримує їх. Якщо Ви до сих пір не зрозуміли, SEO - дуже хитра наука, у кожного своя думка.

Правило №1: на сторінці повинен бути тільки 1 тег h1.

Запам'ятайте, тільки 1, а не 2, тим більше не 3. Багатьох цікавить, як же дізнатися кількість даних тегів на сторінці і дуже часто вебмастера починають лізти в вихідний код сторінки і в ручну шукати ці теги. Я теж так робив доти, поки мій "братан по інтернету" Віталій ( http://mojwp.ru/ ) Не підказав мені дуже хитру річ, яка, виявляється, вбудована в мій улюблений SEO bar.

Що вам потрібно?

1. встановлюємо RDS bar на Firefox (На жаль, у версії Google Chrome немає подібного функціоналу).
2. Натискаємо на кнопку "Налаштувати панелі інструментів RDS bar":
3. Вже там ставимо галочку навпроти "SEO-теги" (див. Картинку вище).
4. Заходимо на будь-який сайт в Mozilla Firefox (в моєму випадку ми знаходимося в будь-якій статті WPnew.ru, почнемо з внутрішніх сторінок).
5. На панелі RDS бар натискаємо на кнопку SEO:
6. Тут ми бачимо title сторінки, її description, keywords, але головне, що нас цікавить зараз - це заголовки сайтів! Такий вид сайту - далеко не ідеал в плані SEO, як я вважаю. Як то кажуть, швець без чобіт. 🙂

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

Правило №2: заголовки h2, h3, h4 повинні бути тільки в самій статті.

У моєму випадку Ви бачите, що h2 використовується дуже навіть правильно, а ось в тезі h3, h4 у мене - "сміття". Тобто дані словосполучення не несуть ніяких корисних речей в плані SEO. Більш того, використовуючи теги h в непотрібних місцях ми знижуємо значимість цих тегів для пошукових систем, так як їх "вага" розкидається на непотрібні словосполучення. Тому, теги h повинні бути тільки всередині статті. Так, бувають винятки, коли ключові слова дуже грамотно вписують в окремі блоки по сайту, але туди впихають Ніяк не фразу "Підпишіться на сайт" і т.п.

Як виправити ці помилки?

Для виправлення подібних помилок нам знову знадобиться чергове доповнення, про який я вже розповідав - це Firebug для Firefox (Для Chrome він теж є).

Ми знаходимо елемент в непотрібному нам тезі h на сторінці, наприклад, для прикладу візьму вираз "Підписка" та "Сайт", про які мені підказав RDS bar (вони в h4, см. Картинку вище). Знайшов я ці 2 елементи на сайті (можете скористатися пошуком в браузері Ctrl + F, вбивши необхідну фразу для пошуку), "Інспектуємо" за допомогою Firebug один з них:

І справа ми бачимо стилі даного тега h4 (в моєму випадку):

Вони зараз нам знадобляться. Відкриваємо файл style.css нашої теми і прямо в кінці дописуємо характеристики даного стилю (див. На стрілку картинки вище), просто назвавши його якось по-іншому (я вирішив назвати new4, не забуваємо на початку точку):

Так як цей вислів "Підписка" знаходиться у мене в підвалі, я відкриваю файл footer.php, вбиваю фразу "Підписка" через CTRL + F, ось він:

І замість h4 прописуємо наш новий клас (в моєму випадку "new4"), тобто після видозміни буде така картина:

Зберігаємо файл, відкриваємо Firefox, оновлюємо сторінку і бачимо, що тег h4 зі словом "Підписка" пропав:

Так як стилі слів "Підписка" та "Сайт" у мене не відрізняються, я аналогічно в підвалі замість тега h4 до слова "Сайт" прописую клас "new4", і ми бачимо, що тепер на сторінці "сміттєвих" h4 немає:

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

Якщо ж у Вас раптом стаття не в h1, просто відкрийте файл теми single.php, знайдіть там висновок заголовка статті (шукайте в пошуку через вираз "the_title") і обрамити його в h1:

Правило №3: на головній сторінці вкрай бажано використовувати тег h1.

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

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

Що ж запхати в h1 для головної сторінки? Це може бути текст, куди грамотно включені найбільш запитувані ключові слова, за якими ви рухаєтеся. Повторюся, ПРАКТИКИ вписані, а не тупе перерахування.

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

Запам'ятайте: заголовок h1 повинен бути відмінний від title сторінки. Це буде корисно для пошукового просування.

Зазвичай, десь в цьому місці зустрічається опис сайту (в моєму випадку його немає): Але тут виникає якась проблема: якщо ми пропишемо це опис в h1 в шапці сайту, то воно всередині статей теж буде в h1, що знову неправильно.

Тобто, нам потрібно прописати якусь функцію, яка виконує наступне: якщо ми знаходимося на головній сторінці, то тексту в шапці присвоюється тег h1, якщо ж ми на сторінці відмінною від головної, то відображається той же текст, в такому ж стилі, але вже без тега h1. Це робиться для того, щоб на внутрішніх сторінках не було 2 тега h1 (опис сайту + заголовок статті).

І мій ще один "братан по інтернету", на цей раз вже з Казані, якого звуть Раміль (шкода у нього немає блогу, поставив би зараз посилання), люб'язно поділився цієї PHP функцією (ви ж знаєте, в PHP я не "шарю" ), ось вона:

<? Php if (is_front_page ()) {?&gt; <H1 id = "description"> Опис сайту </ h1> <? } Else {?&gt; <Strong id = "description"> Опис сайту </ strong> <?}?>

Тут ви заздалегідь повинні задати в style.css однакові стилі для h1 і для стилю "description", щоб візуально відвідувачі не бачили відмінностей.

А що стосується h2: заголовки статей на головній сторінці Ви можете залишити в h2 або прибрати, все на ваш розсуд. Якщо ж у Вас виводиться на головній якась статична сторінка (припустимо, у Вас комерційний сайт), то природно, h2 використовується тільки в тексті. Більш докладно про те, як використовувати теги h1, h2, h3, h4 в статтях, я вже розповідав в статті про SEO копірайтинг .

Так само існує думка, що в запобіганні санкцій з боку пошукових систем за "Переспа" заголовки h2, h3 і h4 краще замінювати стилями, наприклад <div class = "zagolovok"> або <p class = "zagolovok">.

По-моєму, все. Якщо будуть питання - пишіть, по-любому відповім. І так, продовжуйте писати веселі коментарі, вони викликають у мене посмішку і піднімають настрій. 🙂