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

Уровни типографической иерархии

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

Можно выделить три основных уровня типографической иерархии:

• Первый уровень – это непосредственно сам заголовок. Задача этого уровня привлечь читателя и провести его в направлении второго уровня.
• Второй уровень – это подзаголовки, цитаты, описания и все остальное, что идёт отдельно от основного текста, но в его поддержку. Цель этого уровня повысить сканируемость текста и подтолкнуть читателя к дальнейшему чтению.
• Третий уровень – это наш основной текст. Цель этого уровня – уйти с пути пользователя. Мы должны не мешать и не привлекать внимание к тому, что может отвлечь пользователя и увести с данной страницы. Пользователь решает, нужно ли ему переходить к этому уровню на основании двух предыдущих.

Первый уровень (заголовок)

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

В среднем 8 из 10 человек прочитают ваш заголовок, и только 2 из 10 прочитают остальной текст. Поэтому для заголовка важна максимальная информативность.

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

Для выделения заголовка, можно воспользоваться стандартными приемами визуального выделения:

• Контрастность – заголовок должен быть достаточно контрастным по отношению к остальным элементам.
• Размер – увеличение размера текста для заголовка является самым простым способом выделить данный элемент.
• Начертание – еще один способ выделить заголовок. Можно сделать текст заголовка в жирном начертании, супер жирном или курсивом. Это позволит тексту выделиться.
• Пространство – для более четкой идентификации заголовка нужно добавить свободного пространства вокруг него. Чтобы пользователь четко знал, что это основной элемент на странице, и на нём нужно заострить своё внимание.

Второй уровень (подзаголовок)

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

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

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

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

Третий уровень

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

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

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

Что такое заголовки H1 и H2?

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

Тексты на сайтах также должны иметь заголовки. Этому существует как минимум 2 причины:

1. Заголовки структурируют текст, делают его более удобным для чтения. Сплошной текст (часто его называют «простыней») труден для восприятия, читать его не хочется. А так как поведенческие факторы (совокупность действий посетителей на сайте) сегодня учитываются поисковыми системами, вы заинтересованы в том, чтобы пользователь прочел текст на вашем ресурсе, а не закрыл страницу, испугавшись «простыни».

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

Теперь вы понимаете, что пренебрегать использованием заголовков в текстах на страницах сайта не стоит? Тогда следуем дальше!

Что же обозначают термины H1 и H2? Нам придется немного затронуть вопросы, касающиеся html-верстки. Н1 и H2 (а, точнее,

и

) - html теги, которые показывают важность текста, следующего после них. Их еще называют тегами акцентирования. В html-документе это выглядит так:

На веб-странице такие заголовки по умолчанию имеют разное форматирование:

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

Что нужно знать для грамотной расстановки заголовков H1 и H2?

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

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

Основные правила использования заголовка H1

Заголовок H1 должен быть кратким, но емким. Важное условие - естественное вхождение в него ключевых слов. Приведем пример. Допустим, вы оптимизируете страницу, на которой представлен каталог женской обуви. Для продвижения данной страницы выбраны следующие запросы (о том, что такое поисковые запросы, вы можете прочесть в нашем материале «Понимай своего сео-специалиста» ): «женская обувь» (частотность - 3896), «женская обувь в Минске» (частотность - 490), «купить женскую обувь» (частотность - 384), «обувь для женщин» (частотность - 207), «женская обувь каталог цены» (частотность - 318). Для текста на данной странице логичнее всего использовать заголовок H1 «Женская обувь», так как он является наиболее общим, но в то же время описывает содержание контента, а также может быть конкретизирован заголовками более никого уровня.

Заголовок H1 должен встречаться на странице только один раз.

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

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

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

Примеры составления заголовков H2

Каким образом составляются заголовки H2? Их в тексте может быть несколько. Как правило, они конкретизируют заголовок H1 и структурируют весь текст. Вернемся к нашему примеру со страницей, на которой представлена женская обувь. Для данной страницы можно написать продающий текст, в котором будут описаны преимущества моделей, предлагаемых покупательницам, и представлена таблица размеров. Также на странице пользователь сможет найти каталог обуви с фото и ценами. При этом заголовки в тексте могут быть такими:

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

Наиболее распространенные ошибки использования заголовков H1 и H2

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

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

и

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

и

заключены, например, названия блоков. Допустим, такие как «Популярные товары», «Последние новости», «Мы в социальных сетях» и проч. Такой прием вводит в заблуждение поисковые системы и не приносит ничего хорошего. Поэтому при проведении сео-аудита сайта специалист обязательно проверяет, «по назначению» ли используются заголовки. Запомните важное правило - H1 и H2 должны применяться лишь для структурирования текста!

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

Помещение в заголовки гиперссылок.

Присутствие на странице двух и более заголовков H1. Мы помним, что это недопустимо! Наш девиз: «Одна страница - один заголовок H1»!

В заключение нашей статьи обратим ваше внимание на еще один важный момент. Речь снова пойдет о шаблонах сайтов. Известны случаи, когда в стандартных шаблонах страниц вовсе нет заголовков H1. Вместо них идут заголовки H2. Даже если в административной части сайта вам предлагается ввести текст в поле «Заголовок материала», на деле может оказаться, что он будет заключен в теги

. Проверьте, нет ли такой недоработки на вашем сайте - изучите структуру документа, нажав клавишу F12. Ваш заголовок заключен в теги

? Значит, все отлично!

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

Для того, чтобы сайт попал на первые места поисковой выдачи и получил трафик с поисковых систем, его необходимо оптимизировать. Именно оптимизация, а не создание сайта, является самым трудным этапом. Если создаётся сайт единовременно, то процесс оптимизации его идёт постоянно. Начинают, как правило, с внутренней оптимизации сайта, так как она имеет определённое число конечных этапов. Впрочем, этапов этих много, поэтому лучше сосредоточится на описании тех, которые наиболее редко применяются вебмастерами из-за своей неизвестности или сложности. Одним из самых незаслуженно недооценённых этапов оптимизации является расстановка заголовков 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?

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

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

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

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

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

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

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

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

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

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

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

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

-

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

-

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

-

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

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

-

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

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

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

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

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

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

-

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

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

-

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

важнее тега

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



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



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

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

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

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

Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего () используют в качестве заголовка сниппета.

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

Важные замечания:

• заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.
• заголовок — это слово, фраза, предложение. Он не должен быть длинным.
• заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как strong , mark , em и др. ().
• если статья строится в формате "вопрос-ответ" и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов h правильней использовать тройку dl , dt , dd .

Проверить h1 страницы

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

Разница в использовании h1 , h2 , h3 , h4 , h5 , h6 в HTML5 и HTML4

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

Один h1 на странице (версия HTML4)

• Пошаговое решение судоку
  • Программа решения судоку с объяснениями (онлайн)
  • Правила игры
  • Алгоритм заполнения ячеек кроссворда
    • Способ 1. «Скрытые одиночки»
    • Способ 2. «Одиночки»
  • Методы решения судоку
    • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
    • Стратегия 2. Группы кандидатов

Название сайта

Заголовок

Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h3):

Процентные ставки от 1% до 5%

...

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

только текст

весь блок (прямоугольная область)

Должен ли title отличаться от h1 ?

"Может ли title быть таким же как h1 ?" — да, может.

"Различный title и h1 полезны для SEO?" — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).

Примечание: для того, чтобы страница могла присутствовать в Новостях Google или быстрых ссылках Яндекса , основная часть title и h1 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.

Нужно ли заголовки боковых блоков брать в h ?

Если заголовки индексируются (см. ), то пусть лучше будут в теге h . Всё равно они употребляются на каждой странице сайта и вес этих слов ("Реклама", "Последние сообщения", "Подписка" и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.

К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled .