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

В свете возможного скорого выхода новой версии движка LiveStreet хотелось бы обратить внимание уважаемых разработчиков движка, разработчиков шаблонов и сообщества на вопрос о правильном использовании тегов заголовков H1-H6 в структуре шаблонов и редакторе топиков сайтов на 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=«site.ru»> site.ru </a></h1>

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

редактор LiveStreet

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

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

<h1 class=«topic-title word-wrap»><a href=«livestreet.ru/blog/sollutions/16851.html»>Как изменить главную страницу сайта?</a>

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

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


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

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

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

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

Со своей стороны готов поучаствовать лично в решении данного вопроса, для того, чтобы наш любимый LiveStreet стал еще лучше в следующей редакции.

17 комментариев

avatar
Все сео строится на догадках «мы опытным путем выяснили», «мы проанализировали». И каждый пишет что именно так должно быть. h1 без класса? почему? где результаты «анализа» или «тестов»?

Да, действительно, есть уже общепринятые истины, но все равно каждый такой топик — читается как личные мысли автора.

Вот официальные документы гугла по оптимизации:

www.google.ru/intl/ru/webmasters/docs/search-engine-optimization-starter-guide-ru.pdf — 32 страничный базовый документ
support.google.com/webmasters/answer/35769?hl=ru
support.google.com/webmasters/answer/35291?hl=ru

Советы яндекса:

help.yandex.ru/webmaster/yandex-indexing/webmaster-advice.xml
help.yandex.ru/webmaster/files/recommendations.pdf

Вот это воспринимается серьезнее. Потому что от компетентных людей. Про вас неизвестно ничего: какие проекты продвинули, какие позиции они занимают, информации о себе — ноль.

С таким успехом можно написать что h1 должны быть 72px и красным цветом. Есть много официальных документов-рекомендаций от ПС и нужно руководствоваться именно ими. Ни в одном документе, например, не нашел что заголовок будет считаться пс «лучше» если у него не будет класса.

Поэтому считаю что такие топики могут принести пользу ровно столько же, сколько и навредить.
avatar
Мысль PSNet интересная но всё же
4. Для оформления заголовков блоков в сайдбаре используются теги H3.
Чем предлагаєе его заменить?
avatar
<div class="titleblock">Заголовок<div>
avatar
Все верно, такой вариант отлично подойдет. Основной посыл — использовать теги заголовков H только в основном тексте, а как вы оформите сайдбар, совершенно неважно, главное, чтобы там не было тегов заголовков.

Тут как в анекдоте:
Это неважно, толстая ты или худая. Главное, чтоб не толстая.
avatar
Отвечаю по порядку:

1. Немного о себе. 38 лет, образование высшее, SEO занимаюсь с 2001 года.

Принимал участие в той или иной мере в разработке и продвижении таких проектов, как TUT.BY (ведущий белорусский портал), Onliner.by и 1k.by (ведущие белорусские торговые площадки) Atlant-m.by (сеть автосалонов разных марок). Всего более 60 проектов. Уже лет 5 не работаю на других за исключением помощи паре знакомых. Продвигаю собственные проекты.

Материалы моих исследований и статьи разных лет использованы для подготовки учебных курсов по интернет маркетингу в российских вузах и в книге Ашманова «Оптимизация и продвижение сайтов в поисковых системах».

2. По поводу тестов. Проводились на чистых, свежезарегистрированных доменах без истории в зоне RU. В ходе эксперимента были созданы страницы с разной HTML разметкой на одну тему и со схожими параметрами (число символов, качество текста, число и параметры входящих ссылок). Выбраны три разные тематики (строительство, автомобили, женская тематика). Время проведения эксперимента: с ноября 2013 по февраль 2014 года.

Сравнивались страницы с эталонной разметкой шаблона LiveStreet Synio и шаблоны, созданные по рекомендациям от двух крупных российских интернет студий. Информация инсайдерская, для внутреннего использования, давали мне ее под честное слово, поэтому называть студии не могу.

В ходе эксперимента выяснилось, что при прочих равных параметрах сайты движке на LiveStreet и шаблоне Synio ранжируются поисковыми системами Яндекс и Гугл хуже (на 6-13 позиций ниже), чем сайты, созданные по рекомендациям, описанным в статье.

Мои эксперименты, разумеется, нельзя считать истиной в последней инстанции. Поисковые системы постоянно что-то меняют и подкручивают в своих алгоритмах.

Но, по крайней мере, хуже от выполнения рекомендаций точно не станет. Мне они кажутся вполне логичными.

Насчет вашего замечания о необходимости убрать стили из кода тега H1 я тоже не уверен, поэтому и написал, что желательно, а не обязательно, хотя некоторые мои коллеги настаивают, что это важно.

3. Кроме собственно экспериментов у этой информации два основных источника.

Как уже писалось выше это:

1) инсайдерская информация (фактически, учебники по SEO для внутреннего использования) из двух крупных российских интернет студий (я бы даже сказал холдингов) в которых есть отделы, занимающиеся анализом алгоритмов поисковых систем.

2) Информация от специалистов, занимающихся вытаскиванием сайтов из-под фильтров поисковых систем.
avatar
А про контент не уточнили, а в современном сео нет ничего важнее контента.
Вы ведь не использовали для своего эксперимента на нескольких сайтах одинаковый контент :)
Соответственно, даже глупое словосочетание в тексте смогло повлиять на + или — в позициях.
avatar
очень быстрый беглый взгляд на tut.by и onliner.by

tut.by:

<h1><a class="ad" data-atom-target="main_news_1" target="_self" href="http://news.tut.by/auto/402568.html"><img width="454" height="304" alt="" src="http://img.tyt.by/432x288c/n/01/b/q3_1tit.jpg" class="b-mainnews__img"> Время выгодных вложений!</a></h1>


<h3 class="b-label rGeoTarget rGT15800"><a data-atom-target="geonews/minsk" title="Минск" href="http://news.tut.by/geonews/minsk/">Новости Минска</a></h3>


<h3 class="b-label r10"><a data-atom-target="politics" title="Политика" href="http://news.tut.by/politics/">Политика</a></h3>


onliner.by:

<h3 class="b-tile-header">
            <span class="txt max-lines-4" style="float: none; position: static;">Бросил все и переселился в дом на колесах</span>
            <div class="complementary">
                                    <span class="complementary-item photo">35<i class="b-icon-3"></i></span>
                                                            </div>
        </h3>


<h2>
        <a href="http://tech.onliner.by">Технологии</a>
    </h2>
avatar
Полностью поддерживаю автора топика.
avatar
TUT.BY и Onliner я приводил в качестве примера работ. Было это довольно давно, когда эти проекты только начинали развиваться. Их уже после этого пределывали и дорабатывали много раз.

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

А вот маленьким и начинающим проектам, я считаю, следует обращать внимание на все тонкости и нюансы и использовать все доступные конкурентные преимущества.

Как минимум, у меня пожелание к авторам LiveStreet добавить в редактор возможность использования тегов H1-H3.
avatar
с «добавить в редактор возможность использования тегов H1-H3», тут я полностью поддерживаю автора, и было бы не плохо показать эталон так сказать «красоты в SEO» на личном примере, «засветить» можето один сайт, от этого плохо точно не будет.
avatar
Мне немного непонятно вот это место:
2. Теги H1-H6 должны применяться только для оформления основного текста. Не допускается их использование для оформления элементов дизайна сайта, названий блоков в сайдбарах, меню, ссылок.
Особенно в части ссылок и элементов дизайна.
1. Например, заголовки в списках топиков с одной стороны традиционно оформляются тегом H1-6, а с другой стороны служат ссылкой на сам топик. По вашему мнению это ошибочно или я не так понял?
2. Логотип сйта может быть оформлен тегом H1-6? На самом деле это тоже достаточно распространённое явление в сети.
avatar
На счет классов в тегах H разницы не имеет, Яндекс сам этим балуется.
А вот то что на всех страницах H1 это название сайта — это беда. По сути мы тегом показываем что самое важное на странице, так вот H1 в названии сайта должен использоваться только на главной странице, на остальных H1 должен быть основной заголовок: Название блога, Топика и т.д.
avatar
На счет классов в тегах H разницы не имеет, Яндекс сам этим балуется.
Дык, вроде я про это и не спрашивал. ))
А вот то что на всех страницах H1 это название сайта
И этого не говорил. Мне интересно мнение про логотип (картинка) оформленный такими тегами, встречал в сети не раз.
avatar
Случайно ответил тебе, хотел написать общую мысль :)
avatar
Ок. ))
avatar
по поводу заголовков H в статье livestreetguide.com/dev/optimizaciya-shablonov.html и разделе «приложение» есть пример кода для решения вопроса размера заголовков.
avatar
По теме. и пунктам улучшения из публикации согласен только с
1,2, но те кто имеет хоть какое-то представление о сайтостроении и делает не очередной говносайт или сплог правят эти недостатки сразу.

А вообще, h1-h6 — это заголовки. И в убывающем порядке они как бы говорят о своей значимости. И оформлять какие-то отдельные эдементы дизайна или же блоки с данными заголовками — это вполне нормально, ну а как мы по-другому скажем ПС, что именно данный блок имеет какой-то вес. Вообще, если сайдбар вынести в aside, то поисковым системам будет пофиг, что там есть h3.
А выделение некоторых ссылок тегами h2-h3-h4 — это передача веса в зависимости от важности той или иной ссылки.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.