К вопросу о правильном использовании тегов H1-H6 в структуре шаблонов сайтов на LiveStreet
В свете возможного скорого выхода новой версии движка LiveStreet хотелось бы обратить внимание уважаемых разработчиков движка, разработчиков шаблонов и сообщества на вопрос о правильном использовании тегов заголовков H1-H6 в структуре шаблонов и редакторе топиков сайтов на LiveStreet.
Почему это важно:
Вы можете сказать, да надоели уже эти сеошники со своими хитростями и тонкостями. Но дело в том, что за неправильное использование тегов заголовков H1-H6 (в частности) поисковые системы Яндекс и Googleнакладывают на сайт фильтр за переоптимизацию/переспам и понижают позиции сайта в поисковой выдаче, что ведет к снижению трафика на сайт из результатов поиска. В Google, в частности, этот фильтр является частью известного фильтра Panda. В Яндексе фильтр в шутку назвали «Ты спамный». Он начал работать особо активно где-то с июля 2013 года и накладывается на сайт автоматически.
Из практики, спасти сайт от наложения такого фильтра, даже если на нем неправильно использованы теги H1-H6, strong и т.д., могут только хорошие поведенческие факторы. Если сайт интересен пользователю, у него большое число просмотров на одного пользователя, длительное время нахождения посетителя на сайте, материалы активно комментируются, репостятся в социальные сети, то такому сайту поисковые системы могут простить переоптимизацию тегами и переспам ключевыми словами (в разумных пределах, конечно). Но это если у вас уже старый раскрученный проект, а вот если вы делаете новый проект на LiveStreet, то санкций вам не избежать.
Заметить такие фильтры можно по падению позиций сайта по большому количеству запросов и снижению трафика из поисковых систем. Сайт обычно проседает равномерно по всем запросам.
Существуют правила и рекомендации правильного использования тегов для оформления заголовков H1-H6. К сожалению, поисковые системы Яндекс и Google не любят точно раскрывать свои алгоритмы, поэтому многие их требования приходится определять опытным путем. Я провел определенное практическое исследование, опросил знакомых специалистов по созданию сайтов, пользуясь случаем, задал уточняющие вопросы докладчикам на двух конференциях по интернет-маркетингу, прошерстил авторитетные отечественные и зарубежные источники.
Вот какая картина у меня получилась:
Правильно:
<h1>Заголовок статьи<h1>
Неправильно:
<h1 class=title>Заголовок статьи</h1>
2. Теги H1-H6 должны применяться только для оформления основного текста. Не допускается их использование для оформления элементов дизайна сайта, названий блоков в сайдбарах, меню, ссылок.
3. Категорически не рекомендуется использование тегов H для оформления ссылок. Это одно из грубейших нарушений, за которое сайт точно «получит по голове».
4. Нельзя использовать один тег H внутри другого. Также нельзя использовать внутри тегов H другие теги для выделения текста strong, em и т.п. Все подобные оформления должны быть при необходимости сделаны через стили CSS.
Неправильно:
<h1>Заголовок <h2>интересной</h2> <strong>статьи</strong><h1>
Тег H1 – должен использоваться только для оформления заголовка статьи. На одной странице сайта должен быть только один тег H1. Он должен размещаться как можно ближе к началу страницы. За тегом H1 должен следовать основной текст страницы.
Тег H2 – должен использоваться для оформления подзаголовков на странице. Должен следовать за тегом H1 и не должен размещаться выше тега H1 (первого на странице).
Тег H3 – должен использоваться для оформления подразделов статьи, имеет приблизительно такой же вес, как тег strong
Теги H4, H5, H6 – практически не имеют значения и влияния. Текст, оформленный этими тегами, ранжируется где-то чуть ниже, чем текст, выделенный жирным шрифтом (тегом strong).
<h1>Заголовок статьи</h1>
текст
<h2>Подзаголовок статьи</h2>
текст
<h3>Подзаголовок раздела</h3>
Текст
<h3>Подзаголовок раздела</h3>
текст
<h2> Подзаголовок статьи</h2>
текст
1. Заголовок статьи оформлен тегом H1, но с использованием классов стилей внутри тега – не критичная, но ошибка.
2. Ссылка на главную страницу из логотипа оформлена тегом H1.
<h1 class=«site-name»><a href=«site.ru»> site.ru </a></h1>
3. В редакторе доступны для оформления текста только теги H4-H6, которые как было указано выше имеют очень маленький вес. При попытке вставить теги H1-H3 они вставляются как обычный текст, без выделения жирным шрифтом и без увеличенного размера шрифта.
4. Для оформления заголовков блоков в сайдбаре используются теги H3.
5. На главной странице сайта ссылки на топики оформлены тегом H1.
<h1 class=«topic-title word-wrap»><a href=«livestreet.ru/blog/sollutions/16851.html»>Как изменить главную страницу сайта?</a>
6. Ссылка на блог, в котором опубликован топик оформлена тегом H3.
1. Добавить возможность использовать теги H2 и H3 в редакторе. Теги H4-H6 я бы убрал вообще.
2. Убрать теги H1 с главной страницы сайта из оформления ссылок на топики.
3. Убрать теги H3 из оформления блоков, комментариев, ссылки на блог, в котором опубликован топик.
4. Убрать стили из кода тегов H1 (не принципиально, но желательно).
Со своей стороны готов поучаствовать лично в решении данного вопроса, для того, чтобы наш любимый 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 они вставляются как обычный текст, без выделения жирным шрифтом и без увеличенного размера шрифта.
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 комментариев
Да, действительно, есть уже общепринятые истины, но все равно каждый такой топик — читается как личные мысли автора.
Вот официальные документы гугла по оптимизации:
— 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 и красным цветом. Есть много официальных документов-рекомендаций от ПС и нужно руководствоваться именно ими. Ни в одном документе, например, не нашел что заголовок будет считаться пс «лучше» если у него не будет класса.
Поэтому считаю что такие топики могут принести пользу ровно столько же, сколько и навредить.
4. Для оформления заголовков блоков в сайдбаре используются теги H3.
Чем предлагаєе его заменить?
Тут как в анекдоте:
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) Информация от специалистов, занимающихся вытаскиванием сайтов из-под фильтров поисковых систем.
Вы ведь не использовали для своего эксперимента на нескольких сайтах одинаковый контент :)
Соответственно, даже глупое словосочетание в тексте смогло повлиять на + или — в позициях.
tut.by:
onliner.by:
Сейчас я к ним никакого отношения не имею. По поводу приведенных примеров, полагаю, таким крупным проектам не очень важно, какая у них там разметка, правильная или нет. Им поисковые системы все простят.
А вот маленьким и начинающим проектам, я считаю, следует обращать внимание на все тонкости и нюансы и использовать все доступные конкурентные преимущества.
Как минимум, у меня пожелание к авторам LiveStreet добавить в редактор возможность использования тегов H1-H3.
Особенно в части ссылок и элементов дизайна.
1. Например, заголовки в списках топиков с одной стороны традиционно оформляются тегом H1-6, а с другой стороны служат ссылкой на сам топик. По вашему мнению это ошибочно или я не так понял?
2. Логотип сйта может быть оформлен тегом H1-6? На самом деле это тоже достаточно распространённое явление в сети.
А вот то что на всех страницах H1 это название сайта — это беда. По сути мы тегом показываем что самое важное на странице, так вот H1 в названии сайта должен использоваться только на главной странице, на остальных H1 должен быть основной заголовок: Название блога, Топика и т.д.
И этого не говорил. Мне интересно мнение про логотип (картинка) оформленный такими тегами, встречал в сети не раз.
1,2, но те кто имеет хоть какое-то представление о сайтостроении и делает не очередной говносайт или сплог правят эти недостатки сразу.
А вообще, h1-h6 — это заголовки. И в убывающем порядке они как бы говорят о своей значимости. И оформлять какие-то отдельные эдементы дизайна или же блоки с данными заголовками — это вполне нормально, ну а как мы по-другому скажем ПС, что именно данный блок имеет какой-то вес. Вообще, если сайдбар вынести в aside, то поисковым системам будет пофиг, что там есть h3.
А выделение некоторых ссылок тегами h2-h3-h4 — это передача веса в зависимости от важности той или иной ссылки.