Домой / Статьи / Как правильно использовать теги H1-H6 в структуре шаблонов сайтов на LiveStreet
html код

Как правильно использовать теги H1-H6 в структуре шаблонов сайтов на LiveStreet

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

Почему это важно: 

Вы можете сказать, да надоели уже эти сеошники со своими  хитростями и тонкостями. Но дело в том, что за неправильное использование тегов заголовков H1-H6 (в частности) поисковые системы Яндекс и Googleнакладывают на сайт фильтр за переоптимизацию/переспам и понижают позиции сайта в поисковой выдаче, что ведет к снижению трафика на сайт из результатов поиска. В Google, в частности, этот фильтр является частью известного фильтра Panda. В Яндексе фильтр в шутку назвали «Ты спамный». Он начал работать особо активно где-то с июля 2013 года и накладывается на сайт автоматически.

Из практики, спасти сайт от наложения такого фильтра, даже если на нем неправильно использованы теги H1-H6, strong и т.д.,  могут  только хорошие поведенческие факторы. Если сайт интересен пользователю, у него большое число просмотров  на одного пользователя, длительное время нахождения посетителя на сайте, материалы активно комментируются, репостятся в социальные сети, то такому сайту поисковые системы могут простить переоптимизацию тегами  и переспам ключевыми словами (в разумных пределах, конечно).   Но это если у вас уже старый раскрученный проект, а вот если вы делаете новый проект на LiveStreet, то санкций вам не избежать.

Заметить  такие фильтры можно по падению позиций сайта по большому количеству запросов и снижению трафика из поисковых систем. Сайт обычно проседает равномерно по  всем запросам.

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

Вот какая картина у меня получилась:

Общие требования к тегам H1-H6:

1. Теги должны быть по возможности чистыми, без стилей и классов

Правильно

<h1>Заголовок статьи<h1>

Неправильно

<h1 class=title>Заголовок статьи</h1>

2. Теги H1-H6 должны применяться только для оформления основного  текста. Не допускается их использование для оформления элементов дизайна сайта, названий блоков в сайдбарах, меню, ссылок.

3. Категорически не рекомендуется использование тегов H для оформления ссылок. Это одно из грубейших нарушений, за которое сайт точно «получит по голове».

4. Нельзя использовать один тег H внутри другого. Также нельзя использовать внутри тегов H другие теги для выделения текста strong, em и т.п. Все подобные оформления должны быть при необходимости сделаны через стили CSS.

Неправильно:

<h1>Заголовок  <h2>интересной</h2>  <strong>статьи</strong><h1>

 

Частные требования к  тегам H1-H6:

Тег H1 – должен использоваться только для оформления заголовка статьи. На одной странице сайта должен быть только один тег H1. Он должен размещаться как можно ближе к началу страницы. За тегом H1 должен следовать основной текст страницы.

Тег H2 – должен использоваться для оформления подзаголовков на странице. Должен следовать за тегом H1 и не должен размещаться выше тега H1 (первого на странице).

Тег H3 – должен использоваться для оформления подразделов статьи, имеет приблизительно такой же вес, как тег strong

Теги H4, H5, H6 – практически не имеют значения и влияния. Текст, оформленный этими тегами, ранжируется где-то чуть ниже, чем текст, выделенный жирным шрифтом (тегом strong).

 

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

<h1>Заголовок статьи</h1>

текст

<h2>Подзаголовок  статьи</h2>

текст

<h3>Подзаголовок раздела</h3>

Текст

<h3>Подзаголовок раздела</h3>

текст

<h2> Подзаголовок статьи</h2>

текст

 Что мы имеем на сегодняшний день  в структуре шаблонов  сайтов на LiveStreet

1. Заголовок статьи оформлен тегом H1, но с использованием классов стилей внутри тега – не критичная, но ошибка.

2. Ссылка на главную страницу из логотипа оформлена тегом H1.

<h1 class=»site-name»><a href=»http://site.ru»> site.ru </a></h1>

2. В редакторе доступны для оформления текста только теги H4-H6, которые как было указано выше имеют очень маленький вес. При попытке вставить теги  H1-H3 они вставляются как обычный текст, без выделения жирным шрифтом и без увеличенного размера шрифта.

3. Для оформления заголовков блоков в сайдбаре  используются теги H3.

4. На главной странице сайта ссылки на топики оформлены тегом H1 .

<h1 class=»topic-title word-wrap»><a href=»http://omode.by/make-up-collections/2014/03/08/vesennyaya-kollekciya-bleskov-dlya-gub-dior.html»>Весенняяколлекцияблесковдлягуб Dior</a></h1>

5. Ссылка на блог, в котором опубликован топик оформлена тегом H3.

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

1. Добавить возможность использовать теги H2 и H3 в редакторе. Теги H4-H6 я бы убрал вообще.

2.  Убрать теги H1 с главной страницы сайта из оформления ссылок на топики.

3. Убрать теги H3 из оформления блоков, комментариев, ссылки на блог, в котором опубликован топик.

4. Убрать стили из кода тегов H1 (не принципиально, но желательно).

 

2 комментария

  1. Официальные сообщения Google: допускается наличие нескольких h1
    ютуб.ком/watch?v=GIn5qJKU8VM

  2. Тег A разрешен внутри тега H

    http://www.w3.org/TR/html-markup/h1.html

    Permitted parent elements
    any element that can contain flow elements, hgroup

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

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