В предыдущей я описывал основные факторы ранжирования для поисковых систем.
В данной статье разберем как правильно составлять заголовки на страницы сайта. Этот фактор относится к внутренним факторам ранжирования и обязателен при правильной оптимизации контента на страницах сайта.
Ранее я уже по их важности и роли для SEO. Сегодня подробнее разберем именно теги типа H. Всего существует 6 таких тегов, но в основном используются только первые 3 - теги h1, h2 и h3.
SEO заголовок страницы h1 и его значимость
Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения.
Очень часто встречаю в самописных сайтах или просто в непрофессионально собранных шаблонах такой момент, что тега h1 просто нет. На месте заголовка страницы заместо h1, находится тег h2. Это еще в лучшем случае - бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями походящими на заголовок.
Обязательно проверяйте наличие тега h1 на странице в самом начале оптимизации или еще ранее - на этапе проведении сайта. К тому же тег h1 должен быть всего 1 на странице.
Опять же частое явление, когда тегов h1 на странице несколько. Это свойственно опять же самописным сайтам или сделанных на конструкторе или с помощью разного рода софта вроде , об ужасном коде которого я писал ранее.
Последний сайт что я взял на оптимизацию - это как раз таки одностраничный сайт собранный на Muse и когда я заглянул на код сайта обнаружил аж 7 заголовок размеченных тегом h1 - это ужасная ошибка.
Заголовок h2 и его важность для продвижения
Если h1 многие все же придерживаются правил и используют на страницах своего сайта, то тегом h2 многие пренебрегают, а зря! Этим тегом обычно размечаются подразделы статьи, страницы.
Еще на этапе сбора семантического ядра для сайта в целом или для отдельной статьи нужно примерно понимать из каких разделов будет состоять статья. Опишем ли мы подробно преимущества, стоимость или какие-либо другие подробности по теме статьи или по товару.
Рассмотрим пример страницы товара в магазине фототехники - если заголовок h1 страницы имеет вид "Canon 6d Body", то тегом h2 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид "Характеристики Canon 6d Body" и "Преимущества фотоаппарата Canon 6d Body".
Тем самым мы за счет заголовков типа h2 захватим важные моменты, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному "Canon 6d Body", но и по дополнительным запросы касаемо преимуществ и характеристик данной модели фотоаппарата. А охват большего числа запросов в свою очередь - это рост трафика на сайт.
Кстати говоря, замечал и на своем блоге и на клиентских сайта случаи, когда заголовок типа h2 попадал в сниппет результатов поиска. Туда как правило попадает либо h1, либо title - они оба самые сильные по важности заголовки страницы и за ними преимущество, но не исключено и влияние h2 на сниппет.
Например данная статья может с легкостью выйти в ТОП по запросу "Заголовок h2", только потому что эта фраза есть в теге h2.
Пару слов о заголовке h3 и нужен ли о вообще
Я в своих статьях очень редко использую заголовок с тегом h3. В случаях если статья набирает в себе 5000 символов и выше и то не всегда - можно обойтись и разбаить статью на подразделы и разметить их тегом h2.
Все заголовки начинаz с h3 и до h6 несут в себе ту же самую уточняющую и дробящую страницу на подразделы роль, но это используется крайне редко. У вас должна быть просто очень огромная статья, чтобы можно было выстроить такую иерархию из подразделов страницы и задействовать все типы заголовков.
Для примера вложенности подзаголовков я напишу про иерархию заголовков, и размечу заголовок этого раздела тегом h3.
Порядок и иерархия заголовков на странице сайта
Все заголовки должны идти в строгом порядке. Первым на странице всегда идет заголовок типа h1.
Если подразделы для каждого из заголовков h2 получились внушительных размеров и в них затронуты несколько еще более мелких подтем, то внутри каждого или одного отельного подраздела с тегом h2 вы делаете сложенные "мини" подразделы страницы и размечаете их h3.
Не обязательно что все подразделы озаглавленные тегом h2 будут большими и их надо дробить еще на несколько подразделов. Ниже постараюсь наглядно показать как правильно делать вложенность по заголовкам на странице.
8 лайков
- 1
Павел
Александр, меня очень волнует вопрос по тегам. Пытаюсь правильно и доступно написать о своих услугах. С названием страницы (h1) я все понял, но у меня на этой же странице 12 различных предложений для клиента, напрямую связанные с главной темой страницы. Так вот, могу ли на это странице сделать 12ть заголовков h2? Какое количество текста должно быть под каждым заголовком? И да, я разбавляю их картинками... Заранее спасибо за ответ.
- 3
Андрей
как будет влиять на ранжирование span внутри h1.
на w3c ошибок много. или лучше сделать ЗАГОЛОВОК - 5
Граттол Казахстан
Подскажите пожалуйста, что будет если сначала идет h3 а потом h2? У меня магазин на вукомерц и описание товара вот так сделано. Надо ли исправлять? Просто товаров там не мало уже.
- 7
Сергей
А если у меня тег h1 состоит из двух фраз, одна из которых, по задумке дизайнера, сделана другим шифтом. Как тогда обойтись без, скажем, span внутри тега h1?
- 9
Юлия
Александр, подскажите пожалуйста. На сайте по продаже товара, в описании у нас есть и h1 и h2. Вопрос: "Тех. характеристики" и "В комплекте" - можно/нужно ли ставить h3? Думаю это лишнее и лучше обычным жирным шрифтом, верно?
- 11
Александр
Добрый день, Александр. У меня есть 2 вопроса по этой теме:
1. Хочу сделать микроразметку для товаров интернет-магазина и появился вопрос - можно ли использовать такую конструкцию внутри тега h1? Ничего, что в h1 вложено itemprop...?.
На моих топовых информационных проектах сначала специалист в тематике составляет структуру статьи (заголовки и подзаголовки), а потом уже копирайтеры по ним пишут текст.
Структура — это на самом деле очень важно, если вы заморачиваетесь насчет качества. А чтобы составить нормальную структуру, нужно понимание того, как работают теги h.
h1 — это главный подзаголовок в статье, который обычно размещен над текстом.
Первый заголовок должен визуально быть больше остальных заголовков на странице.
h2-h6 — это маленькие подзаголовки, которые проставляются по принципу вложенности.
Для чего вообще нужны заголовки?
Для тех, кто не сильно в теме — вот в принципе неплохое видео про азы составления подзаголовков h1-h6. Если не считаете себя спецом, посмотрите:
И для закрепления материала чуть послабее видео:
Заголовки призваны в одной фразе или даже слове выделить основную суть, идею последующего текста. Обычно на них человек обращает свое внимание в первую очередь, решая, стоит ли читать остальной материал. Особенно важное значение заголовки имеют в рекламных текстах, письмах, и служат главным инструментом по привлечению внимания целевой аудитории.
В коде тег выглядит так:
, где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.
H-теги глазами людей
Текст, разбитый на подзаголовки, смотрится более «опрятно», его проще читать. Современный пользователь уже давно научился сканировать статьи буквально за несколько секунд и оперативно делать выводы, стоит ли читать весь текст, есть ли в нем та полезная информация, которую он ищет. Заголовки цепляют глаз, выделяя главное и давая юзеру возможность проанализировать материал.
Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по поведенческим факторам. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по SEO была проделана не зря.
H-теги глазами поисковиков
Поисковые роботы собирают с них информацию для семантического анализа. Особое значение для ботов имеют заголовки уровней h1, h2, h3. Их непоследовательное или неправильное применение может негативно сказаться на ранжировании станицы. Если в HTML-коде вообще отсутствуют h-теги, то сайту придется туго в продвижении. Уровни h4, h5, h6 менее значимы.
Иерархия H-тегов
Главным правилом в расстановке заголовков является их иерархия. Необязательно, чтобы теги шли друг за другом по размеру, но недопустимо в тексте использовать, например, h3, если у вас нигде не присутствует мета h2 или применять h6 без h5.
Вот так выглядит иерархия с правильной вложенностью:
Что за тег h1
Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).
На каждой странице должен быть один и только один тег h1.
В плане привлекательности для пользователя он имеет главное значение. Но для SEO-продвижения больший вес будет иметь .
Title – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве активной ссылки на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.
Почему h1 должен различаться с Title
Довольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать. Вот азы на эту тему:
Пренебрежение правилами уникализации и релевантности заголовков может привести к тому, что сайт попадет под фильтр. Последнее время поисковые системы стали уделять особое внимание качеству контента и его SEO-настройкам. Дубли, переспам, хаотичное расставление заголовков, их несоответствие содержимому карается.
Требования по длине H1
H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.
Специальные плагины для WordPress позволяют проанализировать правильное заполнение всех мет прямо в редакторе.
Правила для грамотного написания h1
- Должен быть уникальным для всего сайта и абсолютно читабельным;
- Не повторяет тег title, но и не противоречит ему;
- Не стоит делать его слишком длинным (более объемным можно делать title);
- Используется только 1 раз на каждую страницу;
- Релевантен тексту и отображает смысловую суть материала;
- Интересен, привлекателен для пользователя;
- Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.
Применение ключей
Главные ключевые фразы, в первую очередь, должен содержать title. Но следует их писать и в h1. И там, и там лучше это делать в самом начале. Но лучше бы ключевые слова не дублировали друг друга в этих двух тегах. Нужно использовать разные словоформы или разбавленные вхождения в h1 и прямые в title.
Некоторые берут все ключи на страницу и из них составляют структуру статей. Сразу учтите — без классных ПФ такая россыпь ключей по подзаголовкам будет караться фильтром за переспам.
Психологические приемы для составления привлекательного заголовка
Заголовок должен быть «цепляющим». Вот видео от Максима Ильяхова, спеца в области СМИ, ректора Школы редакторов и создателя сервиса «Главред»:
Вот еще пара «приемов», которые применяются при составлении заголовков.
Решение проблемы
Помните, что человек всегда ищет не информацию или товары, а прежде всего – решение своих проблем, потребностей, нужд. Оперируйте именно к предполагаемой проблеме целевой аудитории
Пример удачного заголовка: «Выпадают волосы? Остановите выпадение за неделю».
Пример неудачного заголовка: «Можно ли остановить выпадение волос?»
В первом случае мы четко обозначаем проблему и предлагаем конкретное решение. Во втором случае проблема задета косвенно и варианты ее решения размыты.
Заинтриговать
Пример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».
Пример неудачного заголовка: «Лучший рецепт от выпадения волос».
Прием «экзамен»
Предложение, составленное в такой форме, бросает вызов читателю, предлагая ему проверить себя.
Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»
Пример неудачного заголовка: «Все ли вам известно о выпадении волос».
Конечно, это далеко не все методы, которые помогают воздействовать на восприятие человека и привлечь его интерес. Читайте книги по маркетингу, чтобы вычитать больше, если интересна эта тема. Кстати title тоже может быть «заманивающим». Тем более что скорее всего именно он высвечивается в поисковой выдаче. Проверить его отображение можно будет после индексации страницы.
Зачем нужны подзаголовки h2-h6
Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.
Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам.
h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.
h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.
h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.
Длина всех h-тегов должна быть в пределах 50 символов.
Как правильно прописывать подзаголовки h2-h6
- Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.
- Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.
- Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.
- Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.
- Нельзя писать другие теги внутри тега h.
- В h-тегах допускается только текст и знаки препинания.
- В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.
Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на . Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.
Как заполнять h-теги в WordPress
h1 заполняется обычно в поле над текстом в записи:
Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему. Проделать то же самое для каждого из подзаголовков, включая их в нужный формат.
Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.
SEO разметка текста.. или семантическая верстка сайта.
Семантическая верстка сайта - за этим страшным определением скрывается одна простая истина: сайт должен быть не просто сверстан, а свёрстан логично! Так что можно сказать примерно так: семантическая верстка это - логичная верстка.
Для того что бы Вам было понятнее о чем идёт речь приведу несколько примеров где логика отсутствует..
Итак, плохие примеры:
- Использование заголовков
-
лишь с той целью чтобы увеличить или уменьшить размер буковок.. - Неуместное использование тегов логического форматирования , например, вместо текста г. Самара просто какой то текст, который никоем образом к адресу не относится.. например: Установка окон .
- Использование тегов для формирования списков
- И даже использование таблицы в качестве каркаса сайта (табличная вёрстка) вместо того чтобы использовать таблицу по её прямому назначению, а именно для вывода данных в табличной форме.. расписания движения электричек например.. это тоже НЕ семантическая верстка сайта.
Много всяких примеров приводить можно.. суть же одна: семантическая верстка - эта верстка, при которой каждый тег на странице работает по своему прямому назначению и никак иначе.
Думаю сейчас многие испугались "ааа.. у меня сайт таблицей свёрстан!", "а у меня меню сайта не является списком.." не пугайтесь сильно! конечно к "правильному" построению сайта нужно стремиться, но если по-другому никак не получается то можно чем то и пренебречь, однако некоторые вещи всё же лучше соблюдать!
Заострим внимание на правильной разметке текста, так как это наиболее важно для оптимизации сайта под поисковые системы..
Многие начинающие веб-мастера думают, что заголовки -
это всего лишь способ выделить текст размером, сделать его крупнее - это не так!! На самом деле теги
-
во-первых выделяют именно заголовки
в тексте, а во вторых выделяют их по степени "важности" например заголовок
Как создать сайт?
в глазах поисковых систем куда более важен чем заголовок
Как создать сайт?
и если бы это были заголовки двух разных страниц то при прочих равных условиях поисковая машина по запросу пользователя "Как создать сайт?"
выдаст в результатах поиска на первом месте ту страницу, в которой используется заголовок первого уровня
.
Однако не стоит хвататься переделывать все заголовки на Вашем сайте с ,
в ..
ни к чему хорошему в плане оптимизации это не приведёт! В идеале на странице должен присутствовать всего один заголовок первого уровня который как бы содержит в себе два-три заголовка второго уровня в которых в свою очередь "вложены" заголовки рангом поменьше и так далее.. структура документа должна иметь примерно такой вид:
То есть заголовки должны быть, как бы вложены друг в друга по степени важности и иметь древовидный вид. Сам же текст желательно разбить на параграфы с помощью тега
- где текст каждого абзаца несет в себе одну логическую часть текста.
Такая разметка текста легко "усваивается" поисковыми системами и другими программами работающими с HTML документами, например, позволяет выхватить один из параграфов для описания сайта в результатах поиска, не ломая голову где начинается и где заканчивается определённая логическая часть текста или учитывая уровни заголовка автоматически составить содержание документа.
Так как текст в заголовках -
имеет куда более большее значение для поисковых систем, да и просто для человека просматривающего страницу, нежели чем просто текст то их следует наполнять ключевыми словами!
Теги h1, h2, h3, h4, h5 и h6 представляют из себя заголовки с первого по шестой уровень. Они определяют важность сегмента, который озаглавливают. Градация начинается от h1 — самого приоритетного, и заканчивается h6, который имеет низший приоритет из всех.
При этом на странице может быть не более одного заголовка h1, так как именно этот тег описывает все содержимое страницы целиком.
Заголовков h2…h6 в документе может быть сколько угодно.
Все они имеют крайне простой синтаксис. Начинается заголовок с тега
, далее следует текстовое описание, которое обрамляется закрывающим тегом
.Вот так: Тут находится текст заголовка
На рисунке ниже представлен заголовок внутри HTML страницы.
Заголовки любого уровня, с точки зрения HTML, являются блочными элементами и всегда отображаются на новой строке. Это позволяет визуально разделить текст на смысловые блоки.
Пример заголовка h1 можно увидеть прямо на странице с данной статьей. Выглядит он следующим образом.
Его синтаксис крайне прост: Заголовки страницы h1, h2, h3 … h6
В заголовке содержится краткое описание материала, а так же самые распространенные ключевые слова. Никаких дополнительных стилей и слоев внутри h1 нету.
Пример заголовков h2…h6
Наглядный пример вложенных заголовков h2 и h3 можно увидеть на странице (Для удобства, на рисунке мы убрали текст статьи)
Заголовок
имеет больший размер и содержит описание раздела, в том числе обобщающее подзаголовки . Во все теги добавлены ключевые слова. При этом h2 имеет более частотный ключевик, чем h3.Роль тегов h1…h6 в SEO
В SEO продвижении заголовок первого уровня h1 занимает особую роль. Он описывает содержимое всего документа и в отличии от
Здесь находится основное содержимое сайта, статьи, которые имеют заголовки в тегах: