SEO-секреты SEO-заголовков в тегах h2, h3…-h6
Здравствуйте, дорогие читатели. Сегодня хочу уделить особое внимание теме заголовков в тегах h2 h3 — h6, т.к. в ближайшее время планирую (как и обещала) несколько практических статей по редактированию заголовков в шаблонах. Но прежде, чем осваивать что-либо на практике, я считаю, нужно пусть не знать, но понимать теорию. Давайте с самого начала определимся с понятиями, с тем, что такое заголовок в HTML документах, заголовок на сайте, странице.
Все мы с вами знаем русский язык, и что касается общепринятого понятия заголовок – вопросов быть не должно. Заголовок — это то слово или фраза, которая обобщает весь смысл какого-то текста, информации, которые идут после него.
Как любая книга начинается с заголовка, так и любой документ в интернете имеет свой заголовок.
Но если мы, открывая книгу, понимаем, что вот эта фраза является заголовком, потому что имеет более большой или жирный шрифт, то на интернет страницах действуют немного свои правила. В интернете слово заголовок имеет несколько значений и применяется в разных целях. Поэтому, необходимо знать и понимать, о каком именно заголовке идет речь, и что именно вам нужно.
Первое и самое главное, в чем мы должны разобраться, это в том, что в HTML документе есть три разных понятия заголовка.
Любой документ включает в себя три основных HTML тега:
<html>
<head>
Здесь находится техническая информация о документе +
заголовок страницы в тегах
<title>Заголовок страницы</title>
</head>
<body>
Здесь находится основное содержимое сайта, статьи, которые имеют заголовки в тегах:
<h2>Заголовок сайта или статьи</h2>
<h3>Заголовок статьи</h3>
<h4>Подзаголовок статьи</h4>
<h5>Другие блоки с информацией </h5>
<h5>Другие блоки с информацией </h5>
<h6> Другие блоки с информацией </h6>
</body>
</html>
Второй по значимости тег в seo – и является тег заголовка <h>.
Именно он нем дальше пойдет речь.
Итак, любая поисковая система придает большое значение этому тегу. Как приводила пример с книгой, именно он (вместе с title) сообщает тему страницы, о чем она, обобщает смысл статьи. Именно этот заголовок сообщает вам, о чем будет моя статья, которую вы читаете. Мы с вами видим, что такие заголовки всегда отличаются внешним видом от основного содержания страницы. Для этого и были придуманы специальные теги, которые отвечают за то, чтобы информация в них всегда была выделена.
С одной стороны, тег, как бы один <h>, но с другой стороны, их шесть и все они пронумерованы в порядке своей значимости, и что очень важно, не просто значимость, а ещё и иерархия. Вот с этого момента начинается самое запутанное и непонятное – как определить значимость, что является более значимым, а что нет?
Давайте просто рассуждать логически. Вот у нас главная страница на сайте. Как правило, главная страница отражает всю тематику сайта в целом. И в идеальном варианте – название сайта так же должно отражать всю тематику сайта. Значит, название сайта должно быть заголовком, причем, самым главным заголовком, т.е. в теге:
<h2>Название сайта</h2>.
Далее, не обязательно, но как правило, на главной странице должно быть какое-то обращение к посетителю, и в идеальной ситуации, это обращение должно включать в себя заголовок, который в свою очередь должен содержать в себе тематику сайта (ключевое слово, отражающее тематику сайта). Значит, этот заголовок должен быть в теге:
<h3>Заголовок статьи-обращения к посетителю</h3>.
Далее, в этой статье-обращении может (а я настаиваю на том, что должен) быть подзаголовок, которые ещё более раскрывает все аспекты тематики сайта. Так же включает в себя какие-то ключевые слова, которые могут быть или должны быть близки к названию сайта или заголовка статьи. Такой подзаголовок должен быть в теге:
<h4>Подзаголовок статьи</h4>.
Давайте представим такую страницу.
Вот таким образом мы распределяем теги заголовков. Стоит заметить, что если вместо заголовка вы используете картинку-баннер, то оформлять его в тег заголовка не нужно.
Остаются два немаловажных вопроса:
Как использовать остальные теги – 4, 5, 6
И нужно/можно ли использовать теги заголовков в меню/сайдбаре?
На первый вопрос отвечаю, что использовать именно все теги заголовков не обязательно.
На второй вопрос однозначного ответа нет. Но я имею такое мнение, что если в сайдбаре есть такой информационный блок, в котором находится информация о сайте, информация, отражающая тематику сайта, то необходимо такие блоки оформлять тегами заголовка.
Например, это может быть блок: Интересные статьи о seo. В заголовке такого блока находится ключевое слово, которое отражает тематику всего проекта. Поэтому такой блок стоит оформить в заголовок <h5>.
Тут может возникнуть такой вопрос: А почему его не оформить в более высокого ранга тег? Ответ так же можно попробовать получить логическим путем.
Первое, что мы должны знать – это, как поисковый робот сканирует страницы, можете прочитать об этом статью Поисковый робот.Как правило (подчеркиваю, как правило), современная верстка сайта имеет такую структуру:
Заголовок сайта
↓
Основное содержание страницы
↓
Сайдбар
↓
Футер/подвал страницы
Т.е. именно в таком порядке поисковый робот видит всю информацию на странице.
Второе, что мы должны знать – все теги заголовков имеют свою иерархию (об этом писала выше), и не допустимо, чтобы тег третьего порядка был выше тега второго порядка.
Казалось бы, на все вопросы ответили, и тема должна быть исчерпана, но не все так просто. Дело в том, что, как правило, внутренние страницы отличаются от главной, при этом, так же важно, чтобы они тоже были хорошо оптимизированы, чтобы мы получали с них трафик с поисковых систем. Поэтому, для них очень желательно применять свою иерархию заголовков.
Из моей картинки в примере, если на сайте есть отдельные статьи о Продвижении в поисковиках и Продвижении в социальных сетях, то, для внутренней оптимизации под поисковые запросы структура заголовков должна быть такой:
Т.е. уже заголовок сайта не имеет такого важного значения, как заголовок статьи (может, мой пример, не самый наглядный, т.к. везде присутствует слово “продвижение”). Такая расстановка заголовков значительно улучшает ранжирование страниц в поисковых системах, тем самым увеличивая переходы пользователей с них.
Выше я написала, что это желательно, но не надо биться головой о стенку, если это невозможно сделать. Платформы, шаблоны и знания у всех разные, и если не получается, то лучше сконцентрироваться на чем-то другом, направить свои действия на улучшение того, что лучше получается. Ведь успешное продвижение в поисковых системах зависит от совокупности целого ряда факторов. Чем больше мы уделяем внимание внутренней оптимизации, тем меньше нам требуется внешняя. Если внутренняя уже исчерпала себя, то надо переключаться на внешнюю оптимизацию.
Данная статья направлена, в первую очередь, на понимание темы, теории. В век CMS правильно сделать заголовки не сложно, но к сожалению, для этого надо обладать более глубокими знаниями в сайтостроении и программировании. И если для основного большинства моих читателей данная статья больше для ознакомления, то для тех, кто когда-нибудь будет заказывать создание сайтов Чебоксары или в любом другом городе мира, составлять техническое задание для верстальщика, программиста, создавать свой сайт самостоятельно, сможет либо объяснить, либо применить эти знания на практике.
Например, я давно собираюсь поэкспериментировать с шаблоном, и сделать именно так, как описала в статье, потому что считаю это самым оптимальным вариантом. Но я пока не так сильна в XML (для Blogger) и в PHP (для WordPress), чтобы сходу сообразить, как для разных страниц сделать разные заголовки. Но зато, после этой статьи у меня будет больше стимула воплотить свои идеи на практике, и я обязательно расскажу вам, как это у меня получилось. Естественно, не только расскажу, но и поделюсь.Если какие-то вопросы я раскрыла не достаточно полно, спрашивайте в комментариях, дополню. Пишу эти слова, т.к. чувствую, что в голове ещё что-то осталось недосказанное, но никак не могу вспомнить, что. Поэтому спрашивайте.
Задумывались ли вы когда-нибудь о том, чтобы вести коллективный блог или хотя бы найти второго автора для своего блога. Если такие мысли вас посещают, то стоит обратить внимание на статью Недостатки нескольких авторов блога. Там же, на блоге, можете найти статью и о достоинствах.
Желаю удачи в развитии ваших блогов.
| Справочник 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 Базовые теги
Как правильно писать HTML заголовки для сайта. Заголовки h2, h3, h4
Правильно расставленные HTML заголовки <h2>, <h3>, <h4> и т.д. — это важный пункт оптимизации страниц для поисковой системы. У вебмастеров есть разные мнение относительно правильности использования HTML заголовков. В этой статье я изложу свою точку зрения как правильно заполнять HTML заголовки для страниц сайта. На мой взгляд такой подход является оптимальным.
Учимся понимать иерархию HTML заголовков
Чтобы визуализировать для себя суть структуры заголовков, представим, что у нас есть книга. Она разделена на 2 раздела, каждый раздел имеет по 3 главы.
Получается такая структура:
Книга
— Раздел 1
— — Глава 1
— — Глава 2
— — Глава 3
— Раздел 2
— — Глава 4
— — Глава 5
— — Глава 6
Представление такой структуры в виде иерархии HTML заголовков будет выглядеть следующим образом:
<h2>Книга</h2>
<h3>Раздел 1</h3>
<h4>Глава 1</h4>
<h4>Глава 2</h4>
<h4>Глава 3</h4>
<h3>Раздел 2</h3>
<h4>Глава 4</h4>
<h4>Глава 5</h4>
<h4>Глава 6</h4>Как вы видите, глава имеет меньший охват, чем раздел, соответственно имеет меньший по значимости уровень заголовка. Однако, «Раздел 1» и «Раздел 2» — это две последовательные структуры (Раздел 2 не является подразделом Раздела 1) — соответственно они имеют одинаковый уровень HTML заголовка.
Обратите внимание, что разделов и глав в книге может быть сколько угодно, но ни один из них не будет по значимости равен или выше названию книги. Равносильной книге может быть только другая книга, а соответственно уровня главного заголовка веб-страницы может быть только заголовок другой веб-страницы (который находится в другом HTML документе).
На одной HTML странице должен быть один заголовок <h2> и далее по необходимости один или несколько заголовков уровня ниже.
Правильная структура HTML заголовков страницы
Структура заголовков должна отражать смысл контента в них. Подзаголовки <h4> должны конкретизировать суть обозначенную в HTML заголовке <h3>, а два заголовка одного уровня — продолжать друг друга либо раскрывать другую грань содержимого страницы.
И помните: указание заголовка <h3> после <h4> укажет что предыдущий раздел <h3> закончен и начат новый, а не подчеркнет значимость подраздела.
В глазах поисковой системы заголовки имеют собственный вес в зависимости уровня. Наибольший вес имеет заголовок <h2>, меньше него <h3>, наименьший <h6>. Таким образом, названия разделов имеют больший вес, чем названия подразделов.
Сколько уровней заголовков использовать
Основное, на что нужно ориентироваться — заголовки должны отражать структуру содержимого.
На сколько частей разбивать материал и на сколько подразделов его дробить — решать вам, и во многом это зависит от специфики вашей ниши.
Из практики скажу, что редко когда есть необходимость опускаться ниже третьего уровня. Обычно заголовков <h2>, <h3>, <h4> вполне достаточно, но, повторюсь: на первом месте правильное отражение структуры контента.
Не следует пытаться намеренно увеличить количество подзаголовков в статье. Слишком большое количество выделенных элементов может негативно сказаться на позициях вашего сайта в поисковых системах.
В любом случае, рекомендую посмотреть как расставляют заголовки авторитетные сайты в вашей нише. Возможно, вы подчеркнете для себя несколько полезных пунктов.
Заголовки дополнительных блоков сайта
Практически все блоги имеют блок ссылок на похожие статьи, блок опроса, подписки; интернет-магазины — блок фильтров, похожих товаров, популярных, ранее просмотренных, хитов продаж… Все это не является основным контентом страницы, но структура у этих блоков также есть. Так что, стоит озаглавливать такие блоки заголовком <h3>, <h4> или каким-то другим?
Я бы не рекомендовал. Для поисковых систем важна та уникальная информация, которую несет ваша страница, либо не уникальная, но преподнесенная удобнее всего среди конкурентов.
Структурируйте заголовками основной контент страницы, для всех дополнительных элементов достаточно выделения названия блоков стилями CSS.
Заголовки на сайте интернет-магазина
Со статейными страницами все просто — есть основная статья, у нее есть структура. Но как писать HTML заголовки на сайте интернет-магазина?
Стоит выделить 2 типа страниц: страница каталога и страница товара.
Страница каталога
Что действительно стоит сделать — так это вынести в заголовок <h2> название подборки: «Холодильники SAMSUNG», «Горные велосипеды Ardis», «Все для отдыха», «Женские платья и сарафаны» — это все может быть заголовком <h2>.
Во многих случаях этого будет достаточно. Вам не обязательно использовать несколько уровней HTML заголовков на каждой странице.
В некоторых магазинах есть общие страницы, показывающие названия категорий и несколько товаров этих категорий. Тогда вы можете сделать названия категорий заголовками. HTML допускает использование заголовков — ссылок.
Смысла в добавлении заголовков на каждый товар из каталога скорее нет. Однако, если вы используете текст — описание страницы каталога и оно достаточно длинное, чтобы разделить его на подзаголовки — сделайте это.
Страница товара
Думаю, ни кого не возникнет сомнений, что заголовок <h2> должен содержать название товара. Хорошей практикой для некоторых ниш является добавление слов, конкретизирующих товар, например, бренда или какой-то характеристики.
У магазина одежды, мало шансов попасть в топ по запросу «Белая футболка», но куда больше по запросу «Белая футболка Trussardi». Если вы продаете телефоны, вместо указания в названии «iPhone 8» и указания вариантов цвета и объема памяти в списке характеристик создайте несколько страниц и сделайте у них <h2>: «iPhone 8 256Gb Белый», «Apple iPhone 8 64Gb Space Gray» и так далее.
Перейдем к подзаголовкам. Большинство страниц товаров имеют похожую структуру и одинаковые элементы: фото, описание, характеристики, отзывы. Сами же блоки могут быть показаны на странице все сразу, либо страница имеет вкладки, по клику на названия которых открывается нужный блок.
И в первом и во втором случаях стоит присвоить этим блокам заголовки HTML (обычно <h3>). В данном случае блоки относятся к основному контенту и не являются обверткой, о чем говорили выше.
Также, достойным решением является конкретизация таких заголовков. В пример приведу один популярный магазин электроники.
Обратите внимание, вкладка имеет короткое название «Характеристики», при нажатии открывается блок с заголовком <h3>: «Технические характеристики Apple iPhone X 256GB Silver».
Пожалуй, на этом все. Я надеюсь эта статья была для вас полезной. Ниже оставляю несколько рекомендаций, на которые следует ориентироваться при составлении заголовков.
Выводы. Рекомендации по использованию заголовков HTML
1) На странице должен быть только один заголовок уровня <h2>.
2) Строго сохраняем иерархию: <h3> внутри <h2>, <h4> внутри <h3> и т.д. Никаких <h5> сразу после <h3> и т.п.
3) Заголовки должны передавать смысл содержимого.
4) Не стоит использовать заголовки на постоянно меняющихся / дополнительных элементах страницы.
Применение заголовков h2, h3, h4, h5, h5 и h6 на сайте
Для того, чтобы сайт попал на первые места поисковой выдачи и получил трафик с поисковых систем, его необходимо оптимизировать. Именно оптимизация, а не создание сайта, является самым трудным этапом. Если создаётся сайт единовременно, то процесс оптимизации его идёт постоянно. Начинают, как правило, с внутренней оптимизации сайта, так как она имеет определённое число конечных этапов. Впрочем, этапов этих много, поэтому лучше сосредоточится на описании тех, которые наиболее редко применяются вебмастерами из-за своей неизвестности или сложности. Одним из самых незаслуженно недооценённых этапов оптимизации является расстановка заголовков h2-h6. Как показывает практика, значительная доля вебмастеров даже не знает, зачем нужны эти заголовки, а уж используют правильно их и вовсе единицы. Собственно, о них мы в этой статье и поговорим.
Заголовки h2-h6 предназначены для выделения определённых текстовых сегментов страницы, содержащих ключевые слова или фразы, способные помочь поисковой системе распознать тематику и тему контента страницы. Функции заголовков схожи с функциями мета-тегов и дополняют их, однако, как уже говорилось выше, используются очень редко, тогда как мета-теги ставят почти все вебмастера. Теги h2-h6 можно распознать на странице визуально, так как ими выделяют элементы «тела» страницы, тега body. Это также отличает их от мета-тегов. Ещё одно тонкое отличие функций тегов h от мета-тегов в том, что они имеют внутреннюю иерархию, с помощью которой можно построить иерархию использованных на странице ключевых слов, придав одним большее, а другим меньшее значение, если это нужно.
Существует классическая модель расстановки заголовков, которая используется во многих CMS по умолчанию, например, во многих шаблонах WordPress. Она наиболее подходит самым обычным сайтам. Выглядит же она примерно так:
- <h2>Заголовок сайта</h2> —
- <h3>Заголовок страницы (материала)</h3>
- <h4>Подзаголовки страницы (материала)</h4>
- <h5>Заголовки элементов навигации</h5>
Однако, недостатки этой модели видны невооружённым глазом. Во-первых, далеко не всегда заголовок сайта несёт какую-то смысловую нагрузку, он не всегда содержит ключевые слова. Во-вторых, заголовки элементов навигации практически никогда не нужно выделять данными тегами. Для многих видов сайтов, особенно для блогов, целесообразнее выделять тегом h2 не заголовок сайта, а название страницы (заголовок статьи), так как он более информативен и лучше отражает тематику и тему контента страницы. Тогда тегами h3 можно выделить подзаголовки статьи (материала), тегами h4 наиболее важные ключевые слова в статье и т.д. Можно использовать и другие вариации, главное понять смысл: заголовки от h2 до h6 по снижающейся должны отражать важность тех или иных слов или фраз для понимания тематики контента страницы.
Правила использования h2-h6 на страницах сайта
Существует ряд чисто технических правил использования заголовков h2-h6, выполнение которых строго обязательно, а нарушение в лучшем случае сведёт на нет весь их эффект. Перечислим их ниже:
- Структура заголовков. При расстановке заголовков необходимо соблюдать их иерархию. То есть, чем выше уровень заголовка (меньше номер) – тем выше он должен находиться на странице (исходном html коде). Конечно, всегда однозначно соблюсти это правило не получается, хотя бы потому, что заголовки всех уровней, кроме первого, могут применяться по нескольку раз на странице. Главное, чтобы заголовок h2 находился выше других на странице, а h3 под h2, но также выше всех остальных.
- Размеры шрифтов заголовков. Чем выше уровень заголовка – тем больше должен быть размер его шрифта. Логично, что самым большим на странице должен быть заголовок h2, а самым маленьким – h6.
- Ключевые слова и фразы в заголовках. Каждый заголовок h должен содержать те или иные по важности ключевые слова или фразы. Так как данные заголовки акцентируют внимание поисковых систем на определённых элементах страницы, не допускается, чтобы акцентирование происходило на «пустые» слова. Лучше вообще не использовать лишние заголовки, если их некуда применить, чем выделять ими что попало.
- Совместимость. Теги h нельзя использовать совместно с любыми другими тегами, особенно тегами акцентирования, такими как <b> и другими.
- Содержимое тегов h. Теги h2-h6 не должны содержать в себе ничего, кроме текста. Не допускается заключение в них ссылок, изображений и других посторонних элементов страницы.
- Заголовок h2 используется на каждой странице только один раз. Это самое главное правило.
Стоит отметить, что наличие данных заголовков на странице не является обязательным, точно так же, как не является обязательным наличие непременно всех уровней заголовков. В большинстве случаев более чем достаточно использования первых трёх уровней, остальные же могут только навредить, акцентируя внимание на незначительных элементах страницы. Данный этап оптимизации не отнимает много времени. Расстановку заголовков в современных системах CMS легко автоматизировать, и, единожды проделав этот процесс, можно сэкономить много времени в будущем.