Содержание

Заголовки HTML уроки для начинающих академия


Заголовки

Заголовки 2

Заголовки 3

Заголовки 4
Заголовки 5
Заголовки 6

Заголовки HTML

Заголовки определяются с помощью <h2> для <h6> тегов.

<h2>определяет наиболее важный заголовок. <h6>определяет наименее важный заголовок.

Пример

<h2>Заголовки 1</h2>
<h3>Заголовки 2</h3>
<h4>Заголовки 3</h4>
<h5>Заголовки 4</h5>
<h5>Заголовки 5</h5>
<h6>Заголовки 6</h6>

Примечание: Браузеры автоматически добавляют пробел (поле) до и после заголовка.

Заголовки важны

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

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

<h2>заголовки должны использоваться для основных рубрик, за которыми следуют

<h3> заголовки, затем менее важные <h4> и так далее.

Примечание: Используйте заголовки HTML только для заголовков. Не используйте заголовки, чтобы сделать текст BIG или bold.

Большие заголовки

Каждый заголовок HTML имеет размер по умолчанию. Однако можно указать размер любого заголовка с атрибутом style, используя свойство CSS font-size:

Пример

<h2 style=»font-size:60px;»>Heading 1</h2>

Горизонтальные правила HTML

Тег <hr> определяет тематический разрыв в HTML-странице и чаще всего отображается как горизонтальное правило.

Элемент <hr> используется для разделения содержимого (или определения изменения) в HTML-странице:

Пример

<h2>This is heading 1</h2>
<p>This is some text.</p>
<hr>
<h3>This is heading 2</h3>
<p>This is some other text.</p>
<hr>

Элемент HTML <head>

Элемент HTML <head> не имеет ничего общего с заголовками HTML.

Элемент <head> является контейнером для метаданных. Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.

Элемент <head> помещается между тегом <html> и тегом <body>

:

Пример

<head>
  <title>My First HTML</title>
  <meta charset=»UTF-8″>
</head>

<body>
.
.
.

Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

Как просмотреть HTML-код?

Вы когда-нибудь видели веб-страницы и спрашивали «Эй! Как они это сделали?»

Просмотр исходного кода HTML:

Щелкните правой кнопкой мыши в HTML-страницы и выберите «Просмотр источника страницы» (в Chrome) или «Просмотр источника» (в IE), или аналогичные в других браузерах. Откроется окно, содержащее исходный HTML-код страницы.

Проверьте элемент HTML:

Щелкните правой кнопкой мыши на элементе (или пустой области), и выберите «проверить» или «проверить элемент», чтобы увидеть, какие элементы составляются (вы увидите как HTML и CSS). Вы также можете редактировать HTML или CSS на лету на панели элементы или стили, которая открывается.

Справочник тегов HTML

Справочник тегов html5css.ru содержит дополнительную информацию об этих тегах и их атрибутах.

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

ТегОписание
<html>Определяет корень HTML-документа
<body>Определяет тело документа
<head>Контейнер для всех элементов Head (название, скрипты, стили, мета-информация и многое другое)
<h2> to <h6>Определяет заголовки HTML
<hr>Определяет тематическое изменение содержания

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

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

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

Для чего нужны

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

То есть, основное предназначение заголовков — привлечение внимания пользователя.

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

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

Заголовки в статье

Визуально, заголовки в теле документа выглядят следующим образом:

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

Заголовки в коде

Просматривая документ в формате HTML, такого явного визуального различия между заголовками нет. Выглядит разметка так:

Более наглядный пример в коде:

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

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

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

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

Например, на нашем сайте он выглядит вот так:

Вторым по значимости является заголовок h3, который может встречаться несколько раз, в зависимости от объема и смысловой нагрузки контента.

Очень часто, этого заголовка h3 достаточно для грамотного и правильного оформления страницы. Но бывает и так, что приходится использовать следующий заголовок: h4.

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

Важно! не рекомендуется использовать заголовок низшего уровня, если вы не использовали в статье заголовок высшего уровня. То есть нельзя использовать заголовок h5, если в вашей статье нет заголовка h4.

Как правило, заголовок h5 является крайним в иерархии статьи и используется редко. То есть, можно сказать, что заголовки h5 и h6 не используются вовсе. Но это не значит, что их нельзя использовать. Если есть необходимость, то стоит вспомнить и про них.

Главное — нужно заботиться об удобстве восприятия материала пользователем.

Для примера приведу правильную иерархию статьи:

Почему h2 самый главный

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

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

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

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

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

Пример отображения title в поисковой выдаче

Заголовок h2 должен отличаться от Title, потому что у них разная цель.

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

Во вторых. Заголовок h2 указывает поисковым системам на то, что контент, расположенный на этой странице, соответствует вписанному в нее заголовку title, ранее изученному пользователем на странице поисковой выдачи.

А основная задача title — это быть оптимизированным под поисковые запросы. Более подробно про составление title читайте в нашей статье.

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

Но повторяя их содержимое вы не даете поисковой системе ничего нового. Поэтому желательно их затачивать под разные цели. Title — преимущественно для seo. h2 — для конверсии и мареткинга. Это в идеале, но а сама реализация зависит от конкретной ситуации.

Более подробно про различия h2 и title мы описали в этой статье.

Требования к h2

  • Нужно стараться делать заголовок h2 кратким, но в то же время максимально информативным. В идеале не более 5-7 слов.
  • Заголовок h2 не рекомендуется повторять на одной и той же странице несколько раз. Главное правило: одна страница — один заголовок h2.
  • Заголовок размещается вверху всего документа.
  • Перед заголовком h2 нельзя использовать менее приоритетный заголовки h3, h4 и т.д.

Существует негласное мнение, что длина заголовка h2 не должна превышать 50 символов. Но не критично, если этот предел будет превышен. Все индивидуально и зависит от содержимого страницы.

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

Как сделать заголовок цепляющим

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

Существуют множество приемов составления привлекательного заголовка. Рассмотрим некоторые из них.

Решаем проблему пользователя

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

  • «Болит голова? Избавьтесь от головной боли за неделю!»
  • «Можно ли избавиться от головной боли?»

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

Интригуем посетителя

Опять, для примера два варианта заголовков:

  • «Делимся самым эффективным методом лечения головной боли!»
  • «Хороший метод лечения головной боли!»

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

Метод «экзамена»

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

  • «Вы точно знаете, что правильно боретесь с головной болью?»
  • «Все ли вам известно о борьбе с головной болью.»

Первый вариант опять более удачный, нежели второй.

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

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

  • Необходимо понимать, что наименьший заголовок не может присутствовать в тексте, в котором нет большего заголовка. Например, если в документе прописан заголовок h4, то перед ним обязательно должен стоять заголовок h3.
  • Чем выше приоритетность заголовка, тем больше должен быть размер его шрифта. Во всех известных CMS эта функция, как правило, реализована по умолчанию.
  • Каждый заголовок должен быть емким и информативным, отображающим основную суть материала, последующего за ним.
  • Теги h3-h6 не должны включать в себя другие HTML теги или элементы разметки.
  • Не нужно спамить в заголовках ключевыми словами. Как правило, запросы используются при составлении title и h2. В заголовках h3-h6 ключи использовать можно, но стоит делать это с осторожностью. Главное — это раскрыть суть информации, которая последует за заголовком.
  • Нужно помнить что в поисковую выдачу Яндекс вместо title могут попадать заголовки h3-h4.

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

Частые ошибки использования заголовков h2-h6

Зачастую, составляя заголовки h2-h6, вебмастера допускают одни и те же ошибки. Разберем их более подробно.

  • На странице встречаются несколько заголовков h2. Это самая грубая ошибка, которая, как не странно, встречается чаще всего. Главное правило: один документ — один заголовок h2.
  • Не соблюдается иерархия заголовков. Не все понимают этот момент, считая, что вправе оформлять текст так, как заблагорассудится. Поисковые системы считают иначе. Иерархия заголовков должна соблюдаться.
  • Заголовки, составленные из ключевых слов. Использовать ключи в заголовках можно, то только в пределах разумного. Не стоит оформлять в виде заголовка несколько ключей, перечисляемых через запятую. Как правило, заголовки содержат ключи в порядке их приоритетности. То есть, заголовок h2 включает в себя наиболее высокочастотный запрос, а заголовок h6 (если он используется) — низкочастотный запрос.
  • Не стоит использовать теги h3-h6 в элементах меню или в других заголовках, которые не относятся к контенту.

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

WordPress — наиболее распространенная система управления сайтом. Поэтому разберемся с ней более подробно.

Заголовок h2 прописывается в поле над основным содержимым документа:

Остальные уровни заголовков h3-h5 оформляются следующим образом. Пишется текст и преобразуется в заголовок:

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

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

Частые вопросы

Можно ли использовать заголовок h2 несколько раз в HTML 5?

HTML 5 в своих правилах разрешает использовать несколько заголовков h2. Но я специально написал с этим вопросом в службу поддержки Яндекс, на что они мне ответили, что рекомендуется использовать h2 всего один раз, даже в HTML 5.

Обязательно ли использовать заголовок h2 на главной странице?

Не обязательно, если это невозможно осуществить, то можно и не использовать.

Заключение

Использование заголовков в документе позволяет сделать текст более удобным для восприятия пользователя. Составляя заголовки, нужно соблюдать их иерархию и заботиться о привлекательности и емкости текста. Заголовки не должны быть кликбейтными и «желтыми». Каждый заголовок должен соответствовать тексту, который следует после него.

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

| Справочник HTML

Элементы <h2> ‒ <h6> (от англ. «header» ‒ «заголовок») создают заголовки разного уровня в документе. <h2> ‒ высший уровень (наивысшая важность), <h6> ‒ низший уровень (наименьшая важность). Заголовки обычно используются в порядке, соответствующем их уровню.

По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше, а текст заголовка <h5> имеет тот же размер, что и стандартный текст. Элементы <h2> ‒ <h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство (margin).

HTML тег <h3>, как правило, используется для заголовков постов в ленте, размещенной на главной странице или для подзаголовков в статье.

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

Примечание: Заголовок <h2> должен использоваться только один раз на странице.

Синтаксис

<h3>Заголовок второго уровня</h3>

Закрывающий тег

Обязателен.

Атрибуты

alignУстарел в HTML5
Определяет горизонтальное выравнивание содержимого элемента.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <h3> со следующими значениями CSS по умолчанию:

h3 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

Различия между HTML 4.01 и HTML5

В HTML5 атрибут align не поддерживается. Используйте стили CSS.

Пример использования:

Элементы <h2> ‒ <h6>

Шесть разных HTML заголовков:

Пример HTML: Попробуй сам
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
<h5>Заголовок четвертого уровня</h5>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

Спецификации

Поддержка браузерами

Элемент
<h3> 2+ 1+ 2+ 1+ 1+ 1+
Элемент
<h3> 1+ 1+ 6+ 1+

Похожие страницы

HTML уроки: HTML Элементы

HTML уроки: HTML Базовые теги


Правильные SEO заголовки страниц сайта

Автор Александр Брушкивский На чтение 5 мин. Просмотров 7.8k. Опубликовано Обновлено

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

Ранее я уже сравнивал мета тег title и тег h2 по их важности и роли для SEO. Сегодня подробнее разберем именно теги типа H. Всего существует 6 таких тегов, но в основном используются только первые 3 — теги h2, h3 и h4.

SEO заголовок страницы h2 и его значимость

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

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

Обязательно проверяйте наличие тега h2 на странице в самом начале оптимизации или еще ранее — на этапе проведении seo аудита сайта. К тому же тег h2 должен быть всего 1 на странице.

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

Последний сайт что я взял на оптимизацию — это как раз таки одностраничный сайт собранный на Muse и когда я заглянул на код сайта обнаружил аж 7 заголовок размеченных тегом h2 — это ужасная ошибка.

Заголовок h3 и его важность для продвижения

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

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

Рассмотрим пример страницы товара в магазине фототехники — если заголовок h2 страницы имеет вид «Canon 6d Body», то тегом h3 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид «Характеристики Canon 6d Body» и «Преимущества фотоаппарата Canon 6d Body».

Тем самым мы за счет заголовков типа h3 захватим важные моменты, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному «Canon 6d Body», но и по дополнительным запросы касаемо преимуществ и характеристик данной модели фотоаппарата. А охват большего числа запросов в свою очередь — это рост трафика на сайт.

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

Например данная статья может с легкостью выйти в ТОП по запросу «Заголовок h3», только потому что эта фраза есть в теге h3.

Пару слов о заголовке h4 и нужен ли о вообще

Я в своих статьях очень редко использую заголовок с тегом h4. В случаях если статья набирает в себе 5000 символов и выше и то не всегда — можно обойтись и разбаить статью на подразделы и разметить их тегом h3.

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

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

Порядок и иерархия заголовков на странице сайта

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

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

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

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

Тег | HTML справочник

HTML теги

Значение и применение

HTML заголовки определяются тегами от <h2> до <h6>:

<h2> определяет наиболее важные заголовки, а <h6> определяет наименее важные заголовки (<h2> заголовки должны быть основными заголовками, затем следуют заголовки <h3> и так далее). Браузеры автоматически добавляют пустое пространство до и после каждого заголовка.

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

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
alignleft
right
center
justify		Не поддерживается в HTML5.
Определяет выравнивание текста в заголовке. Используйте CSS свойство text-align вместо данного атрибута.

Пример использования

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование заголовков в HTML</title>
	</head>
	<body>
		<h2>Здесь содержится заголовок первого уровня</h2>
		<h3>Здесь содержится заголовок второго уровня</h3>
		<h4>Здесь содержится заголовок третьего уровня</h4>
		<h5>Здесь содержится заголовок четвертого уровня</h5>
		<h5>Здесь содержится заголовок пятого уровня</h5>
		<h6>Здесь содержится заголовок шестого уровня</h6>
	</body>
</html>

Результат нашего примера:

Пример использования заголовков от <h2> до <h6> в HTML.

Отличия HTML 4.01 от HTML 5

Атрибут align не поддерживается в HTML5.

Значение CSS по умолчанию

h3 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

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

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

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

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

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

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

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

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

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

Рис.1

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

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

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

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

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

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

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

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

Правила написания заголовков h2-h6

HTML заголовок h2 разрешено использовать единожды. Именно он на странице пишется с заглавной буквы: h2. Кроме того, он выделяется жирным шрифтом. Другие теги пишутся с маленькой буквы: h3, h4, h5, h5, h6. Это правило для всех.

Тег h2: правила использования

Существует несколько основных правил оформления тега h2:

  • Прописывается один раз в начале текста
  • Первый тег желательно делать короче тайтла. То есть его длина должна быть 50 символов (+ – 10 символов)
  • Текст заголовка h2 не должен дублировать название статьи или опровергать его
  • Нельзя в конце ставить знаки препинания, в т. ч. точку
  • Используется только один раз
  • h2 пишется с большой буквы
  • Ключевые фразы вписываются, но не дублируют ключи в тайтле
  • Оформлен грамотно, без ошибок

На первый взгляд так и есть:

  • Заводишь компанию,
  • Добавляешь объявление
  • Добавляешь несколько ключевых слов (которые Яндекс сам и «подсказывает»)
  • Рекламная компания готова!

Пример написания первого заголовка:

Строительство домов из газобетона

 

Оптимизация заголовка h2 увеличит шансы вашей статьи подняться в первые строчки поиска.

Теги h2, h3 ,h4, h5, h5, h6 – что и как писать

Заголовки всегда прописываются в закрывающем элементе. Начинаются они с новой строки. До и после добавляется отступ. При их написании используется align. Он нужен для определения выравнивания заголовка. Все теги выравниваются по левому краю по умолчанию. С помощью align Вы можете выровнять их по центру или по правому краю.

Подзаголовки от 1 до 6 вписывают в саму статью. Благодаря h3 – h6 она подразделяется на смысловые блоки. При сео – анализе их распознаются поисковые системы. Структурированный текс более читабелен и интересен пользователям. h3 привлекает внимание роботов пользователей, раскрывает основную мысль статьи. h4 служит подпунктом h3. Остальные теги раскрывают смысл информации h3, h4.

Основные правила для написания тегов h3 – h6

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

  • Количество символов должно быть меньше, чем в тайтле. Примерно 50 без пробелов.
  • Меньший заголовок не должен быть включён в статью без большего. Если нет h5 и h4, h5использовать запрещено.
  • Каждый предыдущий заголовок должен быть крупнее последующего. Если Вы пользуетесь WordPress, то он автоматически выравнивает заголовки, и потребность делать это вручную отпадает.
  • Заголовки не должны противоречить названию и смыслу статьи. Они призваны раскрывать её суть.
  • Их не используют в качестве активных ссылок.
  • Недопустимо прописывать другие теги внутри.
  • При написании нельзя использовать символы кроме букв и знаков препинания.
  • Важно следить за тем, чтобы не переспамить их. Ключевые слова и фразы можно использовать в первом и втором заголовках. В последующих тегах использование ключей не обязательно.
  • Не следует прописывать все подзаголовки от 1 до 6. Системные роботы яндекса могут заподозрить статью в переспаме, а сайт в переоптимизации.

заголовки h2 h3 h4 пример:

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

Текст заголовков h2 – h6

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

  • Для повышения релевантности страницы в заголовке используют ключевые слова.
  • Меньший заголовок не должен быть включён в статью без большего. Если нет h5 и h4, h5использовать запрещено.
  • Для каждой страницы прописывается индивидуальные заголовки.
  • Заголовки не должны противоречить названию и смыслу статьи. Они призваны раскрывать её суть.
  • Заголовок размещают как можно ближе к началу документа. Если html-код будет находиться в непосредственной близости, значимость заголовка возрастает.
  • Лучше если заголовок в статье начинается с ключевого слова.
  • Длина заголовков должна быть в несколько слов. Если допустить в них много символов, то поисковые системы не смогут их полностью рассмотреть.
  • Текст должен быть грамотным. Не допускается наличие орфографических, синтаксических и пунктуационных и других ошибок. Это значительно снизит релевантность страницы.
  • Роботы поисковых систем могут проигнорировать страницу, если её заголовки состоят из одних ключевых слов. Желательно, чтобы их плотность была невысокой.

Тег h2 Word press joomla в CMS

Многие CMS (система управления содержимым) имеют функцию поддержки использования заголовков. Они настроены по умолчанию на автоматическую расстановку и выравнивание подзаголовков. Но сделать это получается не всегда. Специфика некоторых сайтов не позволяет сделать это. Автоматическая расстановка заголовков на wordpress, joomla, битрикс и подобных им CMS отлично помогает в продвижении сайта. Настроив такие сайты, вы сэкономите много времени и улучшите свои статьи для сео – оптимизации.

Оценивается ли удобочитаемость? О простоте чтения и SEO • Yoast

Марике ван де Ракт

Мариеке ван де Ракт — генеральный директор Yoast. Ее основное внимание уделяется развитию компании. Она действительно любит поддерживать открытую и дружелюбную корпоративную культуру. Марике также активно участвует в маркетинге Yoast и Yoast SEO Academy: платформы онлайн-курсов.

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

Хорошо написанный текст улучшает UX

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

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

Поисковые системы имитируют людей

Было время, когда вставка ключевых слов в текст работала.Если вы просто упомянете свои ключевые слова в тексте достаточное количество раз, Google повысит их рейтинг по этим ключевым словам. Те времена давно прошли.

К счастью, Google стал намного лучше распознавать качественный контент. Например, после обновления Hummingbird Google начал распознавать синонимы. Он также понимает, какие слова, сущности и контент связаны друг с другом. Вдобавок к этому поисковые системы стали лучше предсказывать, что люди хотят читать. По ключевым словам в вашем запросе они могут сделать приблизительное предположение о вашем намерении поиска.Вы можете узнать, как семантически связать сущности с вашим контентом.

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

Для голосового поиска важна удобочитаемость

Число людей, использующих голосовой поиск, продолжает расти, поэтому Google и другие поисковые системы ориентированы на голосовой поиск.Они представляют свои результаты голосовым способом; они оценивают свои результаты голосовым способом.

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

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

Что делает текст удобным для чтения?

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

Все, что люди делают во время чтения текста, будет делать Google. Это означает, что структура вашего текста и способ написания абзацев становятся все более важными. Ключевые предложения — первое предложение каждого абзаца — будут иметь решающее значение. И наличие четкой и логичной структуры в вашем тексте будет бесценным.

Советы по сохранению читабельности текста

Давайте поговорим о том, как создать удобное чтение.Прежде чем приступить к написанию текста, подумайте о структуре. Что вы собираетесь рассказать своей аудитории и в каком порядке? Это логичный порядок тем? Сможет ли ваша аудитория последовать вашим аргументам, вашим примерам и сообщениям? Может, стоит попробовать писать контент в стиле перевернутой пирамиды?

Старайтесь использовать короткие предложения, так как длинные предложения обрабатывать гораздо сложнее. Избегайте или ограничивайте количество сложных слов в тексте. Старайтесь не использовать сложные предложения и старайтесь избегать использования пассивного залога.

Обязательно пишите в привлекательном стиле. Это может быть очень сложно; не у всех есть талант к творческому письму. Обязательно немного перемешайте! Попробуйте чередовать длинные предложения с более короткими. Используйте синонимы. Избегайте начинать предложения с одного и того же слова. Или ознакомьтесь с нашими 5 советами по написанию удобочитаемого сообщения в блоге.

Мы знаем, что написать читаемую копию сложно. Написание нечитаемого текста — ошибка, которую мы видим довольно часто. Вот почему мы разработали анализ читабельности в Yoast SEO.Он проверяет, например, если ваши предложения не слишком длинные, если вы не слишком часто используете пассивный залог и подходит ли длина ваших абзацев. Анализ дает вам советы о том, что вы можете улучшить, и вы даже можете увидеть, какие предложения требуют повторного просмотра. Мы постоянно дорабатываем его, добавляем новые проверки и переводим на как можно больше языков. Сейчас нас больше 15! Анализ доступен бесплатно в плагине Yoast SEO.

И последний совет: прочтите это вслух!

Гэри Иллис из Google однажды написал в Твиттере, что вам следует читать текст вслух.Если он плохо читается или звучит странно, он, вероятно, тоже не будет ранжироваться.

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

Продолжайте читать: SEO копирайтинг: полное руководство »

Почему теги заголовков h2 и h3 важны для SEO

Для нас нет ничего необычного в том, чтобы оценить существующий веб-сайт потенциального клиента и понять, что на нем отсутствуют теги h2 и h3 (сокращение от Header 1 и Header 2). Обычно это приводит к двум реакциям: приподнятая бровь и легкое содрогание. Причина этого довольно проста, но сначала вы должны понять, что такое h2s и h3s.

Текст заголовка 1 обычно является самым большим текстом на странице и служит заголовком для содержимого этой страницы.

Если бы веб-страница была книгой, текст h2 был бы названием книги. Он сообщает потенциальным читателям, соответствует ли эта тема их интересам. Например, если вы ищете советы о том, как распутать шерсть пуделя, и натолкнулись на страницу под названием «Как ухаживать за пуделем», вы, вероятно, прочтете эту страницу. И наоборот, если страница озаглавлена ​​«Почему Барри Бондс не должен быть в Зале славы», вы почти наверняка не собираетесь читать эту страницу, потому что она почти наверняка не поможет вашему грязному, грязному пуделю. .

Когда вы смотрите на веб-страницу и видите что-то похожее на большой заголовок вверху страницы, скорее всего, это текст заголовка 1. В этом блоге заголовок вверху страницы «Теги заголовков h2 и h3 и их влияние на SEO» был отмечен тегами h2. Если вы посмотрите исходный код этой страницы, то найдете следующее:

Объяснение тегов заголовков h2 и h3 и их влияния на SEO

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

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

Соответствующий текст заголовка 2 направляет посетителей к определенному разделу веб-содержимого.

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

Текст подзаголовка выше «Соответствующий текст заголовка 2 направляет посетителей к определенному разделу веб-контента» — это текст заголовка 2.Если вы посмотрите исходный код этой страницы и выполните поиск по этой фразе, вы найдете этот фрагмент текста:

Соответствующий текст заголовка 2 направляет посетителей к определенному разделу веб-контента.

Два экземпляра «h3» в скобках по обе стороны от текста сообщают вашему браузеру — и, конечно же, Google, — что текст между ними должен быть больше обычного текста, но не должен быть таким большим, как «h2». Текст. Это не очень громкое название, но это большие подзаголовки, которые все равно будут привлекать внимание.

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

Это большая часть того, почему отсутствие тегов h2 и h3 является проблемой. Сайт, на котором отсутствуют h2s и h3s, подобен книге без названия и заголовков глав. Контент все еще там, но значительно труднее для читателей, чтобы быстро оценить общий предмет, а затем углубиться и найти конкретную часть информации, которая им нужна.Помните, я сказал, что посетители потратят около 10 секунд, чтобы найти то, что они ищут? Если для них нет текста h2 и h3, скорее всего, они потеряют терпение и уйдут.

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

Влияют ли теги h2 и h3 на SEO и рейтинг в поисковых системах?

Этот вопрос был источником бесконечных споров среди SEO-экспертов уже более десяти лет.По прошествии всего этого времени общепринятым ответом будет звучный: «Возможно». Считается, что раньше текст заголовка 1 и заголовка 2 оказывал большее влияние на поисковый рейтинг, чем сейчас, поскольку был вытеснен более изощренными методами.

Было проведено относительно мало тематических исследований, посвященных прямому влиянию оптимизированных тегов h2 и h3 на поисковый рейтинг, но иногда просачивается одно, указывающее на то, что h2s и h3s напрямую влияют на поисковый рейтинг. И наоборот, другие обнаружили, что простое использование более крупных шрифтов для ключевых фраз дает те же результаты, что и использование h2s и h3s (что, откровенно говоря, одно и то же, и, исходя из опыта, намного проще просто использовать теги заголовков, чем вручную возиться с текстом. size, тем более что WordPress упрощает реализацию тегов заголовков).

На этом этапе мы не на 100% уверены, смотрят ли Google и компания конкретно на теги заголовков или способ, которым пользователи реагируют на контент с помощью тегов заголовков, имеет большее влияние на поисковый рейтинг. Это стало чем-то вроде головоломки типа «курица или яйцо».

Мы знаем, что Google очень тщательно изучает поведение пользователей, чтобы определить качество веб-сайта, поэтому Google Analytics сообщает такую ​​информацию, как показатели отказов, среднее время, проведенное на веб-странице и т. Д.- потому что эти данные показывают, насколько полезна страница и, следовательно, насколько высоко Google оценивает ее. Если одна страница о распутывании меха пуделя имеет среднее время посещения 12 секунд, а другая — 50 секунд, велика вероятность того, что вторая страница будет иметь более высокий рейтинг. И главный фактор, определяющий, сколько времени посетитель проведет на странице, — насколько легко проанализировать контент на странице. Итак … что помогает посетителю разбирать контент? Теги h2 и h3.

Основываясь на личном опыте и нашей многолетней работе со многими клиентами, мы считаем, что эффективное использование тегов h2 и h3 напрямую влияет на поисковый рейтинг.Но даже если улучшения в производительности, которые мы приписываем использованию h2s и h3s, являются просто результатом улучшенного взаимодействия с пользователем, приводящего к более низким показателям отказов и лучшему взаимодействию с пользователем (и, как следствие, лучшему ранжированию), вывод все тот же: используйте Теги h2 и h3.

Правильное использование тегов h2 и h3 довольно просто.

Индустрия веб-разработки в целом установила довольно краткие и простые в использовании стандарты использования тегов Header 1 и Header 2:

# 1: Используйте только один тег Header 1 на странице. Некоторые люди любят спорить об этом, и есть определенные обстоятельства, когда может быть уместно использовать более одного тега заголовка 1 на странице. Но если вы читаете это и находитесь в ситуации, когда вам требуется руководство по правильному использованию тегов h2, выберите простой путь: один тег h2 на страницу. К счастью, WordPress, который мы используем почти для всех клиентских сайтов, делает это довольно легко. Большинство тем просто берут любой заголовок для публикации или страницы и автоматически устанавливают его как текст h2. Бум.Сделанный.

# 2: экономно используйте заголовок 2. Не засоряйте свой контент h3s. Чем больше h3s на вашей странице, тем они менее полезны. Я стараюсь, чтобы каждый h3, который я использую, служил подзаголовком как минимум для пары сотен слов текста. Если страница содержит от 800 до 1000 слов, максимум четыре заголовка 2, и я почти наверняка использовал бы меньше.

В этом сообщении блога, состоящем почти из 2 000 слов, используется всего четыре h3.

# 3: Убедитесь, что ваши h2s и h3s описательны. Чтобы узнать, полезны ли ваши h2 и h3, попробуйте записать их на листе бумаги в краткий список. Например, мой список для этого сообщения в блоге будет следующим:

  • h2: Объяснение тегов заголовков h2 и h3 и их влияния на SEO
    • h3: Текст заголовка 1 обычно является самым большим текстом на странице и служит заголовок для содержания этой страницы.
    • h3: Соответствующий текст заголовка 2 направляет посетителей к определенному разделу веб-содержимого.
    • h3: Влияют ли теги h2 и h3 на SEO и рейтинг в поисковых системах?
    • h3: Правильное использование тегов h2 и h3 довольно просто.

Теперь, глядя на этот список, понятно, о чем эта страница и каждый из ее разделов?

Да. Я знаю из h2, что пост объяснит, что такое теги заголовков и как они влияют на SEO. Глядя на h3s, я знаю, что содержание сообщения объяснит, что такое h2s, что такое h3s, влияют ли h2s и h3s на SEO, и как правильно реализовать теги h2 и h3. Совершенно ясно, что здесь происходит.

Теперь предположим, что в первом черновике этого сообщения в блоге я проверил свои h2 и h3, перечислив их, и составил следующий список:

  • h2: Объяснение тегов заголовков h2 и h3 и Как они влияют на SEO
    • h3: Текст заголовка 1 обычно является самым большим текстом на странице и служит заголовком для содержимого этой страницы.
    • h3: Соответствующий текст заголовка 2 направляет посетителей к определенному разделу веб-содержимого.
    • h3: Влияют ли теги h2 и h3 на SEO и рейтинг в поисковых системах?
    • h3: Следующий шаг…

Сразу должно быть очевидно, что самый последний h3 бесполезен. Это мне ничего не говорит о содержании этого раздела. Я, вероятно, могу догадаться из контекста, что есть некоторый прогресс, что мы берем то, что узнали в предыдущих разделах, и делаем… что-то… с этим.Но может я ошибаюсь. Возможно, следующим шагом будет инвестирование в Amway. Что сказать?

С технической точки зрения этот h3 является слабым, поскольку не содержит ключевых слов. В нем не упоминаются «Заголовок 1», «Заголовок 2», «SEO» или что-либо, имеющее косвенное отношение к теме. Он не дает никаких указаний. Хорошее h3 не оставит вас в темноте. Это не должно быть расплывчатым. Это не кликбейт.

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

Обратите внимание, что это не последнее слово по данному вопросу. Как я отмечал выше, важность тегов заголовков является спорным вопросом, и со временем их роль в SEO, вероятно, изменится. Но в Post Modern Marketing мы применяем этот подход как к веб-сайтам наших клиентов, так и к нашему собственному веб-сайту, и он работает для нас. Скорее всего, это сработает и для вас.

Что это такое и как их использовать

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

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

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

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

Теги заголовков, также известные как теги заголовков, используются для разделения заголовков и подзаголовков на веб-странице.Они располагаются в порядке важности, от h2 до H6, причем заголовком обычно является h2. Теги заголовков улучшают читаемость и SEO веб-страницы.

Вот краткое руководство по тегам заголовков и тому, для чего они используются:

  • h2 — Заголовок сообщения. Обычно они ориентированы на ключевые слова, сосредоточены вокруг «большой идеи» страницы или сообщения и созданы, чтобы привлечь внимание читателя.
  • h3 — Это подзаголовки, которые классифицируют основные моменты ваших абзацев и отдельных разделов.Подумайте об использовании семантических ключевых слов, связанных с «большой идеей» в вашем h2, а также помогите читателю легко найти разделы, которые они хотят прочитать.
  • h4 — Это подразделы, которые дополнительно разъясняют моменты, сделанные в h3. Кроме того, их можно использовать в списках форматирования или в маркированных списках.
  • h5 —Это подразделы, в которых более подробно разъясняются моменты, затронутые в h4. Кроме того, их можно использовать в списках форматирования или в маркированных списках.

Буква «H» в h2, h3 и т. Д.официально означает «элемент заголовка», хотя SEO-сообщество также обычно называет эти теги «тегами заголовка».

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

Вот пример того, как эта иерархическая структура может проявляться в структуре блога:

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

Что такое теги h2?

Тег h2 — это первый и самый важный тег заголовка в структурной иерархии страницы или сообщения. Обычно он отмечает заголовок страницы или сообщения.

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

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

Для иллюстрации тег заголовка в приведенном ниже примере — это заголовок «Полное руководство по маркетингу продуктов в 2021 году».

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

См. Пример 1 пера h2 от Кристины Перриконе (@hubspot) на CodePen.

Однако, как мы упоминали ранее, существуют и другие теги заголовков, которые также помогают в создании структуры страницы.

Сколько тегов заголовков поддерживает HTML?

HTML поддерживает до шести тегов заголовков (h2-H6), которые вы можете использовать для структурирования страницы по мере необходимости. Их можно стилизовать визуально в соответствии с вашим брендом, и, за исключением h2, вы можете иметь столько тегов на странице, сколько захотите.

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

Ниже приведен снимок экрана сообщения в блоге HubSpot с примерами тегов заголовков, обозначенных стрелками:

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

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

Теги заголовков и SEO

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

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

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

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

Для иллюстрации предположим, что ваше ключевое слово — «электронная коммерция». Вы хотите, чтобы это было отражено в вашем теге h2, поэтому заголовок вроде «Руководство по началу бизнеса в электронной коммерции» был бы идеальным.Это точно укажет Google, как отправлять веб-браузеры на ваш пост.

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

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

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

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

Как добавить теги заголовков в HTML

Добавление тегов заголовков в HTML — довольно простой процесс.Если вы хотите записать h2, вы должны ввести

и

, поместив текст h2 между этими двумя тегами. Это тот же метод для любого типа тега заголовка.

Например, если ваш h2 был « Руководство по запуску электронной коммерции, », он выглядел бы так:

См. Пример 2 пера h2 Кристины Перриконе (@hubspot) на CodePen.

Это будет работать для HTML4 и старше. Если вы работаете с HTML5, вам, возможно, придется использовать немного другую строку, чтобы получить тот же результат.Изменение состоит в том, чтобы предупредить Google о том, что такое h2:

.

См. Pen h2 Example 3 Кристины Перриконе (@hubspot) на CodePen.

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

См. Пример 1 пера h4 от Кристины Перриконе (@hubspot) на CodePen.

Помните, Google будет сканировать HTML тегов заголовков, чтобы сообщить веб-браузерам, о чем ваша страница, поэтому важно просмотреть их и увидеть, правильно ли отформатированы ваши заголовки в HTML.

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

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

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

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

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

HTML: тег

В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом

, с синтаксисом и примерами.

Описание

Тег HTML

определяет заголовок второго уровня в документе HTML. Этот тег также обычно называют элементом

.

Синтаксис

В HTML синтаксис тега

:

  
 
 Здесь идет заголовок 1 
 
 
 Здесь идет заголовок 2

Пример вывода

Атрибуты

В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу

:

Атрибут Описание Совместимость с HTML
выровнять Выравнивание текста Не рекомендуется в HTML 4.01, Устарело в HTML5, используйте CSS

Примечание

  • HTML-элемент

    находится внутри тега

    .
  • Заголовки могут находиться в диапазоне от

    до

    . Самый важный заголовок —

    , а наименее важный —

    .
  • Заголовок

    находится после заголовка

    . Не пропускайте уровни заголовков.

  • Заголовок

    обычно будет немного меньше шрифта, чем заголовок

    .

  • Не используйте тег

    просто для применения другого форматирования. Теги

    используются для определения уровней заголовков, как в Оглавлении.

Совместимость с браузером

Тег

имеет базовую поддержку в следующих браузерах:

  • Хром
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Мобильный Safari

Пример

Мы обсудим тег

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

в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

Документ HTML5

Если вы создали новую веб-страницу в HTML5, ваш тег

может выглядеть так: 

  




 Пример HTML5 от www.techonthenet.com 



 
 Заголовок 1 
 

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

 
 Заголовок 2 
 

 Это контент, который будет отображаться под заголовком 2.

В этом примере документа HTML5 мы создали тег

с текстом «Заголовок 1», а за ним следует тег

с текстом «Заголовок 2».

HTML 4.01 Переходный документ

Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

может выглядеть так: 

  




 HTML 4.01 Transitional Example by www.techonthenet.com 



 
 Заголовок 1 
 

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

 
 Заголовок 2 
 

 Это контент, который будет отображаться под заголовком 2.

В этом примере переходного документа HTML 4.01 мы создали тег

с текстом «Заголовок 1», а за ним следует тег

с текстом «Заголовок 2».

Переходный документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

может выглядеть так: 

  




 Переходный пример XHMTL 1.0, автор www.techonthenet.com 



 
 Заголовок 1 
 

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

 
 Заголовок 2 
 

 Это контент, который будет отображаться под заголовком 2.

В этом примере переходного документа XHTML 1.0 мы создали тег

с текстом «Заголовок 1», а за ним следует тег

с текстом «Заголовок 2».

Строгий документ XHTML 1.0

Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

может выглядеть так: 

  




 Строгий пример XHTML 1.0 от www.techonthenet.com 



 
 Заголовок 1 
 

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

 
 Заголовок 2 
 

 Это контент, который будет отображаться под заголовком 2.

В этом примере XHTML 1.0 Strict Document мы создали тег

с текстом «Заголовок 1», а за ним следует тег

с текстом «Заголовок 2».

XHTML 1.1 Документ

Если вы создали новую веб-страницу в XHTML 1.1, ваш тег

может выглядеть так: 

  




 XHTML 1.1 Пример с сайта www.techonthenet.com 



 
 Заголовок 1 
 

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

 
 Заголовок 2 
 

 Это контент, который будет отображаться под заголовком 2.

В этом XHTML 1.1 Пример документа, мы создали тег

с текстом «Заголовок 1», а за ним следует тег

с текстом «Заголовок 2».

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

Название раздела

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Cras at egestas leo, при conquat lorem. Etiam at ligula et nisl maximus Commodo.

Заголовок подраздела

Aliquam elit arcu, iaculis vitae hendrerit sed, rutrum quis magna.Suspendisse iaculis sit amet enim quis interdum. Quisque fringilla et mauris и sollicitudin. Aenean dictum volutpat elit id varius. Fusce nec pellentesque arcu, ac dictum ex.

Заголовок подраздела

Sed sagittis ipsum eu purus condimentum accumsan. Pellentesque volutpat porttitor est, sit amet tincidunt risus Vehicula porttitor. Morbi condimentum dapibus fringilla.

Заголовки содержимого

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

Теги заголовка и SEO

Есть две вещи, которые поисковая система пытается выяснить о вашей странице:

  • О чем она?
  • Насколько это хорошо?

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

Более организованное написание

Когда люди пишут без использования тегов заголовков (например, когда пишут от руки или в визуальном редакторе, таком как MS Word), они часто просто пишут длинными непрерывными потоками текста, которые длятся слишком долго.Или, что еще хуже, они могут добавить визуальные заголовки ( жирным шрифтом , ВСЕ ЗАГЛАВНЫМИ буквами, крупный текст или что-то еще . Это очень часто, поскольку люди инстинктивно понимают, что им следует разбивать текст на более мелкие части. Проблема при этом неясно, как разные разделы связаны друг с другом. Предполагается ли, что раздел, озаглавленный шрифтом 15 пунктов, является подразделом заголовков частей с полужирным шрифтом 14 пунктов? Часто даже автор не знает, потому что они действительно не думали об этом.

Теги заголовка создают иерархию содержимого

На странице с одним фрагментом содержимого (а это должно быть большинство страниц) основным заголовком для этого содержимого должен быть тег

. Основные разделы в этом содержании должны быть озаглавлены

. Подразделы в этих разделах должны быть озаглавлены

и т. Д. Должна быть возможность извлечь схему из тегов заголовков. (Фактически, мы делаем это — смотрим на виджет Contents вверху страницы.Эта структура делает письмо более организованным, что (по крайней мере, в 99% случаев) также делает его лучше.

Protip: Многие из нас, кто пишет в Интернете, на самом деле сначала наносят на карту заголовки, а затем заполняют разделы. Это просто старомодный план, но он наверняка может заставить писать намного быстрее, а конечный результат обычно намного более связный, чем если бы вы только начали с самого начала и надеялись достичь чего-то до того, как закончите.

Заголовки полезны для пользователей

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

И не забудьте привязать

В HTML5 вы можете ссылаться на любой элемент на странице, добавив знак решетки ( # ) и id элемента. (Раньше вы могли ссылаться только на элементы привязки.) Добавляя id к каждому заголовку на вашей странице, вы можете позволить людям ссылаться на любое место в вашем документе. (Опять же, посмотрите, как работают ссылки содержимого в верхней части страницы.) Эти ссылки в документе могут быть чрезвычайно полезными, особенно если вы предоставляете справочный контент любого типа или если ваши статьи особенно длинные.

Использование тегов заголовка для структурирования вашего контента

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

 и

элементы

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

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

.

  
 
 
 Все о заголовках 
.. . 
 Заголовки и SEO 
. . . 
 Заголовки и структура 
. . .

На странице индекса обычно имеет смысл поместить либо заголовок сайта в тег

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

для своих названий.

  
 
 Сообщения о HTML 
 
 
 О заголовках 
. . . 
 
 
 Ссылки 
. . . 
 
 
 Рамки 
. . .

В прошлом было принято использовать тег

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

  
 
 Руководства по HTML-коду 
  
 
 
 Фактическое название этой страницы

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

Виджеты и другое «несодержимое»

До недавнего времени также было обычным делом использовать элементы

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