Урок 112. Оптимизация заголовков H1, H2, H3 и т.д.

Урок 112. Оптимизация заголовков H1, H2, H3 и т.д.

Всем-всем привет!
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 его функционал гораздо шире.

RDS bar в Mozilla Firefox

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

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

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

Как только Вы нажмете на эту кнопку, перед Вашими глазами появится небольшое сообщение:H1, H2, H3 теги

В этом сообщении представлены мета-теги Description, Title, заголовок H1 и другие. Как видите, на страницах моего блога с этим все в порядке, так как исправил этот косяк неделю назад, а вот на клиентском сайте с этим все гораздо хуже.Теги h1 h2 h3 примеры

Перечислю ошибки:

  1. Дублирование между заголовками H2 и H5;
  2. Нет заголовков третьего уровня;
  3. В H4 находиться мусор.

Работы предстоит много, поэтому продемонстрирую исправление ошибок на каком-нибудь одном примере. Попробую-ка изменить теги H5 на H3, чтобы соблюдалась иерархия заголовков.

Как исправить ошибки?

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

  1. Чтобы знать, где именно находится проблемный тег и его стилевой класс, нужно воспользоваться встроенным инструментом браузера «Исследовать элемент»:Исследовать элементНаведите курсор на определенный элемент, нажмите правой кнопкой мыши на него и выберите пункт «Исследовать элемент». В нижней части окна появится область, где можно увидеть и стилевой класс HTML-элемента и его стили CSS:Тег H2 SEO
  2. Посмотрите стилевой класс нужного Вам элемента и скопируйте его, чтобы потом найти его в коде страницы. В моем случае класс заголовка H2 — page-box__title:H1 H2 H3 тегиЯ хочу изменить уровень заголовка H5 на H3, так как в H5 перечисляются релевантные ключевые слова.
  3. Далее необходимо найти в папке сайта элемент с этим классом, для этого воспользуемся встроенными функциями Notepad++, а именно поиском по файлам. Откройте Notepad++, в верхнем меню найдите пункт «Поиск» и в выпадающем меню выберите «Найти в файлах»:Инструмент Notepad++ "Найти в файлах"
  4. В поле «Найти» ввожу стилевой класс заголовка пятого уровня (page-box__title), а в поле «Папка» указываю путь до папки с сайтом:Теги h1 h2 h3 примерыПосле того, как я нажму на кнопку «Найти все», пойдет процесс поиска файла:Процесс поиска в Notepad++
  5. В нижней части рабочего окна Notepad++ будут представлены результаты поиска, среди которых есть и тот самый заголовок пятого уровня (H5) с классом «page-box__title»:Теги h1 h2 h3 примерыЧтобы перейти непосредственно к файлу в котором содержится данный заголовок, достаточно сделать двойной щелчок по результату поиска;
  6. Далее я просто меняю теги <h5></h5> на теги <h3></h3>:Теги H3 SEOОбязательно сохраняю файл;
  7. Смотрим результат на сайте:Теги H3 на сайтеСмотрится не очень.
  8. Чтобы заголовки выглядели нормально, необходимо внести в файл со стилям (style.css) изменения. Так как, приведенные в примере заголовки заключены в тег <a>, то скорее всего правило в style.css будет выглядеть так: .page-box__title > a (дочерний селектор). Поиск в Notepad++ нашел и это:Стили заголовка в Notepad++В стилевое правило нужно добавить свойство font-size (размер шрифта) с нужным, на Ваш взгляд, значением. В моем случае, оптимальным размером шрифта будет 14 px:Размер шрифта тега H3 в style.css
  9. Смотрим результат:Тег H3 примерКак видите, заголовки стали отображаться нормально.

Таким же образом работаем с другими заголовками. Как только закончите работу, не забудьте отправить изменения на сервер. Сделать это можно через FileZilla, о которой рассказывал тут.

  1. В левой части рабочей области выберите нужную папку или файл:Отправка папки на сервер
  2. Вызовите меню правым кликом и выберите «Отправить на сервер:Закачать на сервер FileZilla

Если возникнут какие-либо вопросы, смело задавайте их в комментариях, я обязательно помогу Вам.

Ну а сейчас до свидания!

Пост опубликован: 20/04/2017


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *