1. Правила використання заголовків
2. Як зрозуміти чи правильно використані заголовки?
3. Як виправити помилки?

Всім-всім привіт!
SEO-просування - це робота комплексна, що вимагає уваги до кожної дрібниці. Навіть неправильне використання заголовків (теги H1, H2, H3) на сторінках сайту може заважати нормальному просуванню в пошукових системах. Сьогодні ми якраз про це і поговоримо.

Для продовження уроку рекомендую почитати наступні статті:

1. Урок 109. Основи HTML | Вчимося працювати з кодом сайту ;
2. Урок 110. Основи CSS | Вчимося керувати зовнішнім виглядом сайту ;
3. Урок 111. Працюємо з текстовим редактором Notepad ++ .

Все, що описано в перерахованих вище уроках, стати в нагоді сьогодні.

Погнали!

Правила використання заголовків

У світі SEO існують якісь правила використання тегів H1, H2, H3 і нижче, які бажано би дотримуватися на всіх сторінках:

• На сторінці повинен бути тільки один єдиний заголовок першого рівня (H1);
• Тема H1 не повинен збігатися з Title сторінки;
• Заголовки H2, H3, H4 повинні використовуватися тільки в усередині статті;
• У заголовках повинні використовуватися тільки фрази, які дають користь, тобто, в тегах H1 ... H6 не повинно бути безглуздих фраз, типу: відгуки, підписатися, коментарі і т.п .;
• Дотримуйтесь ієрархію заголовків. Тема другого рівня повинен бути нижче H1, заголовок третього рівня повинен бути нижче першого H2. Якщо буде інакше, то пошуковий робот, який бачить тільки HTML-код, неправильно сприйме сторінку, чого ми не хочемо.

Коротко про ці правила я вже писав в уроці, присвяченому SEO копірайтингу . Обов'язково прочитайте, там багато корисного!

Як зрозуміти чи правильно використані заголовки?

Ви знайомі з браузером Mozilla Firefox? Напевно, так. Так ось, цей браузер, завдяки одному плагіну з хорошим функціоналом, надає шикарні можливості для аналізу сторінок. Назва цього плагіну - RDS bar. Завантажити його можна по цим посиланням , Але зробити це необхідно в Firefox, тому, якщо даний браузер, ви не маєте, швидше завантажуйте його і встановлюйте.

RDS bar можна встановити і на інші браузери, але саме в Mozilla Firefox його функціонал набагато ширше.

Перш, ніж ми перейдемо до аналізу сторінок сайту, необхідно внести невеликі настройки в плагін:

1. Як тільки плагін буде встановлено, Вам потрібно буде перейти до налаштувань, натиснувши на невелику шестірню:
2. Поставте галочку напроти пункту «SEO-теги»: Не забудьте натиснути на кнопку «Застосувати».

Тепер ми зможемо спокійно подивитися скільки тегів H1, H2, H3 перебувати на сторінці, побачимо зайві заголовки і будемо знати, що потрібно правити. Побачити все це пишність можна, натиснувши на кнопку SEO-теги в RDS bar, яку тільки що активували:

Як тільки Ви натиснете на цю кнопку, перед Вашими очима з'явиться невелике повідомлення:

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

Перерахую помилки:

1. Дублювання між заголовками H2 і H5;
2. Немає заголовків третього рівня;
3. У H4 перебувати сміття.

Роботи попереду багато, тому продемонструю виправлення помилок на якомусь одному прикладі. Спробую-но змінити теги H5 на H3, щоб дотримувалася ієрархія заголовків.

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

Для цього мені знадобляться файли сайту ( звідки їх взяти? ), Notepad ++ і Mozilla Firefox.

1. Щоб знати, де саме знаходиться проблемний тег і його стильовий клас, потрібно скористатися вбудованим інструментом браузера «Дослідити елемент»: Наведіть курсор на певний елемент, натисніть правою кнопкою миші на нього і виберіть пункт «Дослідити елемент». У нижній частині вікна з'явиться область, де можна побачити і стильовий клас HTML-елемента і його стилі CSS:
2. Подивіться стильовий клас потрібного Вам елемента і скопіюйте його, щоб потім знайти його в коді сторінки. У моєму випадку клас заголовка H2 - page-box__title: Я хочу змінити рівень заголовка H5 на H3, так як в H5 перераховуються релевантні ключові слова.
3. Далі необхідно знайти в папці сайту елемент з цим класом, для цього скористаємося вбудованими функціями Notepad ++ , А саме пошуком по файлах. Відкрийте Notepad ++, в верхньому меню знайдіть пункт «Пошук» і в випадаючому меню виберіть «Знайти в файлах»:
4. В поле «Знайти» вводжу стильовий клас заголовка п'ятого рівня (page-box__title), а в полі «Папка» вказую шлях до папки з сайтом: Після того, як я натисну на кнопку «Знайти всі», піде процес пошуку файлу:
5. У нижній частині робочого вікна Notepad ++ будуть представлені результати пошуку, серед яких є і той самий заголовок п'ятого рівня (H5) з класом «page-box__title»: Щоб перейти безпосередньо до файлу в якому міститься даний заголовок, досить зробити подвійне клацання по результату пошуку;
6. Далі я просто міняю теги <h5> </ h5> на теги <h3> </ h3>: Обов'язково зберігаю файл;
7. Дивимося результат на сайті: Виглядає не дуже.
8. Щоб заголовки виглядали нормально, необхідно внести в файл зі стилями (style.css) зміни. Так як, наведені в прикладі заголовки укладені в тег <a>, то швидше за все правило в style.css буде виглядати так: .page-box__title> a (дочірній селектор). Пошук в Notepad ++ знайшов і це: У стильове правило потрібно додати властивість font-size (розмір шрифту) з потрібним, на Ваш погляд, значенням. У моєму випадку, оптимальним розміром шрифту буде 14 px:
9. Дивимося результат: Як бачите, заголовки стали відображатися нормально.

Таким же чином працюємо з іншими заголовками. Як тільки закінчите роботу, не забудьте відправити зміни на сервер. Зробити це можна через FileZilla, про яку розповідав тут .

1. У лівій частині робочої області виберіть потрібну папку або файл:
2. Викличте меню правим кліком і виберіть «Відправити на сервер:

Якщо виникнуть будь-які питання, сміливо задавайте їх у коментарях, я обов'язково допоможу Вам.

Ну а зараз до побачення!