Заголовки H1 и TITLE. Делать ли их одинаковыми или разными? Анатомия заголовков H1-H6 для оформления и структуризации контента

21.05.2019

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

Структура — это на самом деле очень важно, если вы заморачиваетесь насчет качества. А чтобы составить нормальную структуру, нужно понимание того, как работают теги h.

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

Первый заголовок должен визуально быть больше остальных заголовков на странице.

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

Для чего вообще нужны заголовки?

Для тех, кто не сильно в теме — вот в принципе неплохое видео про азы составления подзаголовков h1-h6. Если не считаете себя спецом, посмотрите:

И для закрепления материала чуть послабее видео:

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

В коде тег выглядит так:

, где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.

H-теги глазами людей

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

Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по поведенческим факторам. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по SEO была проделана не зря.

H-теги глазами поисковиков

Поисковые роботы собирают с них информацию для семантического анализа. Особое значение для ботов имеют заголовки уровней h1, h2, h3. Их непоследовательное или неправильное применение может негативно сказаться на ранжировании станицы. Если в HTML-коде вообще отсутствуют h-теги, то сайту придется туго в продвижении. Уровни h4, h5, h6 менее значимы.

Иерархия H-тегов

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

Вот так выглядит иерархия с правильной вложенностью:

Что за тег h1

Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).

На каждой странице должен быть один и только один тег h1.

В плане привлекательности для пользователя он имеет главное значение. Но для SEO-продвижения больший вес будет иметь .

Title – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве активной ссылки на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.

Почему h1 должен различаться с Title

Довольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать. Вот азы на эту тему:

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

Требования по длине H1

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

Специальные плагины для WordPress позволяют проанализировать правильное заполнение всех мет прямо в редакторе.

Правила для грамотного написания h1

  • Должен быть уникальным для всего сайта и абсолютно читабельным;
  • Не повторяет тег title, но и не противоречит ему;
  • Не стоит делать его слишком длинным (более объемным можно делать title);
  • Используется только 1 раз на каждую страницу;
  • Релевантен тексту и отображает смысловую суть материала;
  • Интересен, привлекателен для пользователя;
  • Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.

Применение ключей

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

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

Психологические приемы для составления привлекательного заголовка

Заголовок должен быть «цепляющим». Вот видео от Максима Ильяхова, спеца в области СМИ, ректора Школы редакторов и создателя сервиса «Главред»:

Вот еще пара «приемов», которые применяются при составлении заголовков.

Решение проблемы

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

Пример удачного заголовка: «Выпадают волосы? Остановите выпадение за неделю».
Пример неудачного заголовка: «Можно ли остановить выпадение волос?»

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

Заинтриговать

Пример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».
Пример неудачного заголовка: «Лучший рецепт от выпадения волос».

Прием «экзамен»

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

Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»
Пример неудачного заголовка: «Все ли вам известно о выпадении волос».

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

Зачем нужны подзаголовки h2-h6

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

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

h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.

h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.

h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.

Длина всех h-тегов должна быть в пределах 50 символов.

Как правильно прописывать подзаголовки h2-h6

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

Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на . Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.

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

h1 заполняется обычно в поле над текстом в записи:

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

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

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

Должны ли заголовки быть одинаковыми, похожими или кардинально отличаться? Каковы требования поисковиков и рекомендации SEO-шников по наполнению тегов ? Каким образом Тайтл и H1 влияют на продвижение? Прописывать ли мета-заголовки вручную или довериться автоматике движков CMS (систем управления контентом)?

Title и H1: как составляются и чем отличаются

Мета-тег Title - главный заголовок страницы, который прописывается в верхней части HTML-кода и дополняется описанием (мета-тегом Description).

Заголовок Тайтл обосабливается в HTML-коде блоками ..заголовок.. и легко находится поиском (нужно открыть код страницы - комбинация Ctrl+U, перейти на вкладку с кодом, запустить поиск - Ctrl+F по фразе "title").

Кроме того, заголовок страницы:

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

В отличие от Title, тег H1 - заголовок первого уровня - размещается в теле страницы. Он также учитывается поисковыми алгоритмами при ранжировании и определении релевантности, но имеет меньшую значимость. В иерархической структуре программного кода тег H1 идет ниже, чем Title, но выше подзаголовков H2-H6.

Если вы пользуетесь CMS, тег Title в движке или генерируется автоматически (берется заголовок записи, а фактически содержимое тега H1) или создается вручную (заполнением мета-тегов страницы через специальные поля или SEO плагины).

Ручное заполнение предпочтительней, потому что вебмастер:

1) Устраняет дублирование текстовых блоков (чтоб Title отличался от H1).
2) Вставляет дополнительные ключи из расширенной семантики среднечастотных и низкочастотных запросов.
3) Управляет через Title заголовками сниппетов в выдаче.
4) Использует по желанию частичную автоматизацию.
5) Самостоятельно устанавливает порядок слов и знаков препинания в Тайтле.

Частичная автоматизация заполнения мета-тега Title экономит рабочее время вебмастера на ручном добавлении к заголовкам всех страниц сайта однотипных (статичных или динамичных) фрагментов текста. Автоматизация при желании может добавить в Тайтл: дату или год, URL главной страницы, название компании, E-mail, физический адрес офиса, телефонный номер.

Рассмотрим подробнее объективные требования и полезные рекомендации по составлению Title и H1, которые понравятся пользователям и поисковым роботам.

Требования к Title (Tag)

1. В рамках сайта не должно быть двух одинаковых Title.
2. Тег не может использоваться на странице 2 раза (у каждой страницы только 1 основной заголовок).
3. Присутствие в заголовках ключей из семантического ядра позитивно влияет на SEO (если нет переспама, иначе - ).
4. При заполнении тега используют буквы, цифры, знаки препинания, специальные символы.
5. Длина Title может быть разной, но она ограничивается визуально при формировании выдачи примерно до 7-8 слов (54-64 символа без пробелов), после которых ставится многоточие. При этом поисковики сами решают - что показать, а что скрыть.
6. Ключевые слова по возможности размещают в первой части мета-тега, ближе к началу.
7. Поисковые системы "читают" Тайтл полностью, даже если он обрезается в сниппетах.
8. Длинные заголовки страниц полезны для по среднечастотным и низкочастотным запросам.
9. Желательно не использовать в Title более 2-х повторов одного слова, как и "кривых" нелогичных ключей.
10. Заголовок страницы должен быть осмысленным, читабельным и привлекательным для посетителей (не использовать бездумный список всех ключей из семантики).
11. Стоп-символы (точки, дефисы, запятые, слеши, кавычки, скобки) применяют для деления ключевых слов и смысловых отрезков.
12. Ключевые фразы лучше использовать перед началом стоп-символов, где их значимость выше.
13. Стоп-слова в заголовке ("в", "на", "от", "с", "под") влияют на ранжирование в Яндексе.
14. Заголовок Title составляют с учетом специфики сайта, особенностей продвижения и каналов привлечения трафика (например, если источник переходов - рассылка, заголовок должен быть интригующим или "вирусным", если - поиск, акцент делается на SEO- и ).
15. При заполнении тегов помните, что они подтягиваются в соцсети, отображаются в сниппетах и влияют на решения пользователей кликнуть по ссылкам.
16. По возможности Тайтл должен быть уникальным во всем интернете.
17. Для увеличения конверсий добавляйте мотивирующие призывы (жми, закажи сейчас, читайте и пр.).

Не забывайте - ошибки заполнения Тайтл и перенасыщенность (переспам) ключами приводят к и проблемам с ранжированием!

Требования к H1 (Header)

1. Тег H1 обязан присутствовать на странице, но не более одного раза.
2. Заголовок первого уровня не дублирует Тайтл, но пересекается с ним по ключевым словам.
3. Содержимое тега иногда попадает в поисковые сниппеты как Description (описание).
4. Оптимальный H1 дополняет, семантически и информационно расширяет мета-тег Title.
5. Присутствие ключевых слов в теге позитивно влияет на SEO (если нет общего переспама).
6. Содержимое заголовка должно быть читабельным, релевантным контенту.
7. В теге нельзя использовать бессмысленное перечисление ключевых слов и точных "кривых" вхождений.
8. Требований к длине H1 не предъявляется, но она должна быть умеренной и целесообразной. Вставка всего текста страницы в тег заголовка первого уровня чревато серьезными неприятностями.
9. Согласно иерархической структуре H1 следует перед тегами H2-H6 и является более значимым. Следите за иерархией заголовков вашего сайта, не ставьте H1 после H2-H6.
10. При правильной настройке SEO-функций CMS тег формируется автоматически - берется из названия записи на странице.
11. Обычно тег H1 визуально акцентируется в тексте более крупным шрифтом или цветом, используется в начале контента.
12. H1 не нужно выделять ни подчеркиванием, ни курсивом, ни жирной заливкой, ни тегами Strong.
13. Не используйте одинаковых H1 на разных страницах сайта (во избежание путаницы и так называемой "каннибализации ключей").

После оптимизации перепроверьте страницу любым из SEO-аналитических онлайн-сервисов, чтоб теги Тайтл и H1 вместе с описанием и контентом суммарно не спамили по ключевикам.

Дополнять, но не дублировать.

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

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

Если в процессе оптимизации возникнут вопросы или затруднения при заполнении тегов, смотрите на лидеров выдачи Яндекса/Google по вашим запросам. В ТОП-5 уже включены те площадки, которые поисковики сочли эталонными, "правильными". Анализируйте их и берите пример!

Должны ли H1 и TITLE совпадать или нужно их делать разными? Давний вопрос, который обязательно возникает на каждой встрече, где есть сеошники. Откуда он появился сказать сложно. Возможно, из несоответствия рекомендаций поисковых систем и примеров в ТОП10.

Доводы за разные теги тайтла и H1: мол, поисковик “подумает”, что мы хотим усилить двойным употреблением значение ключевого слова, за что обязательно накажет 🙂
Доводы за одинаковые теги: цитата в помощи Яндекса для вебмастеров.

Чтобы робот, анализирующий ваш сайт, смог правильно выделить наиболее важные разделы и ключевые страницы, нужно чтобы… текст в теге TITLE для ключевых страниц совпадал с ее названием (с заголовком страницы, выделенным, например, тегом H1) и с текстами ссылок, указывающих на эту страницу.

Как же на самом деле, делать их одинаковыми или разными? По большому счету - без разницы. Но стоит учесть несколько моментов.

— H1 и TITLE должны пересекаться

Если тайтл об одном, а H1 о другом, то поиску сложней определить, каким именно ключевым словам релевантна страница, да и пользователи будут в затруднении. Также эти участки кода помогают поисковикам формировать специальные элементы в сниппете, типа хлебных крошек или быстрых ссылок. Другими словами, не нужно делать TITLE и H1 совсем разными. Посмотрим несколько примеров (просто в качестве демонстрации, без предварительного анализа семантики).

Сайт представляет из себя салон итальянской мебели в Москве. Основные ключевые запросы: салон итальянской мебели, итальянская мебель…
TITLE : Салон итальянской мебели в Москве. Купить мебель из Италии | Название-Салона

H1: Добро пожаловать
Неоптимальный вариант, так как в H1 вообще нет продвигаемых ключевых слов. Приветствие можно написать в тексте.

H1: Эксклюзивная мебель из Италии
Уже получше, так как теги пересекаются по ключу “мебель из италии”. Но его может не быть в приоритетных запросах.

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

Как видим, здесь нет смысла делать полностью одинаковыми H1 и TITLE , но они должны все же пересекаться.

— H1 и TITLE виден пользователями на разных этапах взаимодействия с сайтом

TITLE пользователь чаще видит еще до перехода на сайт. H1 видит уже тогда, когда находится на странице. В связи с этим, H1 лучше делать коротким и максимально описывающим суть посадочной страницы, многое зависит от её предназначения. Что касается TITLE , помимо содержания ключевых слов, он должен мотивировать пользователя на клик (переход). В противном случае можно оптимизировать текстовую релевантность, но не оптимизировать конверсию в клики и, соответственно, получать не весь трафик.

Например, раздел радиоуправляемых вертолетов на сайте.
H1: Радиоуправляемые вертолеты (логично)
TITLE : Купить радиоуправляемые вертолеты с доставкой по Москве

Здесь слово “купить” призывает к действию, а “доставка по Москве” снимает ряд вопросов перед кликом.

Информационная тема: как плести браслеты из резинок
H1: Как плести браслеты из резиночек на станке
TITLE : Браслеты из резиночек: пошаговые инструкции и схемы плетения с фото и видео

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

— TITLE подтягивается в соцсети

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

Этот пункт наиболее актуален для информационных и новостных проектов. Но некоторые из них только и работают на соцсети, поэтому брать пример с заголовков типа “Эта женщина больше не могла смотреть на себя в зеркало. И вот что она сделала…” не всегда корректно для SEO . Просто при составлении тайтлов помните, что они могут попадать заголовками в соцсети.

— TITLE может содержать дополнительные ключевые фразы

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

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

H1: Инструкция по монтажу гибкой битумной черепицы
TITLE : Монтаж гибкой черепицы, технология укладки. Цена, видео

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

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

Сегодня будет статья по теме заголовков 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 верстку сайта и необходимо добавлять теги в ручном режиме, то сложностей тут не возникнет. Стоит лишь заключать нужные части текста между открывающим и закрывающим тегами с нужным уровнями. Смотрите ниже примеры.

заголовок 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?

H1 - это главный заголовок в статье, заголовок первого уровня. Каждая страница в интернете имеет свою структуру. Заголовки H1-H6 как раз и позволяют правильно структурировать материалы, причем как для поисковиков, так и для пользователей. H1 - главный заголовок, H2-H6 второстепенные, вложенные подзаголовки. В коде заголовки выглядят так:

сам заголовок

, цифра как раз и обозначает уровень заголовка.

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

Условие 1. Ключевые слова в заголовках

Для этого у вас должно быть разработано качественное семантическое ядро - отнеситесь к нему крайне ответственно и помните, что один и тот же ключ вставлять на все страницы сайта нельзя. Релевантность всему голова: нужно соответствовать ожиданиям клиентов и поисковиков. В заголовках главной страницы можно брать среднечастотные и высокочастотные запросы. А на товарных страницах (карточка товара) вполне допустимы заголовки с низкочастотными ключами. Ключ должен вести на конкретную позицию или единицу, быть точным, а не обобщенным.

Размещая ключевые слова, делайте это аккуратно: не злоупотребляйте ключами и не составляйте спамные заголовки (например, купить квартиру Москва, купить сумка холодильник, купить мотоцикл Красноярск цена, моя твоя не понимать и т. д. ). Сохраняйте красоту фразы и ее логичность. В великом и могучем русском языке слова спрягаются и склоняются, а роботы сейчас понимают смыл, разбираются в языке не хуже нас с вами! И не частите - спам очевиден всем, а так и до Баден-Бадена рукой подать, ну и не забывайте про Панду от Google.

Пример, где количество ключей зашкаливает, перебор.

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

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

Помните, что текст создается не только для поисковых машин, но и для людей. И вообще роботам нравятся человечные, простые и понятные тексты. Если в заголовке ключевые слова органично встанут в начало предложения, то сработает чуточку лучше. Т.е. с точки зрения оптимизации страницы под ключевое слово "гостиницы Москвы" лучше отработает заголовок "Гостиницы Москвы - официальные сайты, обзоры, фото", чем "Обзоры, фото и официальные сайты гостиниц Москвы".

Условие 2. Теги

-

Размещая тексты на сайте, не забудьте правильно расставить теги. Теги для заголовков текста определяются следующим HTML-кодом:

-

. По нашим наблюдениям, вполне хватает двух тегов —

-

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

Поисковики также учитывают размерность и значимость тегов

-

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

Ссылки в заголовках использовать не стоит, особенно в

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

Допустимо ссылаться с заголовков уровня

и ниже, но тоже если это оправдано и логично.

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

-

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

    Наводим порядок. Теги

    -

    расставляются по принципу иерархии: тег

    важнее тега

    . На деле это выглядит вот так:

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

    Кроме того, тег

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

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

    А если у вас возникнут сложности - обращайтесь к нашим специалистам , мы готовы проверить, правильно ли прописаны заголовки у вашего сайта, корректно прописать в случае ошибок и ответить на любые вопросы. Составление заголовков для 1 страницы (+подбор 3-х релевантных ключей) - от 450 рублей.