Обозначение h1. Заголовки h1-h6: детальный обзор, примеры

заголовок 2го уровня

заголовок 3го уровня

заголовок 4го уровня

заголовок 5го уровня

заголовок 6го уровня

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С уважением, Константин Хмелев!

Заголовок в тексте - это инструмент, который делает информацию удобной для читателей и структурирует ее для поисковых систем. При правильном оформлении тегов H1–H6 страницу сайта будет проще вывести на лидирующие позиции в выдаче.

Именно по seo заголовкам Google и Яндекс определяют, насколько тематика Вашей страницы совпадает с запросами, которые вводят пользователи. Иными словами, насколько релевантна данная страница. Релевантность страниц – один из главных факторов seo продвижения.

h1 — главный подзаголовок в статье, который обычно размещен над текстом.

h2-h6 - маленькие подзаголовки, которые проставляются по принципу вложенности.

Главный заголовок h1

Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения. Очень часто встречаю, что тега h1 просто нет или их несколько. На месте заголовка страницы заместо h1, находится тег h2. Это еще в лучшем случае — бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями подходящими на заголовок.

Каждая страница вашего сайта несет в себе какую-то конкретную информацию (во всяком случае, должна нести). Основную суть информации вы и будете размещать в заголовке. Например, если вы продаете 3D-телевизоры, значит заголовок страницы должен выглядеть как основной запрос и выделяться в html коде страницы тегом h1.

Основные требования к h1

• На странице должен присутствовать только один заголовок первого порядка (заголовок 1, h1). Это главный заголовок, видимый пользователю и отражающий ключевую суть поста.
• Заголовок H1 всегда стоит в начале текста.
• Длина заголовка должна быть не более 65 символов.
• H1 должен быть уникальным в рамках вашего сайта.
• Тег H1 не должен быть ссылкой, картинкой и т.д. Заголовок должен быть заголовком.
• В H1 старайтесь заключать самое частотное ключевое слово.

Заголовок h2

Если h1 многие все же придерживаются правил и используют на страницах своего сайта, то тегом h2 многие пренебрегают, а зря! Этим тегом обычно размечаются подразделы статьи, страницы.

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

Например, страницы товара в магазине телевизоров — если заголовок h1 страницы имеет вид «Телевизор Panasonic TX-75EXR780», то тегом h2 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид «Характеристики телевизора Panasonic TX-75EXR780» и «Преимущества телевизора Panasonic TX-75EXR780».

Тем самым мы за счет заголовков типа h2 захватим важные моменты, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному «Panasonic TX-75EXR780», но и по дополнительным запросы касаемо преимуществ и характеристик данной модели телевизора. А охват большего числа запросов в свою очередь — это рост трафика на сайт.

Иногда заголовок типа h2 попадал в сниппет результатов поиска. Туда как правило попадает либо h1, либо title — они оба самые сильные по важности заголовки страницы и за ними преимущество, но не исключено и влияние h2 на сниппет.

Основные требования к h2

• На странице желательно наличие 2-4 заголовков H2. Должны отражать суть дальнейшего текста.
• Наиболее частотный запрос - в заголовке H1, менее частотные - желательно в H2.
• Тег H2 не должны быть ссылкой, картинкой и т.д. Заголовок должен быть заголовком.

Заголовки h3-h6

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

Основные требования к h3-h6

• Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.
• Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.
• Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.
• Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.
• Нельзя писать другие теги внутри тега h.
• В h-тегах допускается только текст и знаки препинания.
• В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.

Все заголовки должны идти в строгом порядке. Первым на странице всегда идет заголовок типа h1.

Если подразделы для каждого из заголовков h2 получились внушительных размеров и в них затронуты несколько еще более мелких подтем, то внутри каждого или одного отельного подраздела с тегом h2 вы делаете сложенные «мини» подразделы страницы и размечаете их h3.

Не обязательно что все подразделы озаглавленные тегом h2 будут большими и их надо дробить еще на несколько подразделов.

Вот пример хорошей иерархии заголовков из статьи по продвижению сайта на WordPress :

Как заполнять h-теги в WordPress

h1 по умолчанию заполняется в поле над статьей:

Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент или поставить курсор на нужную строку и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему.

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

Правильная расстановка заголовков в тегах h1, h2, h3, h4, h5, h6 может дать отличный результат для SEO сайта. По этому, не жалейте времени на настройку.

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

Тема сегодняшнего видеоурока – заголовки в диапазоне h2-h6. Что это за заголовки и для чего они нужны?

У вас страница. Сверху заголовок h1 (вы сможете посмотреть другой видеоурок, который посвящён этому заголовку), дальше кусок текста и потом идут ещё дополнительные заголовки. Это заголовки, которые дают пользователю дополнительный ответ на тот вопрос, который он задаёт. Например, если у вас главный заголовок страницы «такси», то в дополнительных заголовках вы должны написать «услуги такси», «цены такси» и т.д. Вы должны использовать то же ключевое слово.

Дополнительные заголовки влияют на продвижение вашего сайта и показывают поисковым системам то, что это та самая страница и её тоже можно показывать по этому ключевому слову. Заголовки h2-h6 помогают положительно усилить внимание поисковиков к этой странице по этим запросам.

Как пишутся заголовки h2-h6? Все эти заголовки имеют одинаковую силу. Нужно ли все их использовать на странице? Нет. Нужно минимум один раз использовать ключевое слово, которое вы продвигаете на эту страницу в этом заголовке. Если h1 может быть только один, то заголовков h2-h6 может быть несколько. Их не надо писать так: один h2, один h3, один h4. Вы можете использовать, например, четыре h2 на странице. Любое количество, которое вам нужно, вы можете использовать. Но самое главное: не разбивайте, когда это не нужно.

По силе эти заголовки одинаковые, но они отличаются визуально. H2 на сайте выглядит крупно, а h6 мелкий. Поэтому выберите шрифт, который для вас оптимальный. Самые популярные диапазоны, которые используются на сайтах, это h2 и h3.

Как проверить компетентность seo-шника и силу ваших конкурентов? Вы заходите и пробиваете. Открываете код страницы, видите кучу знаков, нажимаете ctrl+f, появляется окно поиска, и вы туда вбиваете «(h2» и видите, есть ли на странице заголовки h2 или нет. Если h2 нет, не страшно. Потому что мы знаем, что должно быть минимум одно упоминание в этом диапазоне. Если заголовков в диапазоне h2-h6 нет, это плохо. Но если хотя бы один раз есть упоминание ключевого слова, это уже хорошо.

Чего не должно быть в дополнительных заголовках? Мусора. Мусора какого? Например, в диапазоне h3 может стоять слово «новости», «новости о клиентах», ещё какие-то слова. Если у вас сайт не новостной, то не нужно, чтобы слово было в этом диапазоне. Потому что всё, что вы ставите в диапазоне h2-h6, считается гиперважной информацией. Поэтому этот заголовок должен быть у вас на сайте, он может быть несколько раз, и, самое главное, вы можете проверить и своих seo-шников, и конкурентов, правильно ли у них сделано.

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

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

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

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

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

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

Итак, существует несколько правил расстановки заголовков h1-h6. Представлю их ниже.

Картинка кликабельна

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

Как видите, ничего сложного. Гораздо важнее описанные выше рекомендации по правильной расстановке акцентов. На каждой странице совсем не обязательно использовать все теги акцентирования, достаточно первых трёх уровней. Стоит отметить, что для грамотной расстановки заголовков могут понадобиться некоторые знания в html. Первая заповедь вебмастера – не навреди. Поэтому если таких знаний нет, то лучше поручить это дело кому-то другому.

Основное сказал. К сожалению, описать все возможные ситуации не могу. Чтобы обойти конкурентов, нужно не только качественно проводить каждый этап оптимизации, но и не упускать ни один из этапов. Только тогда вы и ваш сайт добьётесь успехов. На этом статью завершаю. Удачи!