H1, h2, h3, h4, h5, h6 заголовки


Содержание

H1, H2, H3, H4, H5, H6 — заголовки

Определить заголовок. Существует шесть уровней от H1 (наиболее важный) до H6 (наименее важный).

Типичное отображение

Более важные заголовки обычно отображаются большими шрифтами, чем менее важные. Заголовок H1 — очень большой шрифт, в то время как H6 может быть крошечным (много меньше обычного текста!).

Основной синтаксис

n > заголовок текста n >

где n принимает значения 1, 2, 3, 4, 5 или 6.

Возможные атрибуты (Нет в HTML 2.0!)

имя атрибута возможные значения смысл
ALIGN LEFT, CENTER, RIGHT выравнивание заголовка

По умолчанию — выравнивание по левому краю, однако это может быть перекрыто включением элементов DIV или CENTER.

Допустимый контекст

Содержимое

Примеры

Это отдельный файл, содержащий заголовки всех уровней.

Примечания

Заголовки H1, H2 и H3 можно использовать постоянно. Избегайте применения H4, H5 и H6. Смотрите также общие структурные рекомендации.

В особенности, не используйте заголовки H5 или H6 для представления текста малым шрифтом, так как пока их поддерживают только некоторые броузеры. В будущем броузеры могут быть адаптированы так, чтобы заголовки даже самого нижнего уровня выглядели, по крайней мере, так же, как обычный текст. Для задания малого шрифта используйте элемент SMALL (или в крайнем случае FONT).

Иерархия заголовков H1. H6 на странице

Вы здесь

Тема иерархии и использования заголовков в тегах H1, H2, H3, H4, H5, H6 на странице уже достаточно заезженная, но все равно оставляющая за собой много вопросов, особенно у новичков. Что об иерархии заголовков говорят поисковые системы? Какой порядок заголовков на странице наиболее оптимален? Насколько важна такая иерархия для поискового продвижения? Об этом и поговорим далее.

Google и Яндекс о заголовках

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

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

Яндекс: Правильное оформление заголовков

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

Какую именно иерархию при этом использовать если текст длинный и 6 заголовков не хватает яндексоиды уточнить забыли.

Какая иерархия заголовков оптимальна?

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

Такую иерархию например использует Wikipedia. В случае если текст не слишком большой, или не поддается структуризации иерархии как на примере выше, то возможно использование иерархии вида:

Рис.2 Пример использования в качестве подзаголовков только H2 Рис.3 Пример подзаголовков H2 и H3

Практика использования одних H2 заголовков после H1 при относительно небольших объемах текста будет самой оптимальной (Рис 2). Такую иерархию например использует Сергей Кокшаров и буржуйский MOZ на своих блогах, и это не будет считаться ошибкой. Также, например, я иногда использую иерархию в виде, как показано на рисунке 3 что тоже не будет считаться ошибкой. Что касаеться заголовков ниже H3, то их лучше использовать в качестве заголовков блоков (напр. блоки категорий в сайдбаре)

Вообще многие сеошники любят говорить о том, что так категорически нельзя делать, потому что. потому что сам не знает почему, услышал где-то когда-то от такого же сеошника. Если говорить не о теории (которая была выше) а о практике, то мы часто можем наблюдать картину, где сайт с совершенно не логической структурой заголовков, с четырьмя H1 выделенными в разнообразные теги, или с H6 вместо заголовка H1 находятся в топе. Теоретики например часто говорят что H6 вообще никак не учитывается при ранжировании — посмотрите эксперимент коллеги который вывел сайт в топ Яши по запросу «Динамическая карта сайта» используя H6 вместо заголовка H1.

Вместо вывода

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

Вместо заключения пожалуй отдам слово эксперту куда авторитетнее меня. Так, на вопрос о важности иерархии заголовков на страницах Мэтт Каттс, в рамках одного из семинаров для вебмастеров от Google, ответил следующее:

Краткий смысловой перевод: В сети очень много сайтов с «корявыми» страницами, с неправильной структурой заголовков, с невалидным Html, просто уродливыми страницами и.т.д, но это ведь совсем не значит что на таких сайтах не может быть полезного и интересного контента, поэтому мы стараемся не обращать внимания при ранжировании на такие ошибки. Независимо от того в какой последовательности у вас стоят заголовки H1 или H2 — не переживайте за это.

Использование заголовков h1—h6 на сайте

Для того, чтобы сайт попал на первые места поисковой выдачи и получил трафик с поисковых систем, его необходимо оптимизировать. Именно оптимизация, а не создание сайта, является самым трудным этапом. Если создаётся сайт единовременно, то процесс оптимизации его идёт постоянно. Начинают, как правило, с внутренней оптимизации сайта, так как она имеет определённое число конечных этапов. Впрочем, этапов этих много, поэтому лучше сосредоточится на описании тех, которые наиболее редко применяются вебмастерами из-за своей неизвестности или сложности. Одним из самых незаслуженно недооценённых этапов оптимизации является расстановка заголовков h1-h6. Как показывает практика, значительная доля вебмастеров даже не знает, зачем нужны эти заголовки, а уж используют правильно их и вовсе единицы. Собственно, о них мы в этой статье и поговорим.

Заголовки h1-h6 предназначены для выделения определённых текстовых сегментов страницы, содержащих ключевые слова или фразы, способные помочь поисковой системе распознать тематику и тему контента страницы. Функции заголовков схожи с функциями мета-тегов и дополняют их, однако, как уже говорилось выше, используются очень редко, тогда как мета-теги ставят почти все вебмастера. Теги h1-h6 можно распознать на странице визуально, так как ими выделяют элементы «тела» страницы, тега body. Это также отличает их от мета-тегов. Ещё одно тонкое отличие функций тегов h от мета-тегов в том, что они имеют внутреннюю иерархию, с помощью которой можно построить иерархию использованных на странице ключевых слов, придав одним большее, а другим меньшее значение, если это нужно.

Существует классическая модель расстановки заголовков, которая используется во многих CMS по умолчанию, например, во многих шаблонах WordPress. Она наиболее подходит самым обычным сайтам. Выглядит же она примерно так:

Заголовок сайта

Заголовок страницы (материала)

Подзаголовки страницы (материала)

Заголовки элементов навигации

Однако, недостатки этой модели видны невооружённым глазом. Во-первых, далеко не всегда заголовок сайта несёт какую-то смысловую нагрузку, он не всегда содержит ключевые слова. Во-вторых, заголовки элементов навигации практически никогда не нужно выделять данными тегами. Для многих видов сайтов, особенно для блогов, целесообразнее выделять тегом h1 не заголовок сайта, а название страницы (заголовок статьи), так как он более информативен и лучше отражает тематику и тему контента страницы. Тогда тегами h2 можно выделить подзаголовки статьи (материала), тегами h3 наиболее важные ключевые слова в статье и т.д. Можно использовать и другие вариации, главное понять смысл: заголовки от h1 до h6 по снижающейся должны отражать важность тех или иных слов или фраз для понимания тематики контента страницы.

Правила использования h1-h6 на страницах сайта

Существует ряд чисто технических правил использования заголовков h1-h6, выполнение которых строго обязательно, а нарушение в лучшем случае сведёт на нет весь их эффект. Перечислим их ниже:

  1. Структура заголовков. При расстановке заголовков необходимо соблюдать их иерархию. То есть, чем выше уровень заголовка (меньше номер) – тем выше он должен находиться на странице (исходном html коде). Конечно, всегда однозначно соблюсти это правило не получается, хотя бы потому, что заголовки всех уровней, кроме первого, могут применяться по нескольку раз на странице. Главное, чтобы заголовок h1 находился выше других на странице, а h2 под h1, но также выше всех остальных.
  2. Размеры шрифтов заголовков. Чем выше уровень заголовка – тем больше должен быть размер его шрифта. Логично, что самым большим на странице должен быть заголовок h1, а самым маленьким – h6.
  3. Ключевые слова и фразы в заголовках. Каждый заголовок h должен содержать те или иные по важности ключевые слова или фразы. Так как данные заголовки акцентируют внимание поисковых систем на определённых элементах страницы, не допускается, чтобы акцентирование происходило на «пустые» слова. Лучше вообще не использовать лишние заголовки, если их некуда применить, чем выделять ими что попало.
  4. Совместимость. Теги h нельзя использовать совместно с любыми другими тегами, особенно тегами акцентирования, такими как и другими.
  5. Содержимое тегов h. Теги h1-h6 не должны содержать в себе ничего, кроме текста. Не допускается заключение в них ссылок, изображений и других посторонних элементов страницы.
  6. Заголовок h1 используется на каждой странице только один раз. Это самое главное правило.

Стоит отметить, что наличие данных заголовков на странице не является обязательным, точно так же, как не является обязательным наличие непременно всех уровней заголовков. В большинстве случаев более чем достаточно использования первых трёх уровней, остальные же могут только навредить, акцентируя внимание на незначительных элементах страницы. Данный этап оптимизации не отнимает много времени. Расстановку заголовков в современных системах CMS легко автоматизировать, и, единожды проделав этот процесс, можно сэкономить много времени в будущем.

Использование заголовков h1-h6 на сайте

Хорошая оптимизация является главным критерием успешного продвижения и получения трафика с поисковых систем. Именно она является наиболее сложным процессом, а не как принято считать создание сайта. Если создание сайта занимает ограниченный промежуток времени и является конечным, то работа над оптимизацией ведется без перерывов все время существования сайта. Но все же в оптимизации есть процесс, который можно назвать конечным — это внутренняя оптимизация. В статье мы поговорим об одном из самых недооцененных специалистами по продвижению этапе — расстановке заголовков h1-h6. Реальность показывает, не все вебмастера используют заголовки правильно, а некоторые так и вообще не понимают, зачем они нужны.

С помощью заголовков h1-h6 выделяются определяющие для страницы элементы, которые несут ключевые слова и дают возможность поисковой системе понимать содержание страницы и ее релевантность поисковым запросам пользователей. По сути заголовки предназначены для того же, что и мета-теги, но вебмастера используя мета-теги, часто пренебрегают заголовками. Заголовки h1-h6 отображаются на самой странице и видны пользователю, так как включены в тег на странице. Это также разнит их с мета-тегами. И последний момент различий, который стоит упомянуть — это возможность установления иерархии заголовков h1-h6 для придания значимости тем или иным ключевым словам.

Есть классическая модель построения заголовков на сайте, которая присутствует в большинстве простых CMS, в том числе и в многих шаблонах WordPress. Она имеет такой вид:

Заголовок сайта

Заголовок страницы

Подзаголовок

Выделение элементов навигации

Несостоятельность такой модели видна даже без анализа. В первую очередь, заголовок сайта крайне редко несет какие-то важные ключевые слова. Также элементы навигации не нужно выделять тегами . На любом сайте выделять тегом

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

— выделение подзаголовков в контенте страницы. Заголовком

выделяют менее значимые структурные блоки статьи на странице. Важно понимать, что заголовки h1-h6 должны выстраиваться в иерархию и отображать важность ключевых слов по нисходящей.

Как использовать заголовки h1-h6

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

  1. Иерархия заголовков является важным моментом, который обязателен к соблюдению. Первым на странице должен быть всегда h1, после него должен идти h2 и только потом другие ранги. Конечно, не всегда удается соблюдать это правило в точности, так как некоторые заголовки могут потребляться на странице несколько раз. Поэтому главное соблюдать порядок заголовков h1-h2, а далее уже можно отклоняться от этого правила.
  2. Размеры шрифтов должны отображать визуально иерархию заголовков. Логично, что более важный h1 должен быть выполнен более крупным кеглем, чем h2. Самым маленьким, но не меньше, чем остальной текст на странице, должен быть выполнен заголовок h6.
  3. Заголовки всех рангов должны включать определяющие ключевые слова. Так вы направите внимание поисковой системы на определенные слова, по которым будет определяться релевантность страницы. Если таких слов нет, то и применять заголовок не стоит.
  4. Нельзя использовать теги с одной логической конструкции с другими тегами. Они не должны быть ни ссылками, ни выделением с использованием тегов или .
  5. Для одной страницы должен быть применен только один заголовок h1.

Стоит упомянуть, что расставлять заголовки всех рангов на странице необязательно. Отлично можно продвигать страницу лишь с одним заголовком h1. Вообще использование заголовков ниже h3 впустую без содержания ключевых слов может лишь навредить оптимизации, указывая поисковым системам на ненужные структурные элементы страницы.

Заголовки H1 — H6 для сайта: как правильно прописать и оформить

Зачем нужны заголовки H1 — H6

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

Всего существует 6 видов заголовков: h1, h2, h3, h4, h5, h6. Каждый из таких заголовков принадлежит в иерархической цепочке другому. Например, h1 — самый главный заголовок, h2 — подзаголовок, который вложен в h1 и с помощью которого разграничивается текст внутри этого тега. Соответственно, h3 уже разграничивает текст внутри тега h2.

Приведем пример иерархии с правильной вложенностью:

Как мы видим, в такой иерархии прослеживается достаточно прочная логика, благодаря которой становится понятно содержание текста и тематика каждого раздела. Недопустимо нарушать иерархию, например, использовать тег h3 перед тегом h2 или использовать тег h6, когда у вас нет h4 и h5. Как правило, на сайтах чаще всего используют теги h1 — h3. Остальные используют в редких случаях.

Пример визуального отображения заголовков в тексте:

Как заголовки в тексте влияют на продвижение?

  1. Правильно оформленные заголовки помогают пользователю ориентироваться на странице. Разумеется, это отражается на поведенческих характеристиках. С наименьшей вероятностью посетители захотят просматривать неразмеченный заголовками текст, и напротив, текст с удобной структурой и привлекательными заголовками заставит их проводить на странице больше времени, вчитываясь в контент.
  2. Заголовки помогают поисковым роботам Яндекс и Google разбираться со структурой на странице и определять характер и качество контента.

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

Заголовок h1

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

Правила, которые следует соблюдать при написании h1:

  1. Заголовок h1 — это название документа, поэтому он должен отображать суть контента, который размещен на странице.
  2. Заголовок h1 обязательно должен располагаться выше других на странице и иметь наибольший размер.
  3. h1 на странице должен быть в единственном экземпляре. Употребление нескольких тегов h1 — грубая ошибка.
  4. Заголовок обязательно должен содержать в себе самое высокочастотное ключевое слово. Это значимый фактор ранжирования для поисковых систем.
  5. h1 не должен совпадать с title страницы или другими тегами. Это также достаточно строгое правило. Одинаковые теги на странице — грубая ошибка.
  6. Заголовок должен быть уникальным для каждой страницы. Страницы с одинаковыми заголовками будут неуникальным повторяющимся контентом.
  7. Длина заголовка не должна превышать 60-70 символов — иначе поисковики не будут воспринимать его полностью, так как обрабатывают ограниченное количество знаков.
  8. Ключевое слово должно находиться как можно ближе к началу.
  9. Избегайте переоптимизации в h1. Не стоит употреблять слишком много ключевых фраз.

Правила оформления заголовков h1 — h6 в тексте


  1. Соблюдение иерархии. Как уже говорилось, вложенность заголовков строго обязательна к соблюдению. Это простое правило нужно помнить и придерживаться его.
  2. Не рекомендуется употреблять в заголовках другие теги. Например, выделять их жирным шрифтом с помощью тегов , и так далее.
  3. Заголовки всегда должны начинаться с новой строки.
  4. Заголовки должны выделяться по сравнению с основным текстом по стилю.
  5. Заголовки не должны находиться в элементах меню и содержать активные ссылки.

Как заполнить заголовки h1 — h6 в WordPress

Как правило, название страницы — это заголовок h1. Он отмечен на скриншоте.

Чтобы заполнить остальные заголовки в тексте, воспользуйтесь инструкцией, которая показана на скриншоте. Нажмите мышкой на нужный вам участок в тексте, затем в пункте «Абзац» в меню редактора выберите нужный заголовок. После этого можете писать текст, он будет оформлен как выбранный вами заголовок.

Помимо этого, вы можете переключиться в редакторе на просмотр html кода и прописать там заголовок вручную.

Читать дальше подобные статьи

Онлайн SEO-сервис Labrika

Получите рекомендации для продвижения сайта на основе 178 требований поисковых систем

Анатомия заголовков H1-H6 для оформления и структуризации контента

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

Сегодня будет статья по теме заголовков 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

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

  • H1 всегда один раз на каждой странице;
  • Побуждаем пользователя к прочтению материала, поэтому имеется смысл использовать цепкие слова (например, секреты, лучшие фишки и так далее);
  • Делаем отличным от тега title, который отображает название страницы в поисковой выдаче и побуждает переход на страницу сайта из поиска. Он должен быть немного отличным, но обязательно должен давать понимание того, что контекст материала на странице не изменился;
  • Употребляем ключевое слово статьи, но в разбавленной форме, а не в точном вхождении;
  • Не рекомендуется использовать знаки препинания.

к содержанию ↑

Использование на практике

Выше я писал, что H1 используется всего лишь 1 раз на странице и он должен быть встроен автоматически в верстку шаблона сайта и подставляться также будет автоматически в заголовок. Проверьте этот момент. Проанализируйте свои заголовки статей и посмотрите, чтобы они были заключены в H1. Если это не так, то редактируем свой шаблон.

Распространенная ситуация, когда вместо H1 стоит H2. Это не является грубой ошибкой, но лучше такого не допускать.

Если мы говорим об использовании остальных уровней заголовков H2-H6, то их уже стоит использовать в ручном режиме.

Использовав какую-нибудь CMS для создания сайта, данные заголовки добавляются в статьи очень просто. Например, в WordPress на панели форматирования в редакторе страницы всегда имеется пункт заголовков, где можно выбрать нужный уровень, ранее выделив нужный текст, который необходимо заключить в заголовок.

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

Что касается стилей оформления для каждого уровня, то в файле стилей стоит добавить правила к каждому уровню.

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

Дизайн заголовков H1-H6

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

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

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

Приведу вам еще 2 примера оформленных заголовков в H1.

Как видим, это не просто жирный шрифт, а красивый фон с волнистой нижней поверхностью и подчеркнутой верхней.

Также интересное оформление можете сами посмотреть на этой странице .

Что касается заголовков H2-H6, то их не просто можно оформлять каким-то фоном, а делать им нумерацию (если используете содержание в начале страницы) в виде красивых картинок. Опять же, это не должны быть простые цифры. Вот хороший пример такой задумки.

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

Ошибки в употреблении

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

  • Больше одного H1 на странице. Это не правильно. Только один раз в каждом документе;
  • Использования тегов H1-H6 для оформление дополнительных элементов сайта. В самом начале я писал, что предназначение этих документов — оформление и структуризация контента. Поэтому, их стоит использовать только в контенте. Большинство шаблонов сайтов содержат данные теги в боковых колонках для придания стилей их названий и так далее. Ярко выражено это в шаблонах WordPress, когда название каждого виджета в сайдбаре заключено в H3 или в другие теги.Если такая ситуация имеется, то заменяете заголовочные теги в служебных элементах сайта на другие, например на тег «span»;
  • Специально вписываем ключевые слова. Раньше бытовало мнение, что вписав ключевые слова в прямом вхождении в заголовки всех уровней, можно повысить их плотность и позиции такой страницы будет выше. Но сейчас это уже «карается законом» поисковых систем и накладываются санкции за спам в заголовках. Тем более, данные теги ранжируются по другим алгоритмам. Вывод: нет цели вписать ключевые слова;
  • Частое употребление точек и знаков препинания. Точки в заголовках вообще употреблять не стоит, так как это неправильно с точки зрения, как копирайтинга, так и общих правил оформления текстов. Количество знаков препинания также стараемся минимизировать, чтобы повысить читаемость заголовков. Сюда же можно отнести и большое количество слов — не делаем слишком длинные заголовки;
  • Не соблюдается выдержка структуры с точки зрения иерархии. Старайтесь соблюдать логическую цепочку в построении иерархии тегов H2-H6 на каждой странице;
  • Использование тегов H1-H6 для оформления других элементов текста, а не заголовка. Это то, о чем я говорил выше, когда некорректно настроены стили оформления каждого тега и вместо обычного выделения жирным можно использовать заголовок какого-нибудь уровня.
  • Заголовок не уместен или не несет контекст текста, который идет за ним. Чтобы научиться создавать логические заголовки, возьмите пару хорошо оформленных книг, которые вам было легко читать. Также ориентируйтесь на структуризацию контента на сайте Википедии;
  • Неиспользование заголовков H1-H6 вообще или же отсутствие на небольших текстах. Просто полное отсутствие и говорить не о чем, а вот про отсутствие на небольших страницах — момент сомнительный, так как любой текст (даже минимальные 1000 символов) имеют логическую структуру. Переход от одной темы к другой. Почему бы его не разбить на логические части подзаголовками различных уровней?

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

Кстати, сможете найти небольшой недочет по моим заголовкам на сайте? Если да, то пишите в комментарии. Данный момент не сильно заметен, но он имеется.

До встречи в следующих материалах. Все еще впереди.

Правильно ли вы оформляете заголовки? Проверьте себя!

Всем привет, на связи Юлия, главный редактор Миратекст.

По моей личной статистике:

    • 8 из 10 статей содержат ошибки в оформлении заголовков;
    • 5 из 10 жалоб от копирайтеров — с просьбой объяснить правки редактора в заголовках;
  • 9 из 10 человек предпочли бы сейчас проснуться на Бали вместо того, чтобы читать эту статью.

Убедив вас в своей честности, перехожу к правилам и пояснениям.

Иерархия заголовков

Заголовок Н1 — это название статьи, он используется один раз перед текстом.

Когда вы заливаете статью в системе “Миратекст”, поле “название” и есть заголовок Н1, поэтому перед текстом он не дублируется и тем более не используется в нем далее.

Теги Н2-Н6 используются по принципу списков. Подзаголовки мы применяем, чтобы добавить информацию, удобно ее подать. Следующий уровень подзаголовка раскрывает предыдущий. Если то, что мы хотим рассказать в заголовке Н2, содержит в себе несколько уточнений, аспектов, то мы будем делить информацию подзаголовками Н3. Если нужно дополнить и уточнить то, что сказали в Н3, то будем делить Н3 подзаголовками Н4 и т.д. Ставить каждый следующий подзаголовок по принципу уменьшения (Н2, Н3, Н4, Н5, Н6) — ошибка .

Важно! Должно быть точное соответствие заголовка и информации, которая написана под ним.

Поясню на примерах.

Н1 Установка бассейна на дачном участке

Нежиться в собственном бассейне на даче под лучами солнышка, попивая мохито с мятой со своего участка… что может быть лучше? А чтобы не омрачить мечту, нужно прочитать нашу статью, которая поможет в выборе!

Н2 Виды бассейнов для дачи

Н3 Характеристики стационарных бассейнов

Н3 Каркасные бассейны

Н4 Плюсы и минусы каркасных бассейнов


Н4 Как устанавливаются каркасные бассейны

Н3 Надувные бассейны

Н2 Какой бассейн выбрать

Н2 Примеры расположения бассейнов на участке (фото)

Чтобы заключить подзаголовок в нужный тег, нажмите кнопку “параграф”:

Если пишете в HTML, то используйте теги

Знаки препинания в заголовках

В конце заголовка/подзаголовка не ставится точка и двоеточие .

Правило из “ Справочника издателя и автора ” А. Мильчина и Л. Чельцовой: “Точку в заголовке, вынесенном в отдельную строку, опускают, за исключением изданий для начинающих читать детей (напр., в букваре), чтобы не мешать закреплению стереотипа: в конце предложения надо ставить точку.”

Двоеточие же в конце подзаголовков убирается без потери смысла.

В конце заголовка/подзаголовка, как правило, не ставится вопросительный знак . Потому что вы не спрашиваете у читателя что-то, а сами объясняете.

Грамота.ру дает такое правило: “ Подобные предложения могут быть интонационно оформлены и как вопросительные, и как повествовательные. В конце заголовка – вопросительного предложения ставится вопросительный знак , в конце заголовка — повествовательного невосклицательного предложения никакой знак не ставится.“

  • Как выбрать телефон для тещи
  • Где получить справку в бассейн
  • Куда обращаться, чтобы узнать погоду
  • Как взять машину напрокат
  • Сколько стоит жизнь в Мурманске

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

Вопросительный знак можно поставить :

В формате “вопрос-ответ”.

  • h2 Сколько стоит полный курс занятий?

Ответ. Цена зависит от уровня подготовки и начинается с 1000 руб.

  • h2 Я купила платье, но прогадала с размером. Как его вернуть?

Ответ. Верните товар в течение 2 недель через “Почту России”.

В заголовках аналитических статей. В материале не будет однозначного ответа на вопрос, будет анализ, рассуждение или предположение.

    • Ситуация в мире накаляется. Что ждет доллар этой весной?
  • Почему вымерли динозавры?

Если заголовок состоит из двух предложений.

    • Как найти деньги? Пять проверенных способов.
  • Не верите в привидения? А зря!

Если заголовок состоит из двух предложений, где вторая часть относится к первой.

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

Оформление двойных заголовков

Если у статьи 2 заголовка по принципу “1 или 2”, они оформляются по правилу: Заголовок 1 с заглавной буквы, или Заголовок 2 с заглавной буквы .

Самый популярный пример: “ Ирония судьбы , или С легким паром !”

Если у вас остались вопросы по оформлению заголовков — оставляйте их в комментариях, а я дополню статью нужной информацией.

Html теги H1, H2, H3, H4, H5, H6 правила использования

Здравствуйте, уважаемые читатели и подписчики блога.

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

Сегодня мы обсудим заголовки h1, h2, h3, h4, h5, h6. Поговорим, насколько они значимы для поднятия веб ресурса в поисковой выдаче. Узнаем, о правильности использования данных тегов и о часто допускаемых ошибках. Еще поделюсь нюансами специально для владельцев сайтов на CMS.

Влияние заголовков на поисковую выдачу

Поисковые машины применяют разнообразные и сложные алгоритмы при формировании выдачи по запросу пользователя. Часть работы этих алгоритмов засекречена, но многое известно. Например, на этапе индексации поисковик проводит анализ веб страницы, выделяя ее структурные составляющие. Делается это на основании названия, заголовков, описания и прочего. Ресурс, содержащий много «мусора», может не попасть в индекс.

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

Правильно структурированная страница с осмысленными заглавиями и соответствующим контентом ценится поисковыми роботами и вскоре вы увидите результат.

Правила употребления заголовков H1-H6

Перейдем к правильности использования h1-h6. Кажется, ничего сложного здесь нет. Это действительно так. Однако есть нюансы, известные далеко не всем.

Соблюдайте иерархию

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

Думаю, вы поняли, что заголовок самого высшего уровня – h1. Он содержит самую значимую информацию, например, название статьи. H2 по уровню ниже и т. д.

Иерархия на странице должна соблюдаться. Это значит, что h3 не может идти раньше, чем первый на странице h2. H4 не должен быть раньше, чем первый h3.

Разобраться поможет любой учебник. Что мы там видим? Мы видим название частей, являющихся главными. В частях существуют главы. В главе — разделы и подразделы. В такой структуре вы легко находите нужную информацию. Название новой части не идет внутри раздела. Подобная система должна соблюдаться и на сайте.

Уникальность и ключевые слова

Любой заголовок должен быть уникальным в рамках сайта и отражать главную мысль последующего контента.

Теперь несколько слов о ключевых словах. В заглавиях присутствуют ключевые слова. Но нужно помнить об иерархии. H1 – содержит самые важные ключевые слова и фразы. H2 и h3 – менее частотные запросы, по убыванию.

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

Особенности H1

Об h1 стоит поговорить отдельно. В пределах страницы он должен встречаться один раз. Это может быть название статьи. Если это страница со списком статей, то – название раздела вверху.

Например, «уроки рукоделия» или «лучшие блюда из курицы». Помните о смысловой нагрузке и соответствии контенту.

Другая особенность h1 – он должен отличаться от title. Основной ключ присутствует в обоих, но совпадать содержимое тегов не должно.

Используйте заголовки по назначению

У вас было искушение выделить при помощи тега заголовка пункты меню или названия блоков? Может быть текст в футере? Друзья, не делайте этого. Применяйте h1- h6 по прямому назначению — для заглавий и названий разделов внутри статьи.

Заключив в тегах h1-h6 пункт меню или надпись в конце статьи «Подпишитесь на обновления блога», вы добьетесь того, что поисковик воспримет это как «мусор». Получается, внутри тегов нет смысловой значимости с точки зрения SEO, после них нет контента, раскрывающего заглавие.

Не вкладывайте прочие теги

Оставляйте заголовки чистыми. Не нужно вкладывать внутрь другие элементы, в том числе strong, i, тег ссылки или изображения. Вспомните о существовании CSS.

Как привести в порядок заголовки

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

Существует также хороший инструмент у Firefox, называется RDS Bar. Помогает быстро увидеть, что находится в title, description, keywords и тегах h1-h6 на любой веб странице. Используйте способ, наиболее подходящий вам.

Если сайт на CMS и используется бесплатный шаблон, нужно обязательно проверить, что лежит в заголовках. Часто бывает, что они используются не по назначению. Это отразится на продвижении и поисковой выдачи.

Если вы не сильны в верстке и программировании сайтов, тогда лучше всего отдать сайт на редактирование фрилансеру. Он быстро сделает такую работу за 500 рублей и вам не нужно будет самому копаться в коде вашей страницы.

На сегодня у меня все. Желаю эффективной оптимизации веб страниц.

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

H1, h2, h3, h4, h5, h6 заголовки

You are using an outdated browser. Please upgrade your browser.

By signing up, you agree to our Terms of Service and Privacy Policy.

В данной статье рассмотрим особенности правильной расстановки тегов h1, h2…h6 (h сокращение от англ. слова heading – заголовок) и их влияние на оптимизацию сайта в целом. Если теги расставлены неверно, поисковым системам трудно получать информацию о размещенных на вашем сайте статьях и ключевых словах, которые они содержат. Теги дают возможность выделить заголовки и сделать Вашу статью более удобной для прочтения. Кроме того они обеспечивают преимущества вашего сайта в системе ранжирования, упорядочивая html код страницы.

Как определить, что Ваш сайт находится под фильтрами Google? Подробнее здесь .

Заголовок Вашего сайта обозначает тег h1. Он дает возможность понять поисковой системе название онлайн-ресурса. Например, сайт об аренде серверов. В главном названии будет выводиться именно данное название при поиске в системе. Не стоит путать h1 с тегом (заголовком страницы), ведь пишется в шапке страницы между , в то время, когда h1-h6 указывают в «теле» страницы и заключают между тегов

Как правильно прописать заголовки H1-H4 на страницах? #1363

Заголовок H1

Заголовок высшего порядка H1 можно размещать на странице только один раз! Поставить его дважды и более, перенасытить запросами, под которые продвигается страница, означает подвергнуть сайт риску попасть под спам-фильтр (подробнее про фильтры здесь >>>).

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

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

Также стоит обратить внимание на такую особенность: если Вы укажете для объекта заголовок, но не укажете мета-теги — система автоматически подставит в мета-теги значение из заголовка H1. Например, если Вы создадите товар с названием «ASUS Fonepad 7 3G 8Gb Gray», а в заголовке укажете «Планшетный Компьютер ASUS», не указав мета-теги, система подставит в мета-теги «Планшетный Компьютер ASUS» (Вы также можете их в последствии отредактировать).

H1 должен быть кратким, лаконичным и отражать основное содержание последующего текста.

Оптимальные примеры H1-заголовка:

  • Гусеничные трактора
  • Ленточное наращивание волос
  • Подвесные потолки оптом
  • Доставка пиццы в Москве
  • Линолеум Grabopast
  • Монтаж пластиковых окон и т. д.

Заголовки H2-H4

H2-H4 по своей сути являются подзаголовками, с их помощью можно логически делить текст на подразделы. Также эти заголовки учитывают поисковые системы, потому полезно включать в них продвигаемые запросы. НО: не переусердствуйте, текст должен смотреться естественно!

К тому же за перенасыщение подзаголовков ключевыми словами страница может попасть под спам-фильтр. Не рекомендуем ставить заголовки близко друг к другу или ставить их чересчур часто — за это страницу тоже могут зафильтровать.

Важно! Заголовки следует ставить по иерархии: H3 в тексте можно ставить, если до него уже был H2.

Как ставить заголовки в текстовом редакторе:

1. Выделяем текст, который будет служить подзаголовком;

2. Не снимая, выделения, открываем список формат и устанавливаем «Заголовок 2». Подробнее.

Илон Маск рекомендует:  Что такое код globalsize
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL