Добрый день, уважаемые посетители.
Сегодня будет статья по теме заголовков H1-H6 для на сайте.
Наверняка, все уже знаю, что это за заголовки такие, но уверен, что не каждый знает тонкие моменты в их употреблении и не догадываться, что их использование на страницах ресурса преследует всего лишь 2 задачи.
Основные 2 цель заголовков в тегах H1-H6 - оформление и структуризация контента на страницах ресурса с целью сделать его более читаемым и легко потребляемым посетителями сайта. Никаких других целей мы не должны преследовать от этих тегов.
Кроме простого употребления в качестве элементов структуризации контента и его оформления, посетители часто используют данные теги, чтобы придать необходимый дизайн отдельным фразам или даже целым предложениям. Получается ситуация, когда тег H6 (например) имеет дизайн просто жирного шрифта и вместо того, чтобы выделить строчку в тексте тегом , они заключают его в тег H6. Это в корне неправильно.
Заголовки в данных тегах должны использоваться лишь для разбиения текста на логические части. Никаких выделений целых предложений и отдельных фраз.
К тому же заголовки H1-H6 имеют иерархию, что делает их различным по оформлению, как минимум по размеру шрифта. Каждый низший уровень должен быть менее заметный, чем вышестоящий над ним.
На изображении видно правильное оформление заголовков в данных тегах, когда размер шрифта идет по убыванию от верхнего уровня к низшему. Если же у вас будет ситуация отличная от этой, то уже стоит обратиться к стилям оформления вашего сайта и отредактировать их должным образом.
Но тут один момент - проследите, чтобы заголовки нижнего уровня (ближе к H6) были похожи на заголовки и не сливались с обычным текстом. Они должны быть похожи на заголовки, а не просто на жирный шрифт.
Исходя из такого оформления, мы можем понять, что заголовки должны выдерживать свою иерархию при употреблении их в качестве элементом структуризации текста. Не может быть такого, что сначала идет первый заголовок H1, а затем сразу H5 или H6. После первого уровня логично и правильно будет использовать только заголовок в теге H2. Это важно, как с точки зрения самого оформления материала, так с точки зрения выдержки правильной структуры.
Поисковые системы сейчас обращают внимание на данные теги. Но не как на СЕО элементы, а как на элементы структурирования. Поэтому странно будет, если идет H1, а потом сразу H6.
При использовании данных тегов мы обязательно выдерживаем структуру. Если опускаемся на уровень вниз, то никаких прыжков через уровень. Структуру должна быть следующей: H1-H2-H3-H4-H5-H6.
Стоит сказать, что употребление заголовка уровня H1 в данных случаях не будет уместно, так как он должен употребляться один единственный раз на странице и должен содержать в себе название материала. Поэтому, в тексте его употреблять нет необходимости.
Сейчас я расскажу основные моменты использования заголовка H1, но перед этим дам пару общих советов, которые справедливы для заголовков всех уровней.
Вышеперечисленные правила также актуальны, но кроме них имеются обязательные именно для этого уровня заголовка.
Выше я писал, что H1 используется всего лишь 1 раз на странице и он должен быть встроен автоматически в верстку шаблона сайта и подставляться также будет автоматически в заголовок. Проверьте этот момент. Проанализируйте свои заголовки статей и посмотрите, чтобы они были заключены в H1. Если это не так, то редактируем свой шаблон.
Распространенная ситуация, когда вместо H1 стоит H2. Это не является грубой ошибкой, но лучше такого не допускать.
Если мы говорим об использовании остальных уровней заголовков H2-H6, то их уже стоит использовать в ручном режиме.
Использовав какую-нибудь CMS для создания сайта, данные заголовки добавляются в статьи очень просто. Например, в WordPress на панели форматирования в редакторе страницы всегда имеется пункт заголовков, где можно выбрать нужный уровень, ранее выделив нужный текст, который необходимо заключить в заголовок.
Так с каждым движком. Если же используете HTML верстку сайта и необходимо добавлять теги в ручном режиме, то сложностей тут не возникнет. Стоит лишь заключать нужные части текста между открывающим и закрывающим тегами с нужным уровнями. Смотрите ниже примеры.
Что касается стилей оформления для каждого уровня, то в файле стилей стоит добавить правила к каждому уровню.
Заметьте, что перед названием уровня заголовка в стилях нет никаких точек и решеток. Внутри скобок указываем сами стили: тип шрифта, размер, цвет, фон и так далее.
Если вы сделаете свои заголовкам уникальный выделяющийся дизайн, то посетители вас за это только поблагодарят и оформление контента будет на высшем уровне. Сейчас простые заголовки с большим размером шрифта и жирным выделением уже уходят в прошлое.
В моду приходят простые, но в то же время оформление заголовки с помощью различных выделений линиями, подчеркиваниями с помощью фоном и так далее.
Я когда-то давал уже некоторые примеры таких дизайнов. Даже, если взять мой блог, то главный заголовок в H1 оформлен не просто большим шрифтом на белом фоне с остальным текстом. Он отделен серой рамкой на общем фоне сайта, что делает его более заметным и акцентирует внимание на нем.
Приведу вам еще 2 примера оформленных заголовков в H1.
Как видим, это не просто жирный шрифт, а красивый фон с волнистой нижней поверхностью и подчеркнутой верхней.
Также интересное оформление можете сами посмотреть на этой странице .
Что касается заголовков H2-H6, то их не просто можно оформлять каким-то фоном, а делать им нумерацию (если используете содержание в начале страницы) в виде красивых картинок. Опять же, это не должны быть простые цифры. Вот хороший пример такой задумки.
Когда вы знаете то, чего не знают, а тем более не делают большинство, можно перейти и рассмотреть основные ошибки в употреблении заголовков всех уровней на вашем сайте.
Все ошибки вы уже могли и сами додумать, изучив весь материал выше, но имеются некоторые нюансы. Перечислю все, что может относится именно к вам и то, что немедленно необходимо исправить.
Вот и все, дорогие веб-мастера. Материал про заголовки на сайте подошел к концу. Вышел он довольно затянутый. Где-то я повторялся, но это только, чтобы акцентировать ваше внимание на ключевых мыслях статьи. Надеюсь, что данный материал вам пригодился.
Кстати, сможете найти небольшой недочет по моим заголовкам на сайте? Если да, то пишите в комментарии. Данный момент не сильно заметен, но он имеется.
До встречи в следующих материалах. Все еще впереди.
С уважением, Константин Хмелев!
Всем-всем привет!
— это работа комплексная, требующая внимания к каждой мелочи. Даже неправильное использование заголовков (теги H1, H2, H3) на страницах сайта может мешать нормальному продвижению в поисковых системах. Сегодня мы как раз об этом и поговорим.
Все, что описано в вышеперечисленных уроках, пригодиться сегодня.
В мире SEO существуют некие правила использования тегов H1, H2, H3 и ниже, которые желательно бы соблюдать на всех страницах:
Коротко об этих правилах я уже писал в уроке, посвященному . Обязательно прочитайте, там много полезного!
Вы знакомы с браузером Mozilla Firefox? Наверное, да. Так вот, этот браузер, благодаря одному плагину с хорошим функционалом, предоставляет шикарные возможности для анализа страниц. Название этому плагину — RDS bar. Скачать его можно по этой ссылке , но сделать это необходимо в Firefox, поэтому, если данный браузер у Вас не установлен, быстрее скачивайте его и устанавливайте.
RDS bar можно установить и на другие браузеры, но именно в Mozilla Firefox его функционал гораздо шире.
Прежде, чем мы перейдем к анализу страниц сайта, необходимо внести небольшие настройки в плагин:
Теперь мы сможем спокойно посмотреть сколько тегов H1, H2, H3 находиться на странице, увидим лишние заголовки и будем знать, что нужно править. Увидеть все это великолепие можно, нажав на кнопку SEO-теги в RDS bar, которую только что активировали:
Как только Вы нажмете на эту кнопку, перед Вашими глазами появится небольшое сообщение:
В этом сообщении представлены , заголовок H1 и другие. Как видите, на страницах моего блога с этим все в порядке, так как исправил этот косяк неделю назад, а вот на клиентском сайте с этим все гораздо хуже.
Перечислю ошибки:
Работы предстоит много, поэтому продемонстрирую исправление ошибок на каком-нибудь одном примере. Попробую-ка изменить теги H5 на H3, чтобы соблюдалась иерархия заголовков.
Для этого мне понадобятся файлы сайта (), Notepad++ и Mozilla Firefox.
Таким же образом работаем с другими заголовками. Как только закончите работу, не забудьте отправить изменения на сервер. Сделать это можно через FileZilla, о которой рассказывал
Как нужно правильно использовать заголовки H1-H3 на странице с точки зрения SEO? Существует ряд правил, касающихся иерархии и содержания заголовков H1-H6, соблюдение которых положительно влияют на раскрутку сайта.
Чтобы спрогнозировать, как поисковые системы будут оценивать использование заголовков на странице, нужно отчётливо понимать для чего они служат. Пользователям удобнее и легче воспринимать хорошо структурированный контент. Текст должен быть разбит на логические блоки и оснащён картинками, где нужно — списками и таблицами.
Заголовки используются для таких блоков, которые в свою очередь, состоят из абзацев. Нужно стараться, чтобы каждый абзац был логически завершённой мыслью. Обратимся к схеме, которая лучшим образом демонстрирует правильную иерархию заголовков H1-H3 на странице:
Тег H1 на странице должен использоваться только один раз. Остальные заголовки должны отображать логическую иерархию страницы. Заголовки H2 будут подзаголовками H1, в свою очередь заголовки H3 — подзаголовками H2.
Что касается заголовков H4-H6, то они могут быть использованы для блоков с неосновной, дополнительной, информацией на странице. Или их можно вообще не использовать. Содержание заголовков нижних уровней, явно в меньшей степени, влияет на релевантность страницы в глазах поисковых машин.
Следующая схема демонстрирует нарушение иерархической вложенности заголовков:
Вообще html-документы должны иметь не только логически выстроенную структуру, но и иметь семантическую разметку. Это значит — использование тегов по их прямому назначению. Не стоит с их помощью украшать страницу. Логическая структура и разметка позволяют поисковым машинам без труда определять смысловые части страницы, и она лучше ранжируется.
Если стандарты HTML допускают некоторые вольности в отношении использования тегов, то с точки зрения SEO это недопустимо. Теги H1-H6 не должны содержать внутри себя других тегов, таких как B, Strong и прочих. Некоторые время назад на мой сайт был наложен фильтр Панда , основной причиной которого, по моему мнению, было не соблюдение этого правила.
С точки зрения SEO, теги H1-H6 не должны иметь классов CSS. Поисковые системы воспринимают class у тегов H1-H6, как попытку манипуляции. Подразумевается, что вы уменьшаете размер шрифта у заголовков и используете их не по назначению, а для повышения релевантности страницы. Выход такой: используйте CSS, но без классов.
Что касается универсального атрибута id, то в HTML5 он используется как якорь. Если идентификатор единственный не только на странице, но и на всём сайте, то видимо отношение к нему будет лояльнее.
Ссылки внутри заголовков тоже не допустимы. Спецификация HTML5 допускает обратную ситуацию: можно поместить в тег A весь блок, состоящий из любых элементов, кроме самого тега A: заголовка, абзаца, изображения, строковых элементов Span. Возможно в этом случае, это тоже допустимо.
Теперь о наличии ключевых слов в тегах H1-H6. Конечно, они обязательно должны присутствовать в заголовках. Необходимо соблюдать общее правило для всех ключей на странице. Чем они ближе к её началу, и к началу, содержащего их элемента, тем выше будет их вес.
Обратите внимание на градиентный фон иллюстраций для этой статьи — он отображает значимость ключей на странице. Там где цвет темнее, вес ключей будет выше.
Снова обратимся к иерархии документа. Более важные ключевые фразы должны находиться в H1, а менее важные — располагаться по убыванию: в H2, H3. Но как быть с тегом Title ? Лучше не делать теги Title и H1 идентичными, однако желательно, чтобы основная ключевая фраза содержалась в обоих.
Часть слов из Title, которые не вошли в H1, можно «разнести» по другим заголовкам. В них так же могут повторяться некоторые слова из основной ключевой фразы. Получатся «разбавленные» ключи, которые будут приводить трафик по низкочастотным запросам. Но не злоупотребляйте такими повторениями, не более 2-3 на странице, а то нарвётесь на санкции за переоптимизацию.
Теперь о типичных ошибках, и подведём итоги. Не перечисляйте в заголовках ключи через запятую, используйте знаки препинания по минимуму. Не стоит напирать на одни высокочастотные ключи. Лучшим будет краткий заголовок, отображающий логически выраженную мысль.
Не забывайте об уникальности заголовков в масштабе своего сайта, а лучше всей Сети, хотя это и трудновыполнимо. Ошибкой будет их чрезмерное употребление, когда под заголовком будет находиться один «жиденький» абзац, а дальше опять последует заголовок.
Читайте подробнее обо всём комплексе мер по seo раскрутке , где представлены инструкции по оптимизации сайта и улучшению внешних и поведенческих факторов. Кратко восстановим в памяти основные правила использования тегов H1-H6 на странице:
Некоторые вебмастера используют готовые шаблоны сайтов, где тег H1 — это логотип, единый для всего сайта. Вы именно такой вебмастер? Спешу вас обрадовать, ничего менять не нужно! В этом случае поисковые системы считают главным в иерархии страницы тег H2. Просто учитывайте, что у вас сдвинута иерархия заголовков на одну ступеньку.
Заголовочные теги
- самые важные заголовочные теги - менее значимые чем первый ... - последние по важности
К этим тегам нужно относится с осторожностью, поскольку они оказывают больше влияние на ранжирование сайта . При грамотном использовании тегов
Синтаксис тегов ..
Название статьи
Подзаголовок1
...Подзаголовок2
Подзаголовок3_1
...Подзаголовок3_N
Подзаголовок3
и т.д.
Каждый заголовок по умолчанию имеет разный размер. Например, код
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
На странице превращается в следующее:
Значимость тегов ..
По весу и значимости в продвижение сайтов заголовочные теги h1-h6 находятся на втором месте после тега
В html коде страницы первым должен быть тег
Название статьи
... ... ... ...
Т.е. каждый более низкий тег всегда располагается во вложении более высокого. Это и есть правильная иерархия. При этом не допускаются резкие переходы с
Помимо такой иерархии нужно еще соблюдать и иерархию в плане размеров шрифтов. Т.е. более важные заголовки должны иметь более большой шрифт. Хотя подтверждающих фактов тому, что поисковые системы анализируют стили, которые находятся в.css файлах пока никто не объявлял, но негласно есть такое правило среди вебмастеров и оптимизаторов.
Может ли заголовок и
На этот вопрос сейчас разгораются споры. С одной стороны логично, чтобы
Сколько может быть заголовков ,
?
Заголовочных тегов
Не стоит путать заголовочные теги
и h1-h6. Одни нужны для поискового робота, другие для поискового робота и пользователей.Продолжает вещать миру о тонкостях SEO и не только. И сегодня на повестке дня весьма актуальная тема — заголовки сайта.
Такие вопросы, как правильная структура заголовков или принцип использования в заголовках html тегов h1, h2 и h3, вызывают бурные дебаты, как в seo сообществах, так и среди обычных веб-мастеров.
Пользуясь случаем, хочу выразить благодарность читателям SEO Маяка, за их активное участие в жизни блога. Не проходит и дня, чтобы я не получал письма с вопросами или просьбами.
Ваши письма, дорогие читатели, за частую формируют темы для моих будущих постов, тем самым практически полностью избавляя меня от необходимости заниматься их планированием.
В начале своей деятельности в качестве веб-мастера, я также задавался вопросом, как правильно использовать HTML теги в заголовках на сайте. Читая разные статьи по теме, я тщетно пытался понять, какая структура заголовков является правильной с точки зрения SEO.
Но все советы «бывалых» основывались на каких-то догадках и четких обоснований, своим теориям, никто не давал. Я потратил не мало времени, «перелопатил» кучу тематического материала, а в результате вопросов у меня стало еще больше.
Тема и по сей день не закрыта! Многие начинающие веб-мастера просто теряются в море информации и вообще перестают что-либо понимать. Ситуация очень схожа с неразберихой вокруг использования тегов nofollow и noidex .
Данной статей я постараюсь внести некоторую ясность в будоражащую многих тему и заодно ответить на вопросы своих читателей. Поехали!
Основная масса seo-оптимизаторов, советуют заключать в тег h1 непосредственно заголовок статьи, а название блога делать обычной ссылкой.
Такая структура заголовков, применяется чуть ли на каждом втором блоге. Не могу сказать, что это не правильно, хочу сказать другое.
Пару лет назад, так и не найдя внятных ответов на свои вопросы, по правильной структуре применения h1 — h6, я решил оставить все так, как было изначально устроено в шаблоне. А устроено было так:
По прошествии времени, львиная доля страниц моего кулинарного сайта выбралась в ТОП, причем по запросам, частотой в 10000 — 100000 запросов в месяц. Обращаю внимание, что основные заголовки моих статей, были заключены в тег h2.
В связи с вышесказанным, возникает пару резонных вопросов к «бывалым». Ребята, как же так получается, а где хваленое влияние тега h1? Если следовать логике Ваших советов, то мои статьи, с «недоразвитыми» заголовками h2, должны быть где-то на задворках поисковой выдачи?
На заметку ! Заголовок статьи, заключенный в HTML тег h1, с точки зрения SEO, ничем не отличается от заголовка заключенного в тег h2
Многие веб-мастера, начитавшись подобных инструкций, корпят, меняя структуру заголовков в надежде, что это поможет «любимым» страницам вырваться в ТОП.
Придется их огорчить. Для того, чтобы статьи были достойны ТОПа, тега h1 будет, мягко сказать, недостаточно!
Чтобы оказаться в ТОПе, страницы обязательно должны иметь неплохой поведенческий показатель . Мало того, статьи должны быть правильно составлены, к ним должны быть правильно подобраны ключи , они должны иметь высокую релевантность к поисковым запросам и много что еще.
А самое главное, они должны быть интересными и полезными для пользователей и тогда заветный ТОП станет гораздо ближе. Вот такие дела, а заголовки, будь то h1 или h2, не оказывают никакого значимого влияние на ранжирование страниц в поисковой выдаче.
Предвижу, что многие предпочтут со мной не согласиться. Ну что же, дело хозяйское. Но чтобы мои доводы не выглядели голословными, я опубликую свою переписку со службой поддержки Яндекса, которую я веду постоянно, на разные темы.
Надеюсь на меня не обидятся ребята из команды Платона, за то, что я придаю гласности некоторые детали нашего с ними общения. Но как мне видится, одних моих слов, в данном случаи, будет недостаточно.
Мое письмо Платону:
Здравствуйте уважаемая команда службы поддержки Яндекса!
У меня к Вам несколько вопросов, касающихся использования HTML тегов в заголовках.
В интернете, на различных форумах и не только, очень много шумихи, относительно использования тегов h1 и h2 в заголовках. Многие советую заключать в h1 основные заголовки записей, другие наоборот утверждают, что h1 должен выделять общий заголовок сайта.
С моей точки зрения, при современных технологиях, HTML теги заголовков не должны оказывать какое -то нибыло значимое влияние, на ранжирование в поисковой выдачи той или иной страницы или сайта в общем.
В связи с вышесказанным хотел спросить:
1. Имеет ли значение, в какой тег заключен тот или иной заголовок?
2. Можно ли в качестве заголовка использовать изображение и как на это «посмотрит» поисковый робот?
3. Учитывается ли алгоритмами робота иерархия тегов h1, h2 и т.д?
Очень буду благодарен за ответ.
С уважением,Виталий Кириллов
На что я вскоре получил ответ следующего содержания:
Здравствуйте, Виталий!
1. Нет, на ранжирование это не влияет.
2. Да, можно. Скорее всего робот проиндексирует такую картинку, если она в заголовке будет прописана в соответствии с этими правилами http://help.yandex.ru/images/ robot-search.xml .
3. Правильное оформление заголовков в тексте помогает пользователю быстрее сориентироваться на странице, а значит, экономит его время. Кроме того, и роботу Яндекса будет проще разобраться со структурой документа. Поэтому следует выделять этими тегами заголовки в соответствии с иерархией документа.
С уважением, Платон Щукин
Служба поддержки Яндекса
Надеюсь я многих убедил!
Давайте подведем итог всему вышесказанному и сделаем некоторые выводы:
Вывод №1. Заголовки сайта должны иметь четкую иерархию. Т.е, начиная с заголовка сайта (h1) и так далее вниз по цепочке.
Вывод №2. HTML тег h1 не влияет на ранжирование. Роботу не важно в какой тег заключен заголовок статьи. Было бы глупо предполагать обратное, при современных, мощных аналитических технологиях.
Вывод №3. Заголовком может быть даже изображение, оптимизированное должным образом . Можно без всяких опасений использовать в качества заголовка сайта любое изображение, например с логотипом.
При этом, никто не отменял правильное составление заголовков с точки зрения SEO, но об этом как-нибудь в другой раз.
Дополнение от 06.02.2014
После дебатов в комментариях, я решил провести эксперимент. Сегодня я опубликовал статью, под названием «Динамическая карта сайта, с помощью плагина All in One SEO Pack «, в которой основной заголовок записи был заключен в тег h6.
Цель эксперимента — выяснить влияние HTML тегов h1 — h6 на ранжирование страниц в поисковой выдачи и тем самым закрыть данную тему.
—————————————————————————————————————————————————-
Дополнение от 30.06.2014
Эксперимент уже завершен и для проверки его результатов, вбейте в поиск Яндекса или Google фразу «Динамическая карта сайта», под которую была заточена подопытная статья.
До встречи!
С уважением, Виталий Кириллов