Чем заменить H1-H6?

Категория: Разработка Теги: Веб-разработка Опубликовано: 12 июня 2022 г. 23:03
Заголовки H3 в боковых блоках
Заголовки H3 в боковых блоках

Верстальщики, как известно, не SEO-специалисты и понимать в этом направлении не обязаны. Да, сейчас появился термин "Семантическая вёрстка", но для них она ограничивается вставкой тегов из HTML5 - main, nav, footer, header, article, aside и т.п.

Проблематика заголовков h1, h2, h3, h4, h5, h6

О чем это я? Да о том, что они очень любят использовать заголовки h1, h2, h3, h4, h5, h6 везде где их не должно быть в принципе. Например, в Footer. Подумаем логически, H1 даёт понять браузеру, что текст в этом теге является основным заголовком страницы, и если их штук 10 на ней, то какой вывод можно сделать? Потом не спрашивайте, почему происходит пессимизация по определенным запросам.

Есть и другой прикол, H1 в каком-либо блоке или в логотипе может встречаться раньше заголовка из статьи, и в таком случае основным заголовком может посчитаться логотип. И будет у вас при наличии 100 материалов на сайте - 100 статей с одинаковыми H1 для множества интернет-сервисов, включая некоторые функции поисковиков Yandex и Google.

В общем, заголовки H1-H6 должны быть только в статье. В других местах кроме статьи их не должно быть. С точки зрения поисковой оптимизации это очень плохо. И, естественно, дублироваться они не должны.

Чем заменить заголовки H1-H6?

Возникает логичный вопрос, как и чем их заменить? Ведь при попытке заменить их на другой HTML тег портится все оформление.

Есть простое решение проблемы, это тег span и его параметр style.

Мы можем заменить h1 на span и перенести в него параметр class="...", но ситуацию это не спасёт.

После переноса свойства class в span нужно написать параметр style="" и внутри этого параметра нужно указать все стили оригинального заголовка. 

Нажимаем на исходный заголовок правой кнопкой мыши и выбираем пункт "Просмотреть код".

Откроется приблизительное похожее окно (описывать для всех браузеров не буду):

Просмотр кода заголовка H1

Обязательно, чтобы в HTML коде был выделен именно заголовок H1-H6, и вот CSS-стили из блока справа нужно перенести в параметр style нашего span. Зачеркнутые строки переносить не нужно. Также стиль из "таблица стилей агента пользователя" переносить не нужно, так как его генерирует браузер клиента.

После переноса стилей в параметр style тега span все должно отображаться как нужно.

Бывают ситуации, когда верстальщик ужасен, и он делает внутри заголовка H1 вложенный тег a, то есть ссылку. Для SEO это ужас. В таком случае могут быть проблемы с оформлением, но это можно решить при помощи тега div. Предлагаю следующую конструкцию:

<span class="blog-name pt-lg-4 mb-0" style="margin-top:10px; line-height: 1.2;">
<div class="blog-name pt-lg-4 mb-0">
<a class="blog-name pt-lg-4 mb-0" href="/">Главная страница</a>
</div>
</span>

На теги span перешли все топовые сайты, например, SOFTPEDIA или сайты крупных СМИ.

Похожие материалы:


Код функции-контроллера с декоратором
Разрешить только определенные HTTP запросы при помощи require_http_methods в Django
Автор: Алексей Черемных3 января 2021

В Django существует довольно простой способ разрешить только определенные типы HTTP запросов при помощи декоратора представлений require_http_methods.

Для этого необходимо во …

Форма заявки (пример)
Django автоматическое заполнение поля в модели при её создании
Автор: Алексей Черемных10 января 2021

Появилась необходимость заполнить поле с номером заявки до формирования формы, связанной с моделью, но как это сделать? В интернете много способов, …

Код функции
Простой способ в Django блокировать конкретные IP на всем сайте
Автор: Алексей Черемных3 января 2021

На любом сайте приходится блокировать определенные IP адреса. Если таковых нет, это значит только одно - что этим сайтом никто не …

VisualSEOStudio
Бесплатная программа для создания карты сайта
Автор: Алексей Черемных30 ноября 2020

Сегодня не так много бесплатных программ для создания карты сайта. Пара штук, и те работают как не очень. О переводе …

Код
Способ передать варианты выбора choices в forms.ChoiceField из views.py
Автор: Алексей Черемных21 июня 2021

Недавно сам столкнулся с проблемой передачи вариантов выбора для поля формы с типом виджета Radio и типом формы forms.ChoiceField из views.py. Зачем, …

Прогон по каталогам
Есть ли эффект от прогонов по каталогам?
Автор: Алексей Черемных28 ноября 2020

Уже давно разного рода сео специалисты спорят о пользе от прогона по каталогам. Под прогоном имеется в виду рассылка объявлений, …

Все теги:

Подписка на рассылку свежих статей